Brief introduction to react

Time:2020-7-10

Introduction to reactjs

  • React originated from an internal project of Facebook. Because the company was not satisfied with all the JavaScript MVC frameworks on the market, it decided to write its own set to set up instagram’s website. After making it, I found that it was very easy to use,It was opened in May 2013
  • Because the design idea of react is very unique, it is a revolutionary innovation with outstanding performance, but the code logic is very simple. Therefore, more and more people begin to pay attention to and use it, and think that it may be the mainstream tool of web development in the future.
  • library
  • Framework

Front end three mainstream frameworks

  • Angular.js : the earliest front-end framework has a steep learning curve, and NG1 is more troublesome to learn. NG2 has carried out a series of reforms and started to enable componentization. In ng, it also supports the use of TS (typescript) for programming;
  • Vue.js : the most popular front-end framework. It is developed by Chinese people. For me and us, the documents should be friendly;
  • React.js : the most popular door frame because of its excellent design;
  • windowsPhone 7 7.5 8 10

React and vue.js Comparison of

Componentization

  1. What is modularity: fromcodeTo analyze the problem, the business logic of our programming is divided into different modules for developmentFacilitate code reuse
  2. What is componentization: fromUIIn order to analyze the problem, we can divide a page into some unrelated small components. With the development of our project, we will have more and more components in our hands. Finally, if we want to implement a page, we may directly take the existing components for splicing, and we can quickly get a complete pageFacilitate the reuse of UI elementsA component is a collection of elements
  3. The benefits of componentization:
  4. How Vue realizes componentization: the. Vue component template file. The browser does not recognize such. Vue files. Therefore, it will pre compile. Vue into real components before running;
  • Template: UI structure
  • Script: business logic and data
  • Style: the style of the UI
  1. How to realize componentization in react: when implementing componentization in react, there is no template file like. Vue at all. Instead, you can directly use js code to create any component you want;
  • The components in react are defined directly in JS files;
  • The components of react do not divide a component into three parts (structure, style and business logic), but use js to implement a component; (that is, structure, style and business logic are written together in JS)

Development team

  • React is maintained and updated by the official front-end team of Facebook; therefore, the maintenance and development team of react has strong technical strength;
  • Vue: the first edition is mainly maintained by the author you Yuxi. When Vue is updated to version 2. X, a small team is also set up to carry out relevant maintenance and development;

Community

  • In terms of community, because react was born earlier, the community is relatively powerful. Some common problems, pits, optimal solutions, documents and blogs can be easily found in the community;
  • Vue was born in the last two years, so its community is smaller than react. Therefore, there may be some pits that no one has stepped on;

Mobile app development experience

  • Vue, combined with weex technology, provides the experience of migrating to mobile app development (weex is only a small toy, and there is no big successful case at present.)
  • React, combined with reactnative, also provides the development experience of seamless migration to mobile app (RN is the most used and the most popular one);

Why learn react

  1. The design is excellent and is based on component, which is convenient for the reuse of UI code;
  2. The strength of the development team is strong, and there is no need to worry about the situation of the short change;
  3. The community is strong, many problems can find corresponding solutions;
  4. It provides the development experience of seamless transfer to reactionnative, which expands our technical capability and enhances our core competitiveness