React学习笔记[3]✨~React脚手架解析👻

_花卷
93 阅读3分钟

我正在参加「掘金·启航计划」

一、为什么需要脚手架

如果我们只是开发几个小的demo程序，那么永远不需要考虑一些复杂的问题:

比如目录结构如何组织划分； 比如如何管理文件之间的相互依赖； 比如如何管理第三方模块的依赖； 比如项目发布前如何压缩、打包项目 等等...

现代的前端项目已经越来越复杂了，不会再是在HTML中引入几个css文件，引入几个编写的js文件或者第三方的js文件这么简单：

比如css可能是使用less、sass等预处理器进行编写，我们需要将它们转成普通的css才能被浏览器解析；比如JavaScript代码不再只是编写在几个文件中，而是通过模块化的方式，被组成在成百上千个文件中，我们需要通过模块化的技术来管理它们之间的相互依赖；比如项目需要依赖很多的第三方库，如何更好的管理它们（比如管理它们的依赖、版本升级等）...

为了解决上面这些问题，我们需要再去学习一些工具：

比如babel、webpack、gulp，配置它们转换规则、打包依赖、热更新等等一些的内容；

脚手架的出现，就是帮助我们解决这一系列问题的，对于现在比较流行的三大框架都有属于自己的脚手架：

Vue的脚手架： @vue/cli

React的脚手架：create-react-app

Angular的脚手架： @angular/cli

它们的作用都是帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好。

（目前这些脚手架都是使用node编写的，并且都是基于webpack的，所以必须要在电脑上安装好node环境）

二、使用脚手架创建React项目

安装create-react-app

npm install create-react-app -g

安装完毕后可以使用以下命令查看版本

create-react-app --version

创建项目

create-react-app <项目名>

  • 需要注意的是项目名不能有大写字母，否则会创建失败

启动项目（可在package.json中查看启动命令）

npm start

三、脚手架中的Webpack

React脚手架默认是基于Webpack来开发的。

但是，很奇怪：我们并没有在目录结构中看到任何webpack相关的内容？

原因是React脚手架将webpack相关的配置隐藏起来了（其实从Vue CLI3开始，也是进行了隐藏）

如果我们希望看到webpack的配置信息，应该怎么来做呢？

  • 我们可以执行一个package.json文件中的一个脚本："eject": "react-scripts eject"
  • 这个操作是不可逆的，所以在执行过程中会给与我们提示：

四、代码编写

在src下创建index.js（打包的入口文件）

import ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<h2>Hello world</h2>);

可在index.html中看到根节点的id为root：

除了直接向render中传递元素外，还可以传递组件：

1）在src下创建App.jsx

import React from 'react'

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      message: 'hi'
    }
  }
  render() {
    const {message} = this.state
    return (
      <div>{message}</div>
    )
  }
}

export default App

2）在index.js中导入App并使用

import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
avatar
文章
阅读
粉丝