The original tutorial--reactjs component Getting Started tutorial

Before learning react, I hope you have the following preparation:

Installation of React
ECMAScript 6 Basics

This article does not explain the installation steps of react, if you need to know the official website (https://reactjs.org/), where the explanation is very clear, also very simple.
As for ECMAScript 6, we can go to Ruan Feng Teacher's official website (http://www.ruanyifeng.com) study.

This article mainly solves a few key points, these points also may be the people in the study react the very confusing place.

Point one:
What is a component?

Point two:
How do I write a component?

Key three:
How are components used together?

Before we get to the point, let's take a look at what the React post-installation directory is and what directory it should be developed under.

See:

It can be said that this is the standard directory structure of react, open the SRC directory:

See:

This directory is where you will develop the components.

We have made clear the React directory structure, we formally explain the main points.

What is a component?

Remember: The file is a component .

For example, in the SRC directory of app.js, this app.js is the component. You can also build a component yourself, such as nav.js and so on.

This is the core idea of react. The composition of a Web site can be seen as a collection of many components.

For example, the homepage of a website is divided into head, main content area, bottom. Then these three large areas can be used as components. The content blocks in each region can then be used as components, and so on, can be divided into smaller components. We can look at a picture:

The image point component is like many functional functions defined, and by configuration parameters, the functions are called together, and a complete Web site can be implemented in the end.
The benefit of the component is that it can be reused, both to reduce the amount of development, and to make the code clean, clear, logical, and easy to read.

The component is so beautiful, how to write it?

The second question is how to write a component.
Before writing a component, I usually split the component into two, non-UI components and UI components.

See Example:

// App.js  'react './app.css '; class App extends Component {render () {return  (     <div classname= "App" >      default App;

This is a UI component. is a very simple component. Even if you do not know Es6 's classmates, you can understand the second.
As a result, we can standardize the component writing structure of the UI as follows:

// Myapp.js  ' react '; class MyApp extends Component {    // other function code     render () {         return  (        //UI code         );     default MYAPP;

In turn, we can standardize the composition of non-UI components, as follows:

// Myfn.js  = {    http (params) {    // code     }    showmessage (msg) {     // Code     }    ...     // other Code  default myfn;

In contrast, it is found that the two are different:

The UI component requires a class statement
The UI component requires the Render function
Conversely, it is not necessary.

Same point:
REACT specifies that the first letter of the component name (that is, the file name) must be capitalized.
For code management and reading, it's a good idea to unify the name of the component and the bindings that are exported inside the component. In Myfn.js, for example, the Myfn.js file name is consistent with the name of the Myfn object to which it is exported. We must develop such a writing habit.

Component notation we will, so how do we make the components work together?
With the above example, if I want to use MYFN in Myapp.js, I can use this:

//Myapp.jsimport React, {Component} from' React '; import Myfn from'./myfn ';//Note that the myfn.js extension here can saveclass MyApp extends Component {//Other function Codesshowmsg (msg) {myfn.showmessage (msg);//pay attention to this sentence} render () {//this.showmsg (' Hello world! ') or        //myfn.showmessage (' Hello world! ')        return (            //UI Code        ); }}exportdefaultMYAPP;

Isn't it simple?
Remember the bottom line: Non-UI components are typically imported into UI components, and non-UI components typically provide logical processing for UI component rendering.

The original tutorial--reactjs component Getting Started tutorial