React installation
React can be downloaded and used directly, and the download package also provides many learning examples.
This tutorial uses React version 0.14.7. You can download the latest version from the official website http://facebook.github.io/react/.
You can also directly use the React CDN library of php Chinese website, the address is as follows:
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script> <script src="http://static.php.cn/assets/react/browser.min.js"></script>
Usage example
The following example outputs Hello, world!
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.php.cn/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.php.cn/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Example analysis:
In the example we introduced three libraries: react.min.js, react-dom.min.js and browser.min.js:
react.min.js - The core library of React
react-dom.min.js - Provides functions related to DOM
browser.min.js - Used to convert JSX syntax to JavaScript syntax
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
); The above code inserts an h1 title into the id="example" node.
Note:
If we need to use JSX, the type attribute of the <script> tag needs to be set to text/babel.
Using React through npm
If your system does not support Node.js and NPM, you can refer to our Node.js tutorial.
We recommend using a CommonJS module system with React, such as browserify or webpack. This tutorial uses webpack.
First step, install the global package
$ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g
Second step, create the root directory
Create a root directory with the directory name: reactApp, and then use npm init to initialize it. Generate package.json file:
$ mkdir reactApp
$ cd reactApp/
$ npm init
name: (reactApp) php-react-test
version: (1.0.0)
description: php中文网 react 测试
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/tianqixin/www/reactApp/package.json:
{
"name": "php-react-test",
"version": "1.0.0",
"description": "php中文网 react 测试",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)The third step, add dependent packages and plug-ins
Because we want to use React, we need to install it first, the --save command is used to add the package to the package.json file.
$ npm install react --save $ npm install react-dom --save
At the same time we also need to install some babel plug-ins
$ npm install babel-core $ npm install babel-loader $ npm install babel-preset-react $ npm install babel-preset-es2015
The fourth step is to create files
Next we create some necessary files:
$ touch index.html $ touch App.jsx $ touch main.js $ touch webpack.config.js
The fifth step, set up the compiler, server, loader
Open the webpack.config.js file and add the following code:
var config = {
entry: './main.js',
output: {
path:'./',
filename: 'index.js',
},
devServer: {
inline: true,
port: 7777
},
module: {
loaders: [ {
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
}
module.exports = config;entry: Specify the packaged entry file main.js.
output: Configure the packaging result, path defines the output folder, and filename defines the name of the packaging result file.
devServer: Set the server port number to 7777. You can set the port yourself.
module: defines the processing logic for the module. Here you can use loaders to define a series of loaders, as well as some regular rules. When the file to be loaded matches the test's regular pattern, the subsequent loader will be called to process the file. This is why webpack is powerful.
Now open the package.json file and find the "test" "echo \"Error: no in "scripts" test specified\" && exit 1" Replace with the following code:
"start": "webpack-dev-server --hot"
The content of the replaced package.json file is as follows:
$ cat package.json
{
"name": "php-react-test",
"version": "1.0.0",
"description": "php中文网 react 测试",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7"
}
}Now we can use npm start command to start the service. --hot The command will reload after the file changes, so that we don't need to refresh the browser after the code is modified to see the changes.
Step 6, index.html
Set div id = "app" as the root element of our application, and introduce the index.js script file.
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>React App - php中文网(php.cn)</title> </head> <body> <div id = "app"></div> <script src = "index.js"></script> </body> </html>
Step 7, App.jsx and main.js
This is the first react component. We will introduce React components in detail in the following chapters. This component will output Hello World!!!.
App.jsx file code
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!<br />
欢迎来到php中文网学习！！！
</div>
);
}
}
export default App;We need to introduce the component and render it on the root element App so that we can see it on the browser.
main.js file code
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'))Note:
If you want the component to be used in any application, you need to create it Then use export to export it, and use import to import it in the file using the component.
Step 8, run the service
After completing the above configuration, we can run the service:
$ npm start
Access through the browser http:/ /localhost:7777/, the output result is as follows:
Complete example download
The download address of each file code of the above test example: http ://static.php.cn/download/reactApp.zip.
