React项目实战02-React介绍和脚手架搭建

无处安放的波澜
308 阅读7分钟

React02-React介绍和脚手架搭建

一、React介绍

中文网地址：react.docschina.org/

脚手架中文网：create-react-app.bootcss.com/

React这个框架是facebook开源的一个框架。内部自己架设项目。2013年5月开源

React随着发展，越来越大，

将React进行分支：

  1. React-DOM：React开发web端。
  2. React-Native：用React来开发移动端，android和ios

特点：

  1. 声明式设计：React采用声明式的规范，可以轻松描述应用。页面和数据之间很容易开发通信
  2. 高效：React底层也引入了虚拟dom，最大限度的减少dom的操作
  3. 灵活：React开发更偏向于原生内容，可以和很多第三方的库进行整合

使用React的理由：

  1. 开发思想组件化思想，更符合现在项目设计
  2. 技术成熟、社区稳定、版本更新比较快、适用于大型的web应用
  3. facebook团队来进行维护，技术一定是可靠的。
  4. 第三方资源非常丰富

二、脚手架搭建

搭建项目有两种方式：

  1. 本地自己构建一个项目，将React的依赖引入到项目中，多页面使用React

    <html>
   <head>
       <script src="react.js"></script>
   </head>
   <body>
      //react的代码
   </body>
</html>

  2. 通过脚手架的方式来搭建项目

    打开CreateReactApp脚手架工具官网

    npx create-react-app 项目名字

    注意：项目的名字不能存在大写，不能有中文

    涉及到多个单词拼接，my-project

    create-react-app：这个就是脚手架工具，这个工具你可以本地安装。也可以临时安装。

    npx就是属于临时安装一个脚手架工具，用完就删除。

    扩展：

    //本地全局安装脚手架工具
npm i create-react-app -g
//本地自己安装这个脚手架搭建项目
create-react-app 项目名字

  3. 启动项目

    创建项目的时候，默认去下载依赖。

    cd 项目
yarn start\npm start

三、插件安装

image-20230706101414375

image-20230706101448251

rcc：快速创建一个类组件

四、组件的介绍

(1)项目中默认的文件

indexjs入口文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
​
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <App />
);
​
​

App.js根组件

import React, { Component } from 'react'
​
class App extends Component {
 render() {
   return (
     <div>App</div>
  )
}
}
export default App

(2)组件的概念

React

组件分类：

  1. 类组件：采用面向对象的语法来设计。类组件也是功能最完善的组件。
  2. 函数组件：采用函数式编程来设计代码，内部没有this指向。缺少内部状态等等。90%

先学习类组件，在学习函数组件。

公司里面类组件和函数组件混用。

创建组件可以使用快捷键： RCC：快速创建一个类组件

RFC：快速创建一个函数组件

(3)类组件

类组件采用面向对象的思想来开发

  1. 类的概念：类是对象的抽象，对象是类的具体实现
  2. 属性和行为：每个对象都有自己属性和行为。属性组件中想要去更新页面数据，行为就是methods
  3. 静态属性和静态的行为：类的属性和类的行为，只能通过类来访问
  4. 继承的概念：一个类可以继承另外一个类，可以使用他的属性和行为
  5. 重写的概念：父类定义了一个方法，子类继承这个父类，子类有一个一模一样的方法。重写方法。

特点：

  1. 编写一个类继承Component，当前这个类才能称为组件
  2. 需要重写render函数，Component里面默认有render，我们要重写render，渲染我们自己页面
  3. render里面返回的页面模板，这种代码JSX代码
  4. 暴露当前这个类，外部引入自己创建组件
  5. React项目开发过程中，组件的后缀有两种（js、jsx）
  6. 组件模板代码必须要有一个根标签
import React, { Component } from 'react'
​
export default class Table extends Component {
 render() {
   return (
     <div>Table</div>
  )
}
}

五、JSX的介绍

(1)基本概念

JSX来源：React在JS代码+CSS+HTM基础上设计来的。

痛点：JS+HTML+CSS页面动态渲染，JS代码拼接字符串模板，更细页面。JS代码操作CSS代码渲染

JSX= JS+XML 你可以直接在JS代码中嵌入标签代码。

接下来我们在通过babel这个工具，将JSX代码编译为JS代码

XML代码类似于HTML代码

React设计JSX代码，解决了JS逻辑代码和HTML页面渲染的瓶颈。

业务和实现通过一个模式就实现

(2)使用JSX来组件引入

在App.js组件中引入其他组件

import Header from "./components/Header"

组件的名字一定大写，不然React警告和报错

import Header from './components/Header'
import Content from './components/Content'
class App extends Component {
  //这个方法重写的方法
  render() {
    //render中存放的就是页面模板代码
    return (
      <div>
        <Header></Header>
        <Content></Content>
      </div>
    )
  }
}

