Quick ReactJS native environment setup on OS/X

First, install XCode
Also install brew (brew.sh)

Then, from the command line

brew install node
brew install watchman
npm install -g react-native-cli

to generate a new project, from the command line

react-native init myproj

The above will create a basic React native template (it can take a few minutes, lots of megabytes involved…). When complete it will create a folder named myproj containing the following:

index.ios.js (main file for the application javascript/JSX code for iOS devices)
index.androis.js (main file for the application javascript/JSX code for Android devices)
ios – (directory containing XCode project and related files)
android – (directory containing gradle project and related files)
node_modules – modules used by the application

You might want to look at the official React native tutorial

To quickly run an iOS app, open the XCode project (in this case myproj.xcodeproj) in the ios directory. After it completes indexing and doing it’s thing, run it (click the play button in XCode). This will start the react packager, and launch the basic compiled application in the simulator. The packager enables you to make changes in the code and immediately view them in the react application by pressing +R. You can check this very cool feature of React native development by making a small change in index.ios.js , saving, switching to the simulator running the application and pressing +R

Should you add new resources (e.g source code files) you’ll need to relaunch the react packager. You do this from the command line in the project directory by:

npm start

Leave a Reply

Your email address will not be published. Required fields are marked *