react introduction

https://react.docschina.org/

JavaScript library for building user interfaces
React is mainly used to build UI, V (view) in MVC
Internal project originated from Fackbook (open source in May 2013)
React has high performance and simple code logic

React features

Declarative design
react uses a declarative paradigm to easily describe applications
Efficient
Through the simulation of the DOM, the interaction with the DOM is minimized — virtual DOM
Flexible,
can be well integrated with known libraries and third-party frameworks
Components
Improve code reusability 5. One-way response data flow

webpack build react application

cnpm i react react-dom -S

1. Experience

src/index.js

2. Code description


// react相关的基础库，必须引入，特别是写到组件的时候
import React from 'react'
// ReactDOM 以前是包含在React对象内部，后来分离了出来
// 给DOM节点渲染数据，渲染视图使用 ---- React Dom操作
import ReactDOM from 'react-dom'
// ReactDOM.render() 给某个DOM节点渲染react的视图
// react视图： react元素 / react组件
// React视图 记住 只能有一个顶级标签
// React 语法 符合 jsx 语法 - javascriptxml 语法 - 类xml语言 - 标签必须拥有顶级标签
// ReactDOM.render(视图, DOM节点)
ReactDOM.render(<h1>hello react</h1>, document.getElementById('app'))

3.react element

The element is the smallest unit that constitutes the react application, it is used to describe the content output on the screen

import React from 'react'
import ReactDOM from 'react-dom'
// react元素
// 元素是构成react应用的最小单位，它用于描述屏幕上输出的内容
const element = <h1>hello react 元素</h1>
/**
* 元素
* 与浏览器的DOM元素不同
* react中的元素事实上是普通js对象
*
* ReactDOM可以确保浏览器DOM的数据内容于React元素保持一致
*/
ReactDOM.render(element, document.getElementById('app'))

React elements are immutable objects. Once created, you cannot change its child elements or attributes. An element is like a single frame of a movie: it represents the UI at a specific moment.