19.0 Choose Reactjs
- Reactjs is the libraries for develop websites for client-side.
- It is not to replace the classic way using HTML.
- There are two main reason to choose it
- big website with high traffic,load
- highly dynamic behavior is needed.
- Specific development style is there.
- You can also render html elements with JSX code
In a reactjs component, there is a render method.
In this method, you can return a another html element or component in jsx.
- Three libraries are used in Reactjs - ReactDOM, React, Babel.
If the CDN libraries are used, code like ES6 will converted to ES5 when the page is loaded.
For production, preprocess with Babel is required. You can handle migration later.
- ReactDOM.render is a class-level method.
the 1st argument is a HTML tag, div
the 2nd argument is the location for the HTML element.
- Reactjs is fast.
There is a react virtual DOM.
It is a JS object.
It has the intelligences to update DOM when needed.
19.2 Component and its Look
- React.create is a class-level method.
It creates a Reactjs component, syntax like OO class, implemented in js fuction.
This is the code before ES6.
If you code in ES6 in OO style. Still, the code will be transpiled into ES5.
ES6 code is more terse.
the argument is a code block, in which method render is invoked.
- In the first argument of ReactDOM.render, it look like a HTML tag. It is an instance.
MyComponent is a class.
- In the return statement of component's render method,
the html element's css attribute is called className, not class.
- You'll a blue square, with text "My Component".
- add one line of code inside render code body.
This is to use React object.
- If you use ES6 to create a component, the type is still function.
- Using these two ways to create a component. You can have state data.
In short, state data change, a rendering happens.
- Because of jsx, a component has ui. That is why the type can be function.
19.2 Properties created when passing parameters to a class constructor
----------- code as below: ----------------