从零开始学React【001】实战项目开始

背景

技术背景

没有正儿八经的接触过前端框架技术，最初入行是是在2000年，当时还是纯Html+js. 后来的Html5都算是新技术。当出现各种框架，例如Vue时，我已经不在一线写代码很久了，所以对于package之类的都不熟。
之前都没有打包发布过前端代码。

需求背景

有一台10年以上的DELL触屏笔记本，哪都没坏，就是配置落伍了，CPU是酷睿m5,内存8G，卖不了多少钱，但是丢掉太可惜。想着用来做一个电子相册，但是找了几个PC端的软件，实再是没好用的，后来想着干脆不如自己写个web页面，能满足自己的需求。但是再用Html感觉没什么意思，于是想找一个前端框架，想起了React。

学习过程

今天是2023年12月10日已经学了差不多1小时左右，在MacOs上搭建了环境，运行了默认的项目，也学会了npm run build 项目并发布到服务器上。

学习笔记

目前在youtube上找了一个视频在学。
后来改主意了，目前我在官网文档来学习，即 react.dev/learn 正好目前在加强英语水平，边学英文原版边学英语。

React有很多分支，例如React Js 、React Native 等；我这里主要是在学在用React Js。
React是由Fackbook在2013年开源的，至今10年多。 函数式编程，全球范围内使用人数最多的框架。

教程先是介绍了快速开始了解React，里面强调了组件的概念，即 components，以及nest 嵌套。

React apps are made out of componeents，React的应用是由组件构成的。
A component is a piece of the UI (user interface) that has its own logic and appearance 。组件是UI的一部分，有他自己的逻辑和外观 。

React components are JavaScript functions that return markup:

React的组件是返回(return)JS函数：

function MyButton() {
  return (
    <button>I'm a button</button>
  );
}

在上面我们声明了一个MyButton的组件，下面可以在其他组件中来调用

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

注意是在React中所有组件用大写字母开头，但HTML标签必须用小写。

用JSX书写标记

上边看到的语法为JSX。即在function MyApp中的return部分的：

<div>
      <h1>Welcome to my app</h1>
      <MyButton />
</div>

但这并不是强制的，很多React项目中用JSX语法来写组件。所有的本地化工具等都支持JSX，JSX即是将HTML与JS混合来写。
JSX语法非常严格，不能再使用类似于 <br />. 这样的标签，组件中也不能返回多个JSX标签。必须把他们组合在一个共同的父级标签节点，比如像<div> </div>中或空的<> </>之间，
例如：

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

如果有一大段、很长的HTML代码要转到JSX，官方也提供了在线转换工具:https://transform.tools/html-to-jsx

添加样式

用className指定一个CSS类。它的工作方式与HTML类属性相同:

<img className="avatar" />

然后在一个单独的CSS文件中为它编写CSS规则:

/* In your CSS */
.avatar {
  border-radius: 50%;
}

在React中，没有定义如何添加CSS文件的规则，

显示数据

用{} 花括号在JSX嵌入变量并显示。

return (
  <h1>
    {user.name}
  </h1>
);

可以从JSX属性“转义到JavaScript”，但是必须使用花括号而不是引号。例如，className="avatar"传递"avatar"字符串作为CSS类，但src={user.imageUrl}读取JavaScript用户imageUrl变量的值，然后将该值作为src属性传递:

return (
 <img
   className="avatar"
   src={user.imageUrl}
 />
);

也可以在JSX花括号内放入更复杂的表达式

const user = {
 name: 'Hedy Lamarr',
 imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
 imageSize: 90,
};

export default function Profile() {
 return (
   <>
     <h1>{user.name}</h1>
     <img
       className="avatar"
       src={user.imageUrl}
       alt={'Photo of ' + user.name}
       style={{
         width: user.imageSize,
         height: user.imageSize
       }}
     />
   </>
 );
}

在上面的例子中，style={{}}不是一个特殊的语法，而是在style={} JSX花括号内的一个常规的{}对象。当样式依赖于JavaScript变量时，可以使用style属性。

Conditional rendering 条件渲染

在React中，没有特殊的语法，使用常的Javascript代码。例如可以使用if有条件来嵌套JSX语法中：

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

也可以使用三目表达式,直接在JSX中，如下：

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

甚至如果不需要else时，可以使用更短的方式来表达：

<div>
  {isLoggedIn && <AdminPanel />}
</div>

Rendering lists 渲染列表

使用Javascript语法，例如 for loop或 array 数组这类的，来渲染列表。
例如 以产品列表为例：

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

在组件内部，使用map()函数将产品数组转换为<li>项数组:

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

注意每一个li都应该有一个key属性，传递唯一的值，可以方便之后对其进行操作。
例如：

const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map(product =>
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.title}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
}

Responding to events 交互响应

可以通过在组件中声明事件处理函数来响应事件:

function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

注意onClick={handleClick}在末尾没有括号!不要调用事件处理函数:只需要向下传递它。当用户单击按钮时，React将调用事件处理程序。

Updating the screen 更新

在组件中添加state-状态
首先导入useState

import { useState } from 'react';

现在你可以在组件内部声明一个状态变量了:

