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。

1.初始化项目 

# 免安装形式
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。

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.

 

// rfc react 函数组件创建快捷方式
// 函数组件
/***
 * 1.函数命名为大写  区分和普通函数的区别
 * 2.return 返回jsx语法
 */
import React from 'react'

export default function App() {
  return (
    
App.1.函数组件
  )
}

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

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

import App from "./App";

ReactDOM.render(, document.getElementById("root"));

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

 1.2、类组件

类组件有以下特点：

• 使用ES6语法的class创建的组件（有状态组件）

• 类名称为大写字母开头（建议）

• 类组件要继承React.Component父类，从而可以使用父类中提供的方法或者属性

• 类组件必须提供render方法，用于页面结构渲染，结构必须要有顶级元素，且必须return去返回

// rcc react 类组件创建快捷方式
/***
 * 1.类名要大写
 * 2.继承父类组件  react 提供的组件模版
 * 3.必须具有 render 渲染函数 返回jsx语法结构
 * 
 * 类组件具有但是函数组件没有  函数组件可以通过hook实现下面功能
 * state 组件状态
 * 组件生命周期
 */
import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      
App.2.快捷生成函类件结构
    )
  }
}

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

 

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

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

// 导出
export default App;

 2.组件传值(父-子)

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

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

 2.1函数组件传值

import React from 'react'

export default function App() {
  return (
    
App
      {/* 父传子*/ }
      
    
  )
}

// 函数的形参接受父传子
function Child(props) {
  console.log(props);
  const {msg} = props
  return 

    子组件
    父组件传值: {msg}
  
}

2.2类组件组件传值

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

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

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      
App
        
      
    )
  }
}


class Child extends Component {
  render(){
    console.log(this);
    const {msg} = this.props
    return (
      
 CHlid  父传子: {msg}
    )
  }
}

2.3跨页面组件传值封装(函数组件)

import React, { Component } from 'react' 
// 引入组件
import Card from './compontens/Card'
export default class App extends Component {
  render() {
    const list = [{
      name: 'peilong',
      job: '前端工程师',
      sex: '男'
    },
    {
      name: 'cc',
      job: '前端工程师',
      sex: '男'
    }
  ]
    return (
      
App
      {/* 遍历数组传值给子组件*/}
        {
          list.map((item) => (
            
          ))
        }
        
      
    )
  }
}

// 子组件
import React from 'react'

// 根据子组件传值然后通过 props接收
export default function Card(props) {
    const {name , job, sex} = props.data
  return (
    

        
姓名: {name}
        
职位: {job}
        
性别: {sex}
    
  )
}

 注意:每个列表输出两次是因为react 的严格模式

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
// 根组件
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // 严格模式
  
    

  
);