创建一个项目名：
全局安装webpack
cnpm install -g webpack-dev-server
1.cnpm init 初始化
2.cnpm i webpack webpack-dev-server -D
3.cnpm install babel-loader babel-core babel-preset-env -D
之后在项目下创建应有文件：
static文件夹下的index.html，
<div id="toor"></div>
src文件夹，
static静态文件夹，
dist输出文件夹，
webpack.config.js配置文件：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.jsx',
output: {
path: __dirname+'/dist',
filename: 'js/app.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './static/index.html',
filename: 'index.html'
})
],
module: {
loaders: [
{test: /.(js|jsx)$/, loader: 'babel-loader', exclude: /node_modules/}
]
}
}
创建.babelrc文件
{
"presets":[
"env"
]
}
package.json文件：
{
"name": "react-pro",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack-dev-server --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.2"
},
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2"
}
}
main.js文件
import React from 'react'
import ReactDOM from 'react-dom'
//引入组件，组件首字母必须大写
// 在react中，区分普通标签和组件标签，根据首字母大写进行判断
import App from './App.jsx'
/*
// 渲染dom结构
// 参数1：将要渲染在dom上的内容
// 参数2：渲染在哪个dom中
// 参数3：渲染完成的回调（可选）
ReactDOM.render(
//jsx语法
<p>test</p>,
document.querySelector('#root'),
function(){
console.log('渲染完成');
}
)
*/
let message = 'hello react';
let title = 'test';
ReactDOM.render(
//jsx语法
// <p>test</p>,
// <h1 title={title}>{message}</h1>,
<App/>,
document.querySelector('#root'),
function(){
console.log('渲染完成');
}
)
React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。