## react
1、安裝`react`。
`npm install --save react react-dom`
react已經把基礎代碼和操作dom的代碼分開了,所以安裝使用react必須安裝這兩個包。
2、修改 `src/index.js`使用`react`。
~~~
import React from 'react' // 為了能編寫JSX代碼
import ReactDOM from 'react-dom' // 為了使用render方法
ReactDOM.render(<div> Hello,React! </div>, document.getElementById('app))
~~~
3、執行打包命令 `webpack --config webpack.dev.config.js`
打開`index.html`可以看到效果(很簡單)。
4、下面來把`<div> Hello,React! </div>`放到組件里面,簡單的來看看什么叫組件化。
~~~
cd src && mkdir components
cd components
mkdir Hello
cd Hello
touch Hello.js
~~~
5、遵循React語法,寫一個Hello組件
~~~
import React, { Component } from 'react' // 如果不引入Component,就使用React.Component
/* 使用類定義組件 */
export default class Hello extends Component {
render() {
return (
<div>
Hello, React!
</div>
)
}
}
~~~
6、然后修改`src/index.js`,引入Hello組件。
~~~
/* src/index.js */
import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './components/Hello/Hello'
ReactDOM.render(<Hello />, document.getElementById('app))
~~~
在任意目錄都可以執行打包命令
7、執行打包命令 `webpack --config webpack.dev.config.js`
打開`index.html`看效果。