React & 用一个简单案例体验一遍 React-dom & React-router & React-redux 全家桶

一、准备工作

本文略长，建议耐心读完，每一节的内容与上一节的内容存在关联，最好跟着案例过一遍，加深记忆。

1.1 创建项目

• 第一步，执行下面的命令来创建一个 React 项目。

npx create-react-app react-example
cd react-example

• 第二步，安装依赖，运行项目

yarn install 或 npm install
yarn start 或 npm run start

1.2 项目结构

如图：

1.3 初始化

将 src/index.js 的默认代码删掉，保留下面这部分。

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
const root = ReactDOM.createRoot(document.getElementById("root"));
const App = () => {
   
  return <div>Hello</div>
}
root.render(<App />);

现在项目看起来就像这样，一个简单的 Hello。

二、React 的基本用法

如果你还不熟悉 React 的基础语法，可以阅读我前面写的 React & 工作日常语法。

1.1 输出 Hello, world

第一步肯定是要先来句 Hello,world!

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById("root"));
const App = () => {
   
  return <div>Hello, world!</div> // 改动点
}
root.render(<App />);

1.2 组件的使用

组件可以由函数或者类来进行创建，像上面的 App 函数就是一个组件，里面可以混合写 HTML & JS 代码，React 会自动帮我们解析这些语法，像这种写法就叫就 JSX 。

下面我将以函数的方式来定义组件作为案例，类组件在讲生命周期时做演示。

• 第一步，随便定义一个叫 List 的组件，内容随便写，比如 Hi List

const List = () => {
   
  return <div>Hi List.</div>
}

• 第二步，引入 List，目前入口只有 App，很明显只能放这里。

const App = () => {
   
  return <div>Hello, world! </List> </div>
}

效果：

1.3 组件嵌套组件

像 App 组件嵌套 List 组件，我们管这叫父子组件，App 是父组件， List 是子组件，当 List 套上 Item 组件时，那 Item 的父组件就是 List，而祖父组件是 App， 以此类推。

现在我们来给 List 嵌套一个 Item 组件。

const List = () => {
   
  // 多行时要用 () 包裹
  return (
    <ul>
      <Item/> // 引入
    </ul>
  )
}
const Item = () => {
   
  return <li>item1</li>
}

效果：

别忘了还可以写 JSX 的，现在试试用 Array.map 循环多个 Item 组件。

const List = () => {
   
  return (
    <ul>
      {
   [1, 2, 3, 4].map((num) => Item(num) )}
    </ul>
  )
}
const Item = (num) => {
   
  return <li key={
   num}>item{
   num}</li>
}

在看效果前思考下，上面代码具体会发生哪些变化？

1. Item 函数组件多了个 num 参数，我们用它来接受，并用 {num} 括号包括起来进行访问
2. <Item/> 的调用方式变成 Item(num) ，因为我们要将 num 值传递给 Item 函数，所以我们又发现了一个特性，在不传参的情况下直接声明 <Item/> 是会自动触发函数的。
3. 循环组件时，key 属性得带上且是唯一的。

效果：

1.3 组件绑定点击事件

干巴巴的列表，没有交互行为怎么能行呢，
现在我们就来定义一个事件，当点击某个 Item 时提示对应的 num 数值，代码如下：