React-native Getting Started Guide (i)--Environment configuration & Hello World

React-native Getting Started Guidegithub:https://github.com/vczero/react-native-lession

React-native: Develop your native app with JavaScript, unleash the Native UI experience and experience hybird development efficiency.

The articles written in the last one weeks are as follows:

• 1th article Hello React-native
• 2nd. Understanding Code Structure
• 3rd article css and layout
• The 4th Chapter react-native the layout of learning
• 5th Chapter UI Components

There are several needs this week to complete (this piece will be updated at all times):

• 6th article JSX Syntax
• 7th Self-write component
• The 8th chapter of modular Development
• 10th Building Project Structure
• The 11th Article source analysis

First Environmental configuration & Hello World First, preface

Recently, there is a lot of work in hand, there are research projects and system research and development, just happened to meet the departure of colleagues, took over the UI components of the framework, not only need to maintain and fill the hole, but also need to develop new functional components. Because of being in the framework department of H5-Hybird, recently the team started to try to use React-Native to do something. I also had the urge to develop iOS App before, and learned a little about Object-c. This time I took this opportunity to enter App development to make up for my lack of experience in Native-App.
Second, the environment configuration
(1) A Mac (OSX) is required. This is a prerequisite. It is recommended to start with a copy.
(2) Install Xcode on Mac, Xcode 6.3 or above is recommended
(3) Install node.js: https://nodejs.org/download/
(4) It is recommended to install watchman, terminal command: brew install watchman
(5) Install flow: brew install flow
Ok, according to the above steps, you should have configured the environment.
3. Hello, React-Native
Now we need to create a React-Native project, so we can follow the steps below:
Open the terminal and start the journey of React-Native development.
(1) Install command line tool: sudo npm install -g react-native-cli
(2) Create an empty project: react-native init HelloWorld
(3) Find the created HelloWorld project, double-click HelloWorld.xcodeproj to open the project in xcode. xcodeproj is a project file of xcode.
(4) In xcode, use the shortcut key cmd + R to start the project. Basic Xcode functions can be familiar, such as the choice of simulator.
After the startup is complete, you will see React-Packger and the iOS simulator. The specific effects are as follows, indicating that you have successfully created the project.
Fourth, change HelloWorld
The code directory structure in Xcode is temporarily ignored. Open the HelloWorld project folder and find the index.ios.js file.
The index.ios.js file is the entry file for the React-Native JS development journey. First come to a perceptual understanding, modify one
Some text, the next article will read the code inside. Open the index.ios.js file with a text editor.
(1) Find the <Text> </ Text> part of the code:
<Text style = {styles.welcome}>
      Welcome to React Native!
</ Text>
Amend to read as follows:
<Text style = {styles.welcome}>
      Getting started with React-Native
</ Text>
(2) Find the code
welcome: {
    fontSize: 20,
    textAlign: ‘center’,
    margin: 10,
},
Amend to read as follows:
welcome: {
    fontSize: 20,
    textAlign: ‘center’,
    margin: 10,
    color: ‘red’,
},
(3) If you have experience in web development, you will definitely realize what you have modified. Click Simulator, cmd + R, refresh the view, you will see the following:
4. Congratulations, the Long March has taken 1,000 steps
If you have experience in web development, you must find it easy to understand and learn React-Native, so this small step is also a big step
(1000 steps). A journey of a thousand miles begins at this step.

Author https://github.com/vczero/react-native-lession

React-Native Getting Started Guide (1)-Environment Configuration & Hello World