function MyButton() {
 const [count, setCount] = useState(0);
 // ...

将从useState获得两样东西:当前状态(count)和允许更新它的函数(setCount)。
你可以给它们取任何名字，但惯例是写[something, setSomething]。
第一次显示按钮时，count将为0，因为您将0传递给了useState()。当您想要改变状态时，调用setCount()并将新值传递给它。单击此按钮将增加计数器:

function MyButton() {
 const [count, setCount] = useState(0);

 function handleClick() {
   setCount(count + 1);
 }

 return (
   <button onClick={handleClick}>
     Clicked {count} times
   </button>
 );
}

React会再次调用你的组件函数。这一次，count将是1。那么它就是2。等等…。

如果多次呈现同一个组件，每个组件都将获得自己的状态。分别按下每个按钮:

import { useState } from 'react';

export default function MyApp() {
 return (
   <div>
     <h1>Counters that update separately</h1>
     <MyButton />
     <MyButton />
   </div>
 );
}

function MyButton() {
 const [count, setCount] = useState(0);

 function handleClick() {
   setCount(count + 1);
 }

 return (
   <button onClick={handleClick}>
     Clicked {count} times
   </button>
 );
}

注意每个按钮如何“记住”自己的计数状态，而不影响其他按钮。

Using Hooks 使用钩子

以use开头的函数称为Hooks． useState是React提供的一个内置钩子
可以在API参考中找到其他内置Hooks。还可以通过组合现有的hook来编写自己的hook。
钩子比其他函数更具限制性，你只能调用组件顶部的钩子(或其他钩子)
这个警告是指在React函数组件中使用Hook时，它们必须在组件的顶层被调用，而不能在条件语句、循环、嵌套函数等内部调用。

在React中，Hook是一种函数，例如useState和useEffect，它们允许你在函数组件中使用状态和其他React特性。React要求你在组件的顶层使用这些Hook，而不是在嵌套的代码块中调用它们。

这是为了确保React能够按照相同的顺序调用Hook，并能够正确地跟踪组件状态。如果在组件的不同渲染阶段中以不一致的顺序调用Hook，React可能无法正确地管理组件的状态，导致不一致的渲染结果或其他问题。

例如，以下是违反规则的示例：

function MyComponent() {
  if (someCondition) {
    // 不要在条件语句中调用Hook
    const [value, setValue] = useState(0);
  }

  // ...

  return (
    // ...
  );
}

应该将其重构为：

function MyComponent() {
  // 在组件的顶层调用Hook
  const [value, setValue] = useState(0);

  if (someCondition) {
    // ...
  }

  // ...

  return (
    // ...
  );
}

这种规则确保React能够正确地捕获和跟踪组件状态的变化，并在需要时触发相应的更新。

Sharing data between components 组件之间共享数据

在前面的例子中，每个MyButton都有自己独立的计数，当每个按钮被点击时，只有按钮被点击的计数改变:
但是，经常需要组件共享数据并始终一起更新。

要使两个MyButton组件同时显示相同的计数和更新，需要将状态从单个按钮“向上”移动到包含所有按钮的最近的组件。

首先，将state 从MyButton上移到MyApp:

export default function MyApp() {
 const [count, setCount] = useState(0);

 function handleClick() {
   setCount(count + 1);
 }

 return (
   <div>
     <h1>Counters that update separately</h1>
     <MyButton />
     <MyButton />
   </div>
 );
}

function MyButton() {
 // ... we're moving code from here ...
}

然后，将状态从MyApp向下传递给每个MyButton，以及共享的单击处理程序。可以使用JSX花括号将信息传递给MyButton，就像之前使用内置标记一样

export default function MyApp() {
 const [count, setCount] = useState(0);

 function handleClick() {
   setCount(count + 1);
 }

 return (
   <div>
     <h1>Counters that update together</h1>
     <MyButton count={count} onClick={handleClick} />
     <MyButton count={count} onClick={handleClick} />
   </div>
 );
}

你这样传递的信息叫做道具。现在MyApp组件包含计数状态和handleClick事件处理程序，并将它们作为道具传递给每个按钮。

最后，修改MyButton来读取你从它的父组件传递过来的props:

function MyButton({ count, onClick }) {
 return (
   <button onClick={onClick}>
     Clicked {count} times
   </button>
 );
}

当单击按钮时，onClick处理程序将被触发。
每个按钮的onClick道具都被设置为MyApp中的handleClick函数，因此它内部的代码可以运行。
该代码调用setCount(count + 1)，增加count状态变量。新的计数值作为道具传递给每个按钮，因此它们都显示新值。这就是所谓的“提升状态”。
通过向上移动状态，可以在组件之间共享状态。

下一级

到目前为止，我们已经了解了如何编写React代码的基础知识!
下边有一个官方井字游戏的例子，很值得学习，我明天继续学这里。
tutorial-tic-tac-toe
https://react.dev/learn/tutorial-tic-tac-toe

import { useState } from 'react';

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

function Board({ xIsNext, squares, onPlay }) {
  function handleClick(i) {
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    const nextSquares = squares.slice();
    if (xIsNext) {
      nextSquares[i] = 'X';
    } else {
      nextSquares[i] = 'O';
    }
    onPlay(nextSquares);
  }

  const winner = calculateWinner(squares);
  let status;
  if (winner) {
    status = 'Winner: ' + winner;
  } else {
    status = 'Next player: ' + (xIsNext ? 'X' : 'O');
  }

  return (
    <>
      <div className="status">{status}</div>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
  );
}

export default function Game() {
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const [currentMove, setCurrentMove] = useState(0);
  const xIsNext = currentMove % 2 === 0;
  const currentSquares = history[currentMove];

  function handlePlay(nextSquares) {
    const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
    setHistory(nextHistory);
    setCurrentMove(nextHistory.length - 1);
  }

  function jumpTo(nextMove) {
    setCurrentMove(nextMove);
  }

  const moves = history.map((squares, move) => {
    let description;
    if (move > 0) {
      description = 'Go to move #' + move;
    } else {
      description = 'Go to game start';
    }
    return (
      <li key={move}>
        <button onClick={() => jumpTo(move)}>{description}</button>
      </li>
    );
  });

  return (
    <div className="game">
      <div className="game-board">
        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
      </div>
      <div className="game-info">
        <ol>{moves}</ol>
      </div>
    </div>
  );
}

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}