React Series-Preface

"Novices of Xiaoheshan", provide front-end developers with technical information and a series of basic articles. For a better user experience, please move to our official website novices (160cc0c3bcac22 https://xhs-rookies.com/) to learn and get the latest articles in time.

What is React

We from React official website can see the official for React defined React is used to build a user interface JavaScript library. Essentially, React is a JavaScript . Its function is to provide programmers with a model in which seed components cannot directly affect the outer components (" data flows down "). When the data changes, it effectively updates HTML single page application clean separation between components.

What did React do

In the front-end interface, three technologies are inevitably used:

• HTML : Build page structure
• CSS : Define the page style
• JavaScript : Process events and data dynamically

Of course, we can directly use these three technologies to build front-end pages, and there will be no big problems in use, but many problems may occur during the development process:

• You need to frequently consider browser compatibility issues, and write a bunch of repetitive codes in order to solve the compatibility issues.
• You need to manually modify the DOM object. When the situation is complicated, some strange and difficult to find problems may occur.
• ……

In response to the above problems, front-end developers have been looking for a good solution to help them develop better pages.

In the past, JQuery was used extensively to deal with the above problems, but with the development of time, people found that there are more convenient frameworks to solve the problem of DOM operation. This is the three most used front-end frameworks- Angular , React , Vue .

They have a unified concept-declarative programming and componentized development, the following is React example of 060cc0c3bcadf5

1. Divide functional modules one by one in the way of components
2. The assembly JSX described UI way to state state in the storage component to
3. When the state of the application changes, setState . When the state changes, UI will be updated automatically

Have you found it? We no longer need to manually manipulate the DOM object, which separates us from UI processing. From then on, we only need to concentrate on processing the data, and UI will automatically update according to the data!

In addition, React also has this more exciting feature-multi-platform adaptation

• Initially React only used on the Web end
• 2015, FaceBook launched React Native , use React Native programmers can use React code to develop mobile end of the program.
• Nowadays, you can use uni-app , Taro for more diversified development. You can write React code only once and use it on Web , mobile terminals, applets, etc., to achieve real cross-terminal development.

Why should we learn React

Let us look at two pictures.

<center style={{marginBottom:'20px'}}> (The picture shows the most well-known framework in 2020, you can see that React's popularity ranks second)</center>

<center style={{marginBottom:'20px'}}>(The picture shows the framework that programmers most want to learn in 2020, and React is at the top of the list)</center>

As a front-end engineer, we can clearly see the future trend of choice, in the front area of the country React has become a well-deserved first frame (because Angular to TypeScript there are certain requirements, domestic use Angular fewer companies)

How do we learn React

React official Chinese document is the React learn, but for beginners, you may not know how to find the knowledge you need in the official document, so we are based on the React document, combined with the React learning route. The following React tutorial aims to guide beginners to learn React Come on! Sao Nian, let us start learning React