what is react?
react is a JavaScript library for building user interfaces
React is mainly used to build ui, many people think that react is the v in the mvc framework
use of react
Using react requires the introduction of three libraries: react.min.js, react-dom.min.js and babel.min.js
react.min.js - The core library for react
react-dom.min.js - Provides DOM related functionality
babel.min.js - babel can convert es6 code to es5 code, so that we can execute react code on browsers that do not currently support es6.
The following is to install react through npm
npm install -g cnpm --registry=https://registry.npm.taobao.org npm config set registry https://registry.npm.taobao.org cnpm install [name] /
Quickly build a react development environment with create-react-app
create-react-app is from Facebook. With this command, we can quickly build a react development environment without configuration.
create-react-app comes from creating a project based on webpack
Execute the following command to create the project:
cnpm install -g create-react-app create-react-app my-app cd my -app / npm start
After executing the above command, you can use http://localhost:3000 to open a web page on the browser, and a my-app file will be automatically created in the project folder.
react jsx
jsx is JavaScript xml, which is a hot language in js. When compiling, jsx must be compiled into js first, and then run.
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
react component
<body> <div id="example"></div> <script type="text/babel"> var HelloMessage = React.createClass({ render: function() { return <h1>Hello World！</h1>; } }); ReactDOM.render( <HelloMessage />, document.getElementById('example') ); </script> </body>
The above code wraps a component called HelloMessage
React.createClass method is used to generate a component
<HelloMessage /> Instances the component class and outputs the message.
Note: Native HTML element names start with lowercase letters, while custom React class names start with uppercase letters. For example, HelloMessage cannot be written as helloMessage. In addition, it should be noted that the component class can only contain one top-level label, otherwise an error will be reported.
Parameters can be passed to components using this.props
<body> <div id="example"></div> <script type="text/babel"> var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name="R" />, document.getElementById('example') ); </script> </body>
The difference between state and props is that props are immutable, while state can be changed according to the user.
component life cycle
The life cycle of a component is divided into three states
Mounting - Real dom inserted
Updating - is being re-rendered
Unmounting - removed the real dom