React quickly

Leave a Comment / / 游魂博客

Original link: https://www.iyouhun.com/post-221.html

Introduction to React

Understand the historical background and basic concepts of react

React originated as an internal project at Facebook. Because the company was not satisfied with all the JavaScript MVC frameworks on the market, it decided to write one of its own to build the Instagram website. After making it, I found that this set of things is very useful, and it was open sourced in May 2013.

React is one of the most popular front-end frameworks. Comparing the downloads of Vue and Angular in the past two years, as well as the proportion of web frameworks used by developers in 2021, we can see that React is one of the must-have skills for front-end engineers, and many big manufacturers are using it now.

QQ20220607-134043<a href=

React is a JavaScript library for building user interfaces. It can be understood that it is only responsible for the rendering of the view layer in MVC, and does not directly provide data model and controller functions. react-router implements routing, redux implements state management, and you can use them to build a complete application.

React Chinese site: React official Chinese documentation – JavaScript library for building user interfaces

Summary: React is open sourced by Facebook, and now it is a must-have for the most popular front-end framework manufacturers. React itself is a library for building UI. If you need to develop a complete web application, you need to cooperate with react-router, redux, … and so on.

React Features

Understand the three core features of react

(1) Declarative

React makes creating interactive UIs a breeze. Design concise views for each state of your application, and React can efficiently update and render the appropriate components when data changes.

Writing your UI declaratively makes your code more reliable and easier to debug.

image-20220607141033348

image-20220607141042978

(2) Componentization

Create components with their own state, and then use these components to form a more complex UI. Component logic is written in JavaScript instead of templates, so you can easily pass data around your application and keep state separate from the DOM.

1633579096420.db143907

(3) One-time learning, cross-platform writing

No matter what technology stack you are using now, develop new features by introducing React without rewriting existing code. React can also use Node for server rendering, or React Native for native mobile app development.

1633578566552.7b549f39

Summary: The declarative UI is clearer and faster, the componentized development is more flexible, and it can support SSR, SPA, NativeApp, VR multi-platform.

React Scaffolding

Master creating projects with create-react-app scaffolding

How to create a project:

  • Install the scaffolding globally and then use the command to create the project
  • Create a project using npx remote call scaffolding

method one

  • Install globally
 # 全局安装脚手架npm i create-react-app -g
  • Create project
 # project-name 项目名称create-react-app project-name

Method 2

  • npx installation, npm5.2+ support
 # project-name 项目名称npx create-react-app project-name

Recommendation: Use method 2 to create a project with the latest scaffolding used each time, and use npm start to start the project after creation.

Basic use of React

In the create-react-app scaffolding creation project, master the basic steps of using react

Steps for usage:

  • Import react and react-dom packages
  • Use react to create react elements (virtual DOM)
  • Render react elements with react-dom

Landing code: delete files in src, create src/index.js

  • guide package
 // 负责创建react元素import React from 'react'; // 负责把react元素渲染到页面import ReactDom from 'react-dom';
  • create react element
 // 参数1：标签名称// 参数2：属性集合特殊class==>className for==>htmlFor // 参数3：标签内容const element = React.createElement('h1', { id: 'el' }, 'Hello React');
  • render react element
 // #root在public/index.html上ReactDom.render(element, document.getElementById('root'));

To summarize: use react to create elements, use react-dom to render elements.

React creating elements exercise

Master creating nested elements with react

Use react to create the following elements

 <div class="list"> <h1>水果</h1> <ul> <li>苹果</li> <li>橘子</li> </ul> </div>

React code

 import React from 'react'; import ReactDOM from 'react-dom'; const element = React.createElement('div', { className: 'list' }, [ React.createElement('h1', null, '水果'), React.createElement('ul', null, [ React.createElement('li', null, '苹果'), React.createElement('li', null, '橘子'), ]), ]); ReactDOM.render(element, document.getElementById('root'));

Summary: Using createElement to create elements is very troublesome, poorly readable, and inelegant. It is recommended to use JSX to declare UI in development.

This article is reprinted from: https://www.iyouhun.com/post-221.html
This site is for inclusion only, and the copyright belongs to the original author.

Leave a Comment