## 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`看效果。