React入门：环境搭建 [在线版]

2 年 ago
科, 雅
3 minutes

首先

我想用React在多篇文章中开发井字棋游戏（三子棋），这既是我个人的复习，也是备忘录的意义。

    • React

 

    • CodeSandbox(公式)

 

    CodeSandbox(非公式の日本語ガイド)

系列列表

    1. React入门1：环境搭建 [在线版] (本次)

React入门1.5：环境搭建 [本地版-番外篇]

React入门2：棋盘的创建
React入门3：交互实现
React入门4：重构 [提升篇]
React入门5：重构 [交互篇]
React入门6：回合实现
React入门7：游戏胜利判定
React入门8：文本实现
React入门9：时光旅行(1)
React入门10：时光旅行(2)
React入门11：时光旅行(3)

关于目的

整体目标

我们将使用3×3的方格来实现在React公式教程中公开的井字游戏。

 

本文的目的是什么？

我们将使用在线编辑器CodeSandbox来构建React应用的开发环境。不过，由于CodeSandbox中已经有了React项目的模板，因此本文主要介绍CodeSandbox的使用方法和文件相关说明。

建立环境

我们将在CodeSandbox上进行环境设置。由于它是一个Web编辑器，所以没有使用终端操作或进行安装的步骤。

费率计划

有三个选项可供选择：个人版，专业版和企业版。基本上，您可以免费使用个人版计划，但与其他计划相比有一些限制。以下是截至2023年12月2日的个人版计划的特点。

    • プロジェクトの作成は無制限

 

    • 公開に制限をかけることができない(プライベート設定不可)

 

    VSCode の拡張機能を使用できない

如果您想了解更多详情，请查看官方网页。

登录

让我们在下一个网页上进行登录。如果您还没有创建CodeSandbox帐户，您可以使用GitHub、Google帐户、Apple ID等进行注册。

 

sinin.png

创建项目

当您成功登录后，将会进入下一个页面。请选择【创建一个沙盒】。值得注意的是，该页面被称为“仪表盘”，用于管理项目的创建、编辑、删除等操作。

01_start.png

您可以在此处选择创建项目的模板。请选择 [React]。

02_makeProject.png

在这里已经成功创建了项目。在屏幕顶部显示着”用户名 / 项目名”。

03_madeProject.png

请双击项目名，进行更名。我们将把它命名为“React教程”。

04_renameProject.png

图像的内容

总的来说，有以下三个屏幕。

05_explainProjectScreen(3).png

资源管理器

(Explorer)

这是屏幕左侧的区域，您可以在[NODEBOX]中查看项目文件的内容，并进行文件的添加、更名、删除等管理操作。

编辑器 (bianjiqu)

画面中央的位置，在这里进行编码。当编辑文件时，文件名右侧会显示一个”o”，按下[Ctrl] + S可以保存修改。支持代码自动补全，操作感与VSCode相似。

预览 (Yu

在画面的右侧。当在编辑器中保存代码时，显示的内容会被更新。

    • (A) をクリックすると、プレビューの下にコンソールの画面を表示できます

 

    (B) をクリックすると、新しくタブが開いて全画面で動作確認ができます

保存到本地

当点击左上方的[□]时，会显示以下的菜单选项。你可以通过[Download Sandbox]将源代码保存在本地环境中。

05_explainProjectScreen.png

关于文件

您可以从[节点框]中确认您创建的项目的文件组织结构如下。

- public
  L index.html
- src
  L App.js
  L index.js
  L styles.css
- package.json

文件的作用

我将逐一说明每个文件的作用。

源文件夹中

App.js

这个React应用程序的主要组件将成为主要结构元素。
我们将在这个文件中进行编码。

styles.css

在美化React应用程序的过程中，我们将进行编码。

index.js

这是React应用程序的入口点（程序开始执行的地方）。我们这次不会涉及。

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

公共文件夹内

index.html

在这里记录了网页的主要内容。这次我们也不会触及这个内容。

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="theme-color" content="#000000">
	<!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
	<!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
	<title>React App</title>
</head>

<body>
	<noscript>
		You need to enable JavaScript to run this app.
	</noscript>
	<div id="root"></div>
	<!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

</html>

包含json的包

这是项目的配置文件。这次我们也不会涉及它。

{
  "name": "react",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.tsx",
  "dependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-scripts": "5.0.1"
  },
  "devDependencies": {
    "@types/react": "18.2.38",
    "@types/react-dom": "18.0.9",
    "loader-utils": "3.2.1",
    "typescript": "4.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

文件的关联

简单地说，下图展示了每个文件之间的关系。

07_fileStructure.jpg

最后

这次我们使用CodeSandbox来建立React应用程序开发环境。下一页展示了当前阶段的源代码文件（这次只是创建了一个模板…）。

 

如果可以的话，请您确认一下，我们在下一篇文章中总结了关于在本地环境配置方面的内容，作为一个额外的章节。

 

下次我们将进行实际的编码工作，请期待！

 

我对此的附加评论

尽管本来希望这篇文章只能完整地呈现出来，但因为篇幅过长，所以决定改为系列形式。我将尽量简洁地陈述，请您以温暖的眼光来阅读，不胜感激。

✖
广告
将在 10 秒后关闭
bannerAds