React 导学课

1. React的基本语法

1.1 函数式组件的创建方式

命名规则： React 组件名称必须始终以大写字母开头，而 HTML 标签必须小写

function Header(){
    return (
    	< >
          <h1>Hello World!</h1>
       	</>
    )
}

const Header = ()=>{
    return (
    	< >
          <h1> Hello World!</h1>
	 	</ >
 	)
}

其中用到了Jsx语法，啥是Jsx捏？HTML 语言直接写在 JavaScript 语言之中，不加任何引号，允许 HTML 与 JavaScript 的混写，换个角度就是关于标签的表达式（体会一下）

<div className="sidebar" />

Jsx最重要的两点记住就会用：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

属性和方法在Jsx里用驼峰实现

onClick onKeyUp
className placeHolder

1.2 组件嵌套

function Header(){
    return (
    	< >
          <h1>Hello World!</h1>
       	</>
    )
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <Header />
    </div>
  );
}

效果如此: https://ushjxd.csb.app/

1.3 先介绍两个常用React hook

如果纯函数只能进行数据计算，那些不涉及计算的操作（比如生成日志、储存数据、改变应用状态等等）应该写在哪里呢？那些跟数据计算无关的操作，都称为 “副作用” （side effect），比如DOM的更改，网络请求等。如果掺杂在函数中，会影响函数的纯度，由此引入了hooks的概念。

`useState(initialState)`

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());

该函数返回一个数组，有两个元素，第一个是一个变量，指向状态的当前值。第二个是一个函数，用来更新状态，约定是set前缀加上状态的变量名。

`useEffect`

import React, { useEffect } from 'react';

function Welcome() {
  useEffect(() => {
    document.title = '加载完成';
  },[]);
  return <h1>Hello, World！</h1>;
}

第一和第二个参数分别是<副作用操作>，<加载useEffect函数的依赖项>

组件每渲染一次，该函数就自动执行一次。组件首次在网页 DOM 加载后，副效应函数也会执行。

如果第二个参数是一个空数组，就表明副效应参数没有任何依赖项。因此，副效应函数这时只会在组件加载进入 DOM 后执行一次，后面组件重新渲染，就不会再次执行。

如果有多个副效应，应该调用多个useEffect()，而不应该合并写在一起。

useEffect()的常见用途：

获取数据（data fetching）
事件监听或订阅（setting up a subscription）
改变 DOM（changing the DOM）
输出日志（logging）

1.4 创建项目+编写环境

通过官方脚手架（保证NodeJs环境，官网同款方式）

pnpm init react-app <project name>

使用yarn：

yarn create react-app <project name>

仅创建了一个前端构建通道，不提供路由和服务器端逻辑结构模板

通过Vite创建项目（个人正在使用）

pnpm create vite@latest

或者使用yarn：

yarn create vite

构建完成后：

cd <project name>
//npm 
npm run start
//yarn
yarn run start

2. ToDoList 实例编写

2.1 原型

data:

[
	{
        "id":1,
        "value": "eat",
        "completed": false
    },
    {
        "id":2,
        "value": "sleep",
        "completed": false
    }

]

Header：

Header

ToDoItem：

（选择框+文字区+修改按钮**（可以先不做）**+删除按钮）

选择框可以修改 completed 属性

文字区是value

删除按钮可以删除

InputItem:

InputItem

ToDoList

将组件组合，并请求数据，实现整体功能

3. 动手环节（对照原型图写出相应的函数式组件）

30min practicing

React导学课1