React-项目构建

时间：2024-04-15 18:26:14

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

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

目录

1、初始化项目

2、目录结构

组件

1、组件的创建方式

1.1、函数创建组件

1.2、类组件

2、组件传值（父-子）

2.1、函数组件

2.2、类组件

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;

相关文章