React笔记（一）—— 创建React项目

一、什么是React？

React 官方中文文档 (docschina.org)

张果老师博客：React学习笔记（一）—— React快速入门 - 张果 - 博客园 (cnblogs.com)

 React起源于Facebook的内部项目，并于2013年5月开源。它主要用于构建Web应用程序的视图层，允许开发者创建可重用的组件，这些组件可以组合以构建复杂的用户界面。React的组件是声明式的，这意味着它们可以描述如何渲染视图，而不需要明确地控制DOM树的结构。此外，React以其高效性和灵活性而闻名，适合构建大型的前端项目。

二、步骤

第一步：创建React项目（使用Vite创建React项目）

快捷键Win+R打开命令窗口，在相应的目录下创建项目

npm create vite@latest

第二步：初始化项目

 

张果老师视频教学：React_180_React复习_创建项目、运行项目_哔哩哔哩_bilibili

 

报错问题： 解决VsCode代码没有错误但是报红线问题_vscode 开发 react-native 代码没错但爆红-CSDN博客

 解决方法：

 

第三步：安装VSCode插件

Simple React Snippets 更加简洁的代码片段

 

三、开始编辑代码

1、输出HelloC

 

 结果：

 2、展示图片

把一张图片放入到assets文件夹里，再创建hello.css样式文件

 hello.css样式

 结果：

 张果老师教学视频：React_180_React复习_类组件_哔哩哔哩_bilibili

 

  作业：用 react 实现一个列表，可以单选，多选和取消选择

import React, { Component } from 'react';

export default class Demo extends React.Component {
  constructor(props, context) {
     super(props, context);

    this.state = {
      checklist: [
        { name: '全选', checked: false },
        { name: '张三', checked: false },
        { name: '李四', checked: false },
        { name: '王五', checked: false },
      ],
    };
  }

 //更新状态
  checkThis(item) {
    // 改变当前点击项的选中状态
    item.checked = !item.checked;
    // 如果点击的是全选，就把所有的选中或全部取消勾选
    if (item.name === '全选') {
      // 如果点击的是全选，就把所有的选中或全部取消勾选
      if (item.checked) {
       // 遍历state中的checklist，将其checked属性设置为true
        this.state.checklist.forEach((i) => {
          i.checked = true;
        });
      } else {
        // 遍历state中的checklist，将其checked属性设置为false
        this.state.checklist.forEach((i) => {
          i.checked = false;
        });
      }
    }
    // 如果全选之后，取消勾选其中的一个或多个，则会把全选也取消勾选掉
   // 检查当前状态的检查表中是否有未检查的项
    let result = this.state.checklist.some((j) => {
      // 如果检查表中的每一项未被检查，则返回true
      if (!j.checked) {
        return true;
      }
    });

   // 如果result为true，则将this.state.checklist[0].checked设置为false
    if (result) {
      // 设置第一个复选框的选中状态为未选中
      this.state.checklist[0].checked = false;
    }

    // 获取checklist的长度
    let len = this.state.checklist.length;
    // 定义一个布尔变量ev
    let ev = true;
    for (let a = 1; a < len; a++) {
      // 遍历，如果列表里除了第一个之外，其他的都勾选的话，就把全选按钮也勾选掉
      if (!this.state.checklist[a].checked) {
        ev = false;
      }
      }
      
   if (ev) {
      // 设置第一个复选框为选中状态
     this.state.checklist[0].checked = true;
    }

      //更新状态
   this.setState({
      checklist: this.state.checklist,
    });
  }

  render() {
    let _self = this;
    return (
      <div className="ToDo">
        <div>用 react 实现一个列表，可以单选，多选和取消选择</div>

        {this.state.checklist.length ? (
          // 如果checklist的长度不为0，则渲染ul标签
          <ul>
            {this.state.checklist.map(function (item, index) {
              // 遍历checklist，返回每一个item
              return (
                <li key={index}>
                  <label>
                    <input
                      // 渲染input标签，并绑定checkThis函数
                      type="checkbox"
                      onChange={_self.checkThis.bind(_self, item)}
                      checked={item.checked}
                    />
                    {item.name}
                  </label>
                </li>
              );
            })}
          </ul>
        ) : (
          // 如果checklist的长度为0，则返回空字符串
          ''
        )}
      </div>
    );
  }
}

 结果：