【react学习笔记】脚手架

https://www.bilibili.com/video/BV1wy4y1D7JT?p=49&spm_id_from=pageDriver

使用create-react-app创建react应用

1. 全局安装：npm install -g create-react-app
2. 切换到想创项目的目录，使用命令：create-react-app hello-react
3. 进入项目文件夹：cd hello-react
4. 启动项目：npm start 或者 yarn start

启动项目有可能遇到下面的报错：

解决：移除浏览器中关于react的扩展程序，重新下载安装新的版本

下载地址： https://www.crx4chrome.com/crx/3068/
下载完之后直接将crx文件拖到扩展程序中就安装好了

项目目录解析

组件编写：

命名规范：一般在src文件夹目录下新建一个components文件夹用于存放组件
引入组件时，.js/.jsx结尾的文件后缀可省略不写，若组件文件夹内使用index命名文件，index亦可省略不写。例如：import Hello from './components/Hello’默认引入的就是Hello文件夹下的index.jsx文件

vscode插件：

安装上面得插件后敲入rcc就会自动补全组件格式：
类名是根据文件名称填充的，更多的简写方式可以查看插件的详细介绍

组件样式重名冲突：

每个组件内都有对应的css样式文件，如果样式重名，例如多个组件中的css均有.title样式，最后都是集中引入到app.js文件中进行渲染，最后引入的会覆盖之前的样式，为解决这一问题，可以利用样式模块化的形式，将index.css文件更名为index.module.css，更名后的引入方式如下：

// 引入index.css
import './index.css'
// 引入index.module.css
// 可以用一个变量接收css文件
import hello from './index.module.css'

// 使用方法 hello.[类名]
export default class Hello extends Component {
    render() {
        return (
            <div className={hello.title}>Hello Kamen</div>
        )
    }
} 

不使用上面的方式也可以在每一个组件的css文件外再包一层（less的写法），例如：

.Hello {
	.title {
		color: pink;
	}
}