React-项目构建

-青山如故

1619人浏览 · 2024-04-12 12:37:15

-青山如故 · 2024-04-12 12:37:15 发布

🌈个人主页：前端青山
🔥系列专栏：React篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来React篇专栏内容:React-项目构建

React团队推荐使用create-react-app（相当于vue的vue-cli）来创建React新的单页应用项目，它提供了一个零配置的现代构建设置。

React脚手架（create-react-app）意义：

脚手架是官方提供，零配置，无需手动配置繁琐的工具即可使用
充分利用Webpack，Babel，ESLint等工具辅助项目开发
关注业务，而不是工具配置

create-react-app会配置我们的开发环境，以便使我们能够使用最新的 JavaScript特性，提供良好的开发体验，并为生产环境优化你的应用程序。为了能够顺利的使用create-react-app脚手架，我们需要在我们的机器上安装Node >= 14 和 npm >= 8。

npm i -g @vue/cli

vue create xxxx

1、初始化项目

在终端中使用以下命令来构建react项目：

# 免安装形式

npx create-react-app my-app
# 上面这种安装方式不需要全局安装create-react-app,如果需要全局安装，则可以执行下面的命令
# 项目名称：react、reactdom、reactscript等不允许使用
# npm i -g create-react-app
# create-react-app your-app

项目创建需要消耗的时间可能会有点久，在项目创建完毕后可以执行以下指令：

# 进入项目目录
cd my-app
# 启动项目
npm start

如果本机安装了yarn（一款Facebook自家的包管理工具，类似npm），则安装好给予的项目启动命令提示是yarn start。

# yarn安装

npm i -g yarn


# 配置yarn源

npm i -g yrm


# yrm切换yarn源

yrm use taobao


# 生成react项目包

yarn create react-app 包名称

2、目录结构

public目录下
- manifest.json：清单文件（说明性文件），谷歌要求有这个文件，但是这个文件对开发者来讲没什么用。
- robots.txt：用于声明当前项目哪些路径、目录允许搜索引擎抓取。
src目录下
- *.css：样式文件
- ==App.js==：类似于App.vue，就是react里面的根组件（在react中，组件后缀是js，但是以后写react组件的时候后缀请使用jsx，为了便于区分组件与封装的js文件）
- App.test.js：测试文件
- ==index.js==：类似于main.js，是项目执行的入口文件
- reportWebVitals.js：谷歌新增的性能优化库文件
- setupTests.js：针对项目index.js的一个单元测试文件

了解了react的目录结构后，可以对初始化的项目进行文件清理。此处将src与public目录中的内容全部删除即可，后期如果需要自己往里面写内容。

组件

组件允许我们将UI拆分为独立可复用的代码片段，并对每个片段进行独立构思。从概念上类似于JavaScript函数，它接受任意的入参（props），并返回用于描述页面展示内容的React元素（JSX）。

在react中，组件的形式有2种：

函数组件（拥抱函数式开发方式，面向过程）
- 无状态（函数组件也被称之为无状态组件，相当于vue中的data）
- 无生命周期
- 有Hooks（辅助函数的集合，这些辅助函数可以帮助开发者在函数组件下快速开发）
类组件（面向对象）
- 有状态
- 有生命周期

1、组件的创建方式

在react17之后，允许在项目不用“import React from "react";”，但是在之前的版本是不行的。建议写，肯定不会错。

1.1、函数创建组件

通过函数创建的组件有以下特点：

函数组件（无状态组件）：使用JS的函数创建组件
函数名称以大写字母开头（建议）
函数组件必须有返回值，表示该组件的结构（虚拟DOM），且内容必须有顶级元素
函数组件是没有生命周期的

例如，新建组件文件src/App.jsx：

约定：组件后缀可以是.js也可以是.jsx，为了方便区分组件与项目的业务代码，建议组件用.jsx，业务代码后缀用.js。

import React from 'react'
// 函数名首字母必须大写
function App() {
    return (
        <div>这是第一个函数组件</div>
    )
}

export default App;

要想输出效果，可以再创建项目入口文件src/index.js：

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(<App></App>, document.getElementById("root"));

注意，由于之前清理了项目，当前项目中现在是没有挂载点的，所以需要在public/下创建一个html文件index.html，在其body中设置一个挂载位置：
<div id="root">

</div>

1.2、类组件

类组件有以下特点：

使用ES6语法的class创建的组件（有状态组件）
类名称为大写字母开头（建议）
类组件要继承React.Component父类，从而可以使用父类中提供的方法或者属性
类组件必须提供render方法，用于页面结构渲染，结构必须要有顶级元素，且必须return去返回

import React from "react";
// 创建class类，继承React.Component，在里面提供render方法，在return里面返回内容
class App extends React.Component {
    render() {
        return <div>这是第一个类组件</div>;
    }
}

export default App;

除了上述的写法以外，还可以对React.Component进行按需导入，写成以下形式：

// 引入react和Component
import React,{Component} from "react";

// 类组件
class App extends Component {
    render() {
        return <div>这是第一个类组件</div>;
    }
}

// 导出
export default App;

2、组件传值（父-子）

组件间传值，在React中是通过只读属性props来完成数据传递的。

props：接受任意的入参，并返回用于描述页面展示内容的React元素。

2.1、函数组件

函数组件传值使用props：以形参的形式给函数传递props参数。（与vue的思想是一样的）

例如，有子组件src/Components/Item.jsx，代码如下：

import React from "react";

const Item = (props) => {
    return (
        <div>
            海纳百川有容乃大，{props.next}。 -- {props.name}
        </div>
    );
};

export default Item;

要想在父组件中给其传递name和next值，则父组件src/App.jsx可以写成：

import React from "react";

import Item from "./Components/Item";

class App extends React.Component {
    render() {
        return <Item name="林则徐" next="壁立千仞无欲则刚"></Item>;
    }
}

export default App;

React的父传子的方式与Vue类似，都是通过调用子组件给子组件传递自定义属性方式进行传值的。

2.2、类组件

在父组件中通过自定义属性向子组件传值后，如何在子级类组件中获取传递过来的值呢？

我们可以在子级类组件中通过this.props属性来获取传递到子组件的值，如下：

import React, { Component } from "react";

class Item extends Component {
    render() {
        return (
            <div>
                 海纳百川有容乃大，{this.props.next}。 -- {this.props.name}
            </div>
        );
    }
}

export default Item;