1.安装 react react-dom
npm install --save react react-dom
2.安装babel
浏览器是不能直接加载jsx，es6，es7的一些语法,这个时候就需要借助babel 来对js/jsx做转换
npm install --save babel-core babel-loader babel-preset-env babel-preset-react
babel-preset-env(转换es6 es7 es8)
babel-preset-react (jsx转换)
3.babel配置
1.在项目根目录下面添加 .babelrc文件
2.添加如下代码
{
"presets":[
"react",
"env"
]
}
3.在webpack.config.js中添加
module:{
rules:[
{
test:/\.(js|jsx)$/,
exclude:/node_modules/,
use :{
loader: 'babel-loader'
}
}
]
},
3.使用source-map 调试
在webpack.config.js中添加
devtool:'source-map',
4.开始编写react代码
1.在src下面添加component目录；
2.在component目录下面创建App.js
import React from 'react';
class App extends React.Component{
render(){
return (
<div>
<h1>hello react!</h1>
</div>
)
}
}
export default App;
3.修改index.js 如下
import React from 'react';
import ReactDom from 'react-dom';
import App from './component/App.js';
ReactDom.render(
<App />,
document.getElementById('root')
)；
4.修改index.html，在body中添加<div id="root"></div>
5. npm run server 在浏览器端访问localhost:8100就能看到hello react
注：如何在npm run server之后自动让弹出页面呢？
很简单，修改package.json下面的scripts，在webpack-dev-server 后面添加--open
"scripts": {
"server": "webpack-dev-server --open"
}
一个最最最简单的react的架子已经搭好了，但是里面还有很多地方空缺，比如css的loader，图片的资源路径问题等等，后面继续添加。
