用了脚手架之后感觉一切都变得轻松了起来，首先是在全局安装npm i -g create-react-app
随后使用其创建一个新项目运行create-react-app XXX
随后运行npm start就可以运行了，注意一定要在刚刚创建的项目的目录下。
打开这个新建的脚手架发现其实和之前基础搭建的东西差不都，比如index.html就是那个唯一的html文件，其中最为引人注目的就是<div id="root"></div>这就是我们这个页面的容器了，一定要注意这个地方是id，刚开始习惯性的来了一个className，结果就是各种报错。index.js就是我们要写ReactDOM.render()的文件了，App开头的js和css可以理解为整个页面就是一个组件，我们随后写的组件就是放在其中的各种子组件。有没有好奇为什么我们没有引入index.js在index.html中，document也可以找到呢？这个是react脚手架底层配置文件写好的，所以如果乱写名字的话就跑不起来了。
上面是脚手架的一些介绍，这里主要是说一下css的模块化引入，我们是分成一个个的组件进行开发，那么最后都会合到App中，如果有相同的css类名是会被覆盖的，所以解决的办法有两种，一种是类似于less那种进行嵌套，另一种就是使用模块化的导入，比如这里我们有两个组件。
注意一下要进行模块化导入的话要将css文件的名字命名为这种，换了之后就不会起作用的。随后我们在某一个具体的文件中引入的时候：
import React, { Component } from "react";
import helloCSS from "./index.module.css";
export default class Hello extends Component {
render() {
return <h1 className={helloCSS.title}>Hello,world</h1>;
}
}
使用这种写法可以避免被覆盖
