1.安裝 react react-dom
npm install --save react react-dom
2.安裝babel
瀏覽器是不能直接加載jsx科侈，es6，es7的一些語(yǔ)法,這個(gè)時(shí)候就需要借助babel 來(lái)對(duì)js/jsx做轉(zhuǎn)換
npm install --save babel-core babel-loader babel-preset-env babel-preset-react
babel-preset-env(轉(zhuǎn)換es6 es7 es8)
babel-preset-react (jsx轉(zhuǎn)換)
3.babel配置
1.在項(xiàng)目根目錄下面添加 .babelrc文件
2.添加如下代碼
{
"presets":[
"react",
"env"
]
}
3.在webpack.config.js中添加
module:{
rules:[
{
test:/\.(js|jsx)$/,
exclude:/node_modules/,
use :{
loader: 'babel-loader'
}
}
]
},
3.使用source-map 調(diào)試
在webpack.config.js中添加
devtool:'source-map',
4.開(kāi)始編寫react代碼
1.在src下面添加component目錄赫编；
2.在component目錄下面創(chuàng)建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 在瀏覽器端訪問(wèn)localhost:8100就能看到hello react
注：如何在npm run server之后自動(dòng)讓彈出頁(yè)面呢捌省？
很簡(jiǎn)單史煎，修改package.json下面的scripts础爬，在webpack-dev-server 后面添加--open
"scripts": {
"server": "webpack-dev-server --open"
}
一個(gè)最最最簡(jiǎn)單的react的架子已經(jīng)搭好了阐枣，但是里面還有很多地方空缺马靠，比如css的loader，圖片的資源路徑問(wèn)題等等蔼两，后面繼續(xù)添加甩鳄。
