React 学习笔记（15）：react 脚手架

1，脚手架的作用

在前面的学习中，我们都是直接在 html 中引入 react 依赖包进行开发，这种方式很简单，上手也快，但是这种项目非常的简陋，开发效率低，很多目前前端生态中能够大幅提高开发效率的工具都没有用到。

完善的项目应该有 webpack、devServer、eslint、jsx 编译 等等工具的支持，一个工程化的项目能够大幅度提高开发效率和开发体验。

但是，如果让我们自己手动搭建一个完善的项目，成本会非常高，需要学习很多前置知识，而且搭建出来的项目还可能有很多问题。

因此，React 官方为我们提供一个脚手架工具，通过这个脚手架工具我们只需要几行简单的命令就能生成一个已经配置好的、完善的工程化项目，非常的简单快捷。

2，react 脚手架的使用

• 首先确保已经安装了 node.js
• npm install -g create-react-app，全局安装 react 脚手架
• 切换到想创建项目的目录
• create-react-app hello-react，创建 hello-react 项目
• 进入项目文件夹，cd hello-react
• 启动项目：npm run start

3，在脚手架项目中开发组件

在之前的学习中，写组件都是直接在 html 中写，现在到了脚手架项目阶段，来看看在脚手架项目中应该如何定义和使用组件。

组件定义的项目结构

组件应该都定义在 src/components 文件夹下，并且为每个组件定义对应的文件夹，这个文件夹下面的文件都是该组件所需的文件，例如组件的定义文件 index.jsx，组件的样式文件 index.css。

注意：上面的这些要求并不是硬性要求，即使代码不这样组织，也能正常运行。不过为了代码的规范、统一、易维护，最好都按照这样的标准组织代码。

组件定义文件jsx和样式文件css（以 Welcome 组件为例）

Welcome/index.jsx

import React,{Component} from 'react'
import './index.css'

export default class Welcome extends Component{
	render(){
		return <h2 className="title">Welcome</h2>
	}
}

组件可以被定义成类式组件和函数式组件，并且需要通过 export 将定义组件导出。

Welcome/index.css

.title{
	background-color: skyblue;
}

组件的样式文件和平时的写法一样。使用上，在 index.jsx 中通过 import './index.css' 导入即可。

组件的使用

组件通过 import componentName from '组件路径' 导入后，在 render() 函数中通过标签使用即可，代码如下：

import React,{Component} from 'react'
import Welcome from './components/Welcome'

//创建并暴露App组件
export default class App extends Component{
	render(){
		return (
			<div>
				<Welcome/>
			</div>
		)
	}
}

样式文件的模块化

如果我们在多个组件的样式文件中定义了相同的类名和 css 属性，当有多个组件都被使用时，就会出现样式被覆盖的情况。此时，我们可以通过 模块化样式文件 解决这个问题。

模块样式文件的名称应该被定义成 xxx.module.css，并且在导入时应该使用 import moduleName from '模块路径' 导入，样式的使用语法是 className={moduleName.className}，代码如下：

Hello/index.module.css

.title{
	background-color: orange;
}

Hello/index.jsx

import React,{Component} from 'react'
import hello from './index.module.css'

export default class Hello extends Component{
	render(){
		return <h2 className={hello.title}>Hello,React!</h2>
	}
}

4，接下来的学习

通过本节的学习，我们知道了 react 脚手架项目以及脚手架项目下的组件化开发。接下来通过两个小案例进一步深入和了解如何在 react 脚手架项目下进行开发。

项目地址：git@gitee.com:fei_fei27/react_learn_data.git。

小案例的目录：

• react_learn_data/源码/react_staging/03_src_TodoList案例
• react_learn_data/源码/react_staging/05_src_github搜索案例_axios
• react_learn_data/源码/react_staging/06_src_github搜索案例_pubsub
• react_learn_data/源码/react_staging/07_src_github搜索案例_fetch