This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

1. Introduction

Recently, due to business needs, I began to learn the knowledge of the React framework of Web front-end. Previously, I had been engaged in the research and development of Android, which was basically useless for the Web front-end. Therefore, I learned the React framework of specific business needs with the help of the Internet and resources, and practiced it in my own project. Finally, I plan to summarize my learning process into a series of articles to share with you, for the same beginners to learn and communicate ~ (although sorted out, but there are mistakes and omissions, you can point out or discuss in the comments section).

In addition, this series of articles is aimed at Web front-end and React newcomers. Many concepts are presented in straightforward descriptions and source code, but there is not much advanced content to ensure a smooth transition and a good understanding of the React system and development process.

2. Composition of series of articles

The entire tutorial includes the following:

Chapter one: Understand React framework as a whole, including its historical background, introduction, advantages, and comparison with other frameworks

How to install the React development environment? How to install the React development environment

React componentization and JSX: Introduce the concepts of React components and the syntax of JSX

Chapter 4 Concepts of Props and State in React describes the roles of props and state in React

Chapter 5 Reactive Design philosophy of React: Introduce reactive design and programming ideas used in React, and introduce the process of event binding

React component split and component interaction: How to split components in React and how to interact with parent and child components

Chapter 7 The React Lifecycle: The React lifecycle stages and how they are used

What do we learn and think about through this series of notes

This article will introduce you to the first chapter of React

3. The introduction of the React

A direct quote from the official website:

A JavaScript library for building user interfaces

A Javascript (JS) library for building user interfaces.

First, React is a third party JS library, which is basically the same as any other JS library. You can use it by importing javascript files from the React library via script tags. .

Second: to build the user interface, meaning that the purpose of this library is mainly responsible for handling the user interface – to help render HTML views.

3.1 background

React was developed by Facebook engineer Jordan Walke. Originally called FaxJS, React was inspired by XHP, an HTML component library for PHP. It also decided to write its own JavaScript MVC framework for The Instagram site because it didn’t seem to be satisfied with any JavaScript MVC framework currently on the market. After it was built, it was found to be very useful and opened source in May 2013.

Since React framework has a great design idea, simple code logic, and easy to learn, it is also an open source project, attracting more and more people. What started out as a really simple interface library has now become a great Web application solution with the help of other JS libraries around React or that enable React.

Later, React Native (RN) was derived based on React, which plans to use the development mode of Web to unify the development of mobile terminal Native applications. — Learning well can also make mobile terminal (my line of work), is not very exciting ~

3.2 features

  • The idea of componentization is to create components in various states that form a complex UI, rather than an HTML that contains all interface descriptions.
  • Built-in JSX syntax: Use unique JSX syntax (described below) to create components, and use functional programming ideas for UI updates (functional programming ideas are a style, if you are interested)
  • Efficient update of view: Selectively update view based on internal virtual DOM and Diff algorithm
  • One-way data flow: The child component itself does not change the data it receives, but only listens for changes and rerenders the data with the new values passed in

3.3 advantage

  • Support team is reliable, update is stable, deal with issues in time (it is very important to choose third-party framework)
  • Mature technology, relevant third-party library complete, ecological integrity
  • Easy to use, performance is better
  • Component development, in line with the trend of Web development
  • After learning RN, I can also learn TO develop mobile App and use Node for server rendering
  • React is used as a basic framework for many major websites of large companies, such as Netflix and Airbnb, without having to worry about supporting large projects

4. Comparison with other third-party frameworks

This part should be reviewed after the introduction of React, but in order to give you an overall impression at the beginning and facilitate the selection of framework for some students, I put it in the first chapter.

4.1 the React vs JQuery

Although I am a newcomer to Web front-end development, I am well aware of JQuery’s role in Web front-end development. However, using React should be abandoned for the time being, especially since React operates on the virtual DOM and JQuery is still a traditional Web DOM. So there’s a trade-off… I hope you don’t throw yourself into a pit ~

However, a lot of DOM manipulation and control logic in JQuery is worth our in-depth source code to learn, to understand and consolidate many basic skills of Web development. JQuery is great, but times move on.

4.2 the React vs presents

Angular is one of the three most popular frameworks on the Web. It differs from React in the following ways:

Libraries and Frameworks: Remember the Introduction of React. React itself should be called a library, not a framework, and Angular is the framework. React as a solution you need flexibility to use with other libraries such as Redux, and Angular itself provides everything you need to build a large project — flexibility versus robustness

Facebook vs. Google: A battle of dads, one Facebook to run and improve, one Google to run, both based on MIT certificates of open source — Big guy vs. big guy

React is based on JSX for component and page development. JSX combines page description and function logic. JS files can also use tag language. Angular also has its own template syntax that needs to be learned. Don’t think you can do it all with JS syntax (but it’s not that hard to get started). Angular also enforces Typescript, while React doesn’t (though it’s still recommended) — each has its own features to learn

React is a one-way data binding. If you change the content of the data model, the UI will change, but not the other way around. Angular is bidirectional, simplifying the data flow and code workload, but mishandling can leave the data model in an unknown state (which can be avoided by following some development guidelines) — one-way vs. bidirectional

Based on the above points and some information on the Internet, my personal suggestion is:

  • If your project is not a back-end management system, is user-centric, changes frequently, doesn’t want to be tied too tightly to the framework, and doesn’t believe in Google, then React is your choice.
  • If you are thinking about your employability after studying, you can choose React
  • If you want to get involved in mobile development later on, React is your option
  • If you want a stable and long-lasting set of frameworks and products, you can choose Angular
  • If you are a big man, can ~

4.3 the React vs Vue

Vue was founded in 2014 by former Google engineer Yu Yuxi. The latest version at the time of writing is 3.x. It is the youngest member of the javascript family, only five years old. Alibaba and Gitlab are benefiting from this framework. Vue is considered a combination of some successful javascript technology features.

I’ve used Angular a little bit before, but Vue really hasn’t, so I haven’t had any real experience, so here’s a post for you to see for yourself:

React VS Vue

4.4 summarize

In the end, all of these frameworks are sufficient for a medium to large Web project. The performance and community documentation are good, but the rest of the choice is up to your own programming style and focus.

For Web newbies like myself, I personally recommend getting started and choosing React or Vue when not required by the project:

  • No matter the relative documents and issues of Google or Baidu are still very complete, many pits can be avoided
  • The coverage rate of domestic projects is still the largest, no matter in employment or future docking projects or by a certain advantage
  • In the end, a framework is just a tool and a mind, and after a whole set of learning and thinking, learning other frameworks is relatively easy

5. Reference materials

The React website

Functional programming in the React world

React-WIKI

The React model