React simple entry

Reactfunction

React	function
1	ReactIt is a JavaScript library for building user interfaces.
2	ReactIt is mainly used to build UI. Many people think React is V (view) in MVC.
3	React The internal project originated from Facebook, which is used to erect Instagram website and opened in May 2013.
4	React With high performance, code logic is very simple, and more and more people are paying attention to it and using it.

Characteristic

Characteristic	introduce
Declarative design	ReactUsing the declarative paradigm, you can easily describe applications.
High efficiency	ReactBy simulating DOM, the interaction with DOM can be maximally reduced.
flexible	ReactIt can be well matched with known libraries or frameworks.
JSX	JSX It is an extension of JavaScript syntax. React development does not necessarily use JSX, but we recommend using it.
assembly	Constructing components through React makes the code more reusable and can be well used in the development of large projects.
Unidirectional response data flow	React Implementing a one-way response data flow reduces duplication of code, which is why it is simpler than traditional data binding.

Library introduced

<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- --> is not recommended in the production environment.<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>

react.min.js --- ReactCore libraryReact-dom.min.js -- provide DOM related functions.Babel. min. JS - Babel can convert ES6 code to ES5 code so that we can not support ES6 at presentReact code is executed on the browser. Babel is embedded with support for JSX. By using Babel and the babel-sublime package together, you can take source syntax rendering to a whole new level.notesMeaning:If we need to use JSX, then<script> The type attribute of the tag needs to be set to text/babel.

jsx(React Use JSX instead of regular JavaScript)

Advantage:1. JSX Execution is faster because it is optimized after compiling it into JavaScript code.2. It is type safe, and errors can be found in the compilation process.3. Using JSX to write templates is simpler and faster.

Virtual Dom

1.save resources2.Stored in memory3.The DOM diff algorithm will be used.4.High efficiency

Size memory

register(Small) > memory > hard disk.

Scaffolding

Global installation:NPMinstall –-global create- react- app
Initialize the project:create- react- app myReactApp
Startup service:CD myReactAppNPMstart

react

Core library

react-dom

High function clientDo DOM, in browserRender Page

react-native

There is a web- on it.view

native web

native You can open a browser.h5 app

manifest.json

Temporary H5 pages

ReactDOM.render(x,y) x: Mount component Y: mount location

webpack

historyApiFallback redirect