React脚手架入门

React应用(基于react脚手架)

刚接触react脚手架，还请大佬们多多指教呀呀呀

1. react脚手架

• 用来帮助程序员快速创建一个基于xxx库的模板项目

  • 包含了所有需要的配置(语法检查、jsx编译、devServer...)
  • 下载好了所有相关的依赖
  • 可以直接运行一个简单的效果

• react提供了一个用于react项目的脚手架库：create-react-app

• 项目的整体技术架构为：react + webpack + es6 + eslint

• 使用脚手架开发的项目特点：模块化、组件化、工程化

2. 创建项目并启动

1. 打开cmd，全局安装：npm install create-react-app -g
2. 切换到创建项目的目录，使用命令：create-react-app hello-react
3. 进入项目文件夹：cd hello-react
4. 启用项目：npm start 此时会自动打开相应的网页出来

默认创建出来的脚手架是这样的：

最主要的几个文件：

• public(静态资源文件夹)中的index.html——主页面
• src(源码文件夹)中的App.js——App组件
• src中的index.js——入口文件

首先写一个简单的hello组件，在App.js中写下面这段代码，创建一个“外壳”组件App，其中，div标签里面一般不直接写hello React!这样一段代码，而是插入一个组件。可以新创建一个Hello组件，再将<Hello/>插入div标签中。

// 创建并暴露App组件
import React, { Component } from 'react'
export default class App extends Component {
    render() {
        return (
            <div>hello React!</div>
        )
    }
}

在创建完这个App组件之后，要设置默认暴露这个App组件，在index.js文件中才可以成功导入App组件。这里要强调的是，简写方式import React, { Component } from 'react'的Component并不是通过React解构赋值得到的，而是因为在react这个文件中，Component这个类有被暴露出来，即export class Component，因此才可以通过这种简写方式从react文件中拿到Component。

注意

• 脚手架中引入css文件的方式：import 'css文件的相对路径'

• 在脚手架中js和jsx文件都可以不写后缀
• 在脚手架中，jsx后缀的文件都是组件
• 在文件的引入时，子文件被命名为index时，可以省略(默认就找index子文件)

3. 样式的模块化

有时候多个css文件会导致一些标签的样式发生冲突。我们在引入css文件的时候，并不会说import xxx from '...'，而是import '...'，这样子的话会容易产生冲突。此时我们应该把css文件改名改成index.module.css，这样的话再引入css的时候就可以用import xxx from '...'来引入了。例如引入import hello from './index.module.css'，引入了hello的相关样式。此时组件标签的样式名就应该由className="title"改为className={hello.title}。

简单讲，就是把css改成module.css的后缀引入即可。

4.VScode插件

react自动生成代码的工具。

其实就是为我们平时写代码提供方便，不用自己一行一行敲。除了rcc(reactClassComponent)之外，还有很多简写方式，详见插件详情。