(3)组件的样式

组件的样式有两种：

  1. 内联样式：直接将样式写在标签上面
  2. 外部样式：将样式提取出去，引入进来使用

内联样式：

JSX不仅将JS代码和HTML代码封装了。还将所有CSS样式也封装了。必须采用对象形式来设计样式

<div className='header' style={{width:"100px",height:"100px",border:"1px solid red"}}>
    <h2>优惠券</h2>
</div>

style={}： 代表动态绑定属性。

style={{width:"red"}}: 动态绑定的时候，提供一个对象作为绑定参数。

JSX中内联样式所有的样式属性都被封装了。连字符的必须采用驼峰命名

外部样式：

在assets文件夹下面app.css

body{
    margin: 0px;
    padding: 0px;
}

在App中引入外部样式

import React, { Component } from 'react'
import "./assets/styles/app.css"
/**
 * 类名就是组件的名字
 * Component:React官网提供组件模板。里面包含组件必须的要素
 */

import Header from './components/Header'
import Content from './components/Content'
class App extends Component {
  //这个方法重写的方法
  render() {
    //render中存放的就是页面模板代码
    return (
      <div>
        <Header></Header>
        <Content></Content>
      </div>
    )
  }
}

export default App

关于样式穿透的问题

在React中默认采用css文本来设计外部样式，引入组件中使用

会出现样式影响所有组件。不管是哪个组件样式，打包的将样式汇总。

兄弟组件、父子组件都会产生影响

给样式设计模块化，指定样式只能对应组件中生效

开发步骤

1）需要创建css文件采用模块命令

比如：taba.module.css

里面的代码还是正常的css代码

2）在组件中采用模块的方式来加载外部的css文件

import styles from "./assets/styles/taba.module.css"

3）使用的时候

<div className={styles.box}>

当前这个模块的样式，只在这个组件中生效

(4)JSX中定义组件内部数据

主要以类组件为主

组件内部数据要定义出来。语法一：

constructor(){
        super()
        // 相当于Vue中data，state的这个名字规定
        this.state = {
            count:1,
            dataSource:[1,2,3]
        }
    }

页面要使用的时候

render(){
    const {count} = this.state
    return{
        <div>{count}</div>
    }
}

组件内部数据要定义，语法二：

export default class TabA extends Component {
    state = {
        count:1,
        dataSource:[1,2,3]
    }

页面使用规则是一样

(5)JSX 中数据的渲染

数字、数组、字符串，模板是可以直接渲染的。

数据是对象格式，无法直接渲染，获取对象属性来渲染

布尔值也也需要转化为字符串来进行渲染

state = {
        count:1,
        dataSource:["xiaowang",2,3],
        user:{
            id:1
        },
        boo:false,
        msg:"文本测试",
        temp:[
            <li>li1</li>,
            <li>li2</li>
        ]
    }

数组里面存放标签，默认会将里面标签渲染页面中。具备v-for的特点

构造一个对象数组，里面存放优惠券数据

state = {
        formData: {
            searchType: "type",
            searchData: "新人"
        },
        tableData: [
            {
                time: [
                    "2021-01-13 17:39:42",
                    "2023-01-13 17:39:42"
                ],
                useTime: [
                    "2023-01-13 17:39:42",
                    "2023-02-13 17:39:42"
                ],
                _id: "63919f95024a7602dc78082a",
                title: "测试优惠券",
                receiveType: "2",
                price: 300,
                state: false,
                show: false,
                system_data: true,
                create_time: "2022-12-08T08:25:57.209Z",
                imgSrc: "https://pic.616pic.com/ys_bnew_img/00/06/12/6QLoLGyq3C.jpg"
            }
        ]
    }

在render中解构你需要数据

render(){
    const {tableData} = this.state
    return{
        
    }
}

页面进行数据构造并渲染

<tbody>
  {/* {this.stateChange()} */}
  {tableData.map(item => {
       return (
           <tr>
               <td>{item._id}</td>
               <td>{item.title}</td>
               <td>
                   <img width="50px" src={item.imgSrc} alt="" />
               </td>
               <td>{item.receiveType}</td>
               <td>{item.price}</td>
               <td>{item.useTime}</td>
               <td>{item.state ? "是" : "否"}</td>
               <td>
                   <button>删除</button>
                   <button>修改</button>
               </td>
           </tr>
      )
  })}
                   
</tbody>

动态进行数据遍历的时候，也需要给你节点添加key

<tr key={item._id}>

六、视频和代码

gitee地址：

https://gitee.com/xuzhaobo/react-coupon-project

视频地址一：

https://www.bilibili.com/video/BV1Mk4y1K7N4/?spm_id_from=333.999.0.0&vd_source=9e2d2936e81da2c644a0b00de901ce31
avatar
文章
阅读
粉丝