将静态页面转化为react组件（傻瓜式讲解）

前置工作：

1.看着静态页面分组件（看能分成几个小组件）。

2.不管样式，先看结构。将<div>.....</div>里的东西都粘到父组件app.jsx中。

*注：【最外层那个div看看有没有css，没有的话不用粘贴，减少代码冗余】

3.把class替换成className;

   把eg. style='width: 100px' 替换成 style={{width: '100px'}}

4.新建App.css,将css粘进去。

5.在App.css中引入css   eg：import './App.css'

6.如果有成型的css类似Bootstrap,在public新建css文件夹，直接将Bootstrap.css文件丢进去。

7.在public中的index.html引入Bootstrap。

eg. <link rel="stylesheet" href="./css/bootstrap.css>

拆组件：

1.在src中新建拆分的组件文件夹 eg. Header、Search、List、Item、Footer......

2.将App.jsx中的组件拆分后分别放入不同的index.html中。

3.在App.jsx中用<组件文件夹名/>的方式替代原本粘走的那部分代码。

4.在App.jsx中引入该组件文件夹。eg.import List from './components/List'

拆样式：

1.将对应的css拆分到相应的index.css中。

2.别忘了在对应的jsx中引入该css。