This is the code repository for React and React Native, published by Packt. It contains all the supporting project files necessary to work through the book from start to finish.
React and React Native allow you to build cross-platform desktop and mobile applications using Facebook’s innovative UI libraries. Combined with the Flux data architecture and Relay, you can now create powerful and feature-complete applications from just one code base!
In this section, I'll walk you through the process of cloning this repository, installing dependencies, and how to launch the examples.
To clone this repository:
git clone https://github.com/PacktPublishing/React-and-React-Native.gitThat's it. I'll likely be pushing fixes to this repository on a regular basis, so it's a good idea to run the examples from it. But first, you need to make sure all required dependencies are installed.
To install the dependencies used with the code examples, open up a terminal if you haven't already, and change into the repo directory:
cd React-and-React-NativeNow you can use npm to install all the packages that we need:
npm installThere are quite a few dependencies to install, so this command might run
for a minute. These are the local dependencies, meaning that they're specific
to the code examples in this Git repository. You can take a look at the
package.json file to get an idea of what this project depends on. Or, you
can simply list them in the console by running:
npm ls --depth=0Npm also has the notion of global depnedencies. These are npm packages that are available to any project in on the system. We need to install the following global dependencies in order to run the example code:
npm install -g webpack-dev-server webpack babel babel-cliThis will make the webpack and the
webpack-dev-server packages
available to any projects on your system. More importantly, this will install
the webpack-dev-server command needed to run the examples.
First, you need to change into the directory of the example that you'd like to run:
cd Chapter02/builtin-html-tagsThen, you're ready to run the Webpack development server:
webpack-dev-server --hotThis starts the development web server. The console output will tell you where the server is listening for requests:
Project is running at http://localhost:8081/
You can visit this page to interact with the example. The --hot option isn't
always necessary. In fact, it's really only useful if you plan on modifying
the code examples (recommended!) and you want to see the results in the browser
immediately.
If you find a server.js file in the example directory, this should be
executed instead of the webpack-dev-server command:
babel-node server.jsThen, you can visit the address displayed in the console, in your browser,
just like you would with webpack-dev-server.
Each React Native example is it's own project. There are a few steps that should be followed, in order to build and run these projects. First of all, make sure you have the react-native-cli package installed:
npm install react-native-cli -gJust like any regular React web projects:
cd path/to/code
npm installWhen you start a React Native project, there're a number of source files generated. They're not included in this code bundle because it would be way too big. To generate them, run:
react-native upgradeThis will ask you about overwriting a number of files. You can answer yes to all of them.
Some examples have dependencies that need to be linked. It's generally a good idea to link projects even if they don't have any dependencies, because you never know when new dependencies will creep in:
react-native linkFrom within the given code directory, run one of the following:
react-native run-ios
react-native run-androidClick here if you have any feedback or suggestions.