【React官网教程】Tic-toc-toe 复现bug,配置本地编译环境

Tic toc toe React官方教程复现，遇到的问题记录

Error1 App.js 缺少react引入

./src/App.js
  Line 5:  'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 6:  'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 7:  'React' must be in scope when using JSX  react/react-in-jsx-scope

Search for the keywords to learn more about each error.

解决方法
开头引入react。运行需要文件都引入react。

import React from "react";

export default function Square() {
  return (
    <div>
      <button className="square">X</button>
      <button className="square">X</button>
    </div>
  );
}

Error 2 Unexpected token

原始代码，用于返回多个格子。

import React from "react";

export default function Square() {
  return (
    <>
      <button className="square">X</button>
      <button className="square">X</button>
    </>
  );
}

会出现报错如下：

Syntax error: D:/Cetacean517/Knowledge_Base/Front-end/React/Code/demo_game/src/App.js: Unexpected token (5:5)

  3 | export default function Square() {
  4 |   return (
> 5 |     <>
    |      ^
  6 |       <button className="square">X</button>
  7 |       <button className="square">X</button>
  8 |     </>

解决方法
把<> 用<div>替代

import React from "react";

export default function Square() {
  return (
    <div>
      <button className="square">X</button>
      <button className="square">X</button>
    </div>
  );
}