React的概念和环境设置

1 年 ago

韵, 科

2 minutes

我有一个目标，就是去网页设计公司实习。为了达到这个目标，我决定先学习许多进行网页开发的公司所使用的React和TypeScript。因为在网络上有很多相关的信息，所以我觉得这两个学科自学起来会比较容易。我会努力不懈。

今天我尝试使用Trasemi先生的React入门进行学习。

因为#4需要 TypeScript 知识，所以先完成#3，然后再参考程序设计教程中的 React 入门和 Trasemi 的 TypeScript 入门，然后再继续从#4开始。

首先，如我之前所述，使用TypeScript和React进行开发是一种常见的方式。因此，我们需要学习TypeScript。

React是由Facebook公司开发的一个用于构建用户界面的JavaScript库，它的特点在于能够同时满足外观和功能的组件概念。

然后，将这些组件组合在一起，来创建Web界面。

如果不使用React进行页面绘制，直接通过更改DOM并重新绘制HTML会产生高成本。

在这个例子中，React通过执行虚拟DOM技术来解决这个问题。它将浏览器的DOM树处理为JavaScript对象。通过这样的方式，可以在不给浏览器增加负担的情况下，使用JavaScript内存来进行高效重绘（渲染）。可以通过JavaScript来管理DOM的状态。这就是React组件被称为“具有状态的UI”的原因。

在虚拟DOM上，只会绘制差异并进行修改的反映。然而，在实际的DOM中，不仅会对变更的层级进行修改，还会对下层的层级进行修改。

概括一下，之前的解释有点难以理解，所以我进行了一番调查。

简单概括这个网站的文章。

首先，DOM是一种将网页与脚本或编程语言连接起来的机制，可以通过JavaScript等方式直接操控元素的值。

使用JavaScript或传统框架（如jQuery）时，根据脚本逻辑接收到的信息创建HTML，并进行绘制以在浏览器中显示。

如果状态发生变化或者信息发生变化，那么需要重新接收信息并重新构建DOM，然后基于此进行重新绘制以改变屏幕显示，这会导致显示速度变慢。

对于利用虚拟DOM构建DOM的情况下，不会立即进行浏览器的绘制，而是首先构建一个虚拟的DOM，然后根据构建的DOM内容创建HTML，并将其与实际的DOM同步。这个过程被称为差异检测处理，通过这种方式实现了页面的加速显示。

从这里开始，接下来是关于#2的内容。

在React的编写中使用了JSX。JSX是JavaScript的扩展语言，与模板语言有所不同。

通过使用这种方法，可以使用类似于HTML的语法来编写React，并且还可以使用JavaScript语法。JSX最终可以生成React元素。

如果在React中创建HTML元素，可以使用React.createElement来使用React元素。然而，与不使用JSX相比，使用JSX可以使用类似HTML的语法来生成元素。

JSX在编译时将JSX转换为React.createElement的表达式，从而创建React元素。通过使用它，相比于使用React.createElement的语法，我们可以更直观地编写代码。

JSX的基本基础

标签来包围。这个标签不会作为HTML标签输出。
React.Fragment可以缩写为<>、>就可以了。

从这里开始，是关于第三项内容。

在这个视频中，前半部分介绍了配置React环境的方法。
不幸的是，这是针对Mac用户的，所以Windows用户可以参考下面的文章。
由于我不太了解homebrew和nodebrew，所以我直接下载了npm。
如果想了解更多信息，请参考下面的文章。

当npm和npx可以使用时，尝试创建一个React项目。

在创建项目的目录中切换到板块的代码，并在终端中输入。

npx create-react-app react-basic

然后，在当前路径下创建一个名为”react-basic”的目录，并在其中创建用于开发React应用程序的模板。

如果创建成功，就切换到创建的目录并打开代码编辑器。

C:\Users\yusuk\nodejs-project\react-practice>cd react-basic
C:\Users\yusuk\nodejs-project\react-practice\react-basic>code .

React樣板和環境說明。

・src（源代码）存放开发用文件。放置React组件的JSX文件等在此。
・public 存放静态文件。包括html文件和图片文件等。
・build 存放生产用文件。由npm run build命令生成。

脚本说明

npm start

・可以启动本地服务器来查看React应用。
・支持热加载（文件保存后自动更新）

实际上，改变src文件夹中的App.js文件内容。
当添加了一个p标签并保存文件后，将自动反映如下。

 <p>
    Edit <code>src/App.js</code> and save to reload.
 </p>
 <p>
    私の出身地は埼玉県です。
 </p>

除了现有文件的内容外，还使用p标签添加了一段文字。

npm run build

・生成正式版文件并输出到build目录。
・将src和public的文件合并成一个（打包）。

C:\Users\yusuk\nodejs-project\react-practice\react-basic>npm run build

> react-basic@0.1.0 build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  46.66 kB  build\static\js\main.bed5b056.js
  1.78 kB   build\static\js\787.293c2eec.chunk.js
  541 B     build\static\css\main.073c9b0a.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment


C:\Users\yusuk\nodejs-project\react-practice\react-basic>
 *  History restored 

Microsoft Windows [Version 10.0.22000.1455]
(c) Microsoft Corporation. All righ

在终端上显示，创建了build目录。

npm run eject

当需要更改Babel或Webpack的设置时使用。
由于这是一项复杂的操作，所以除非有必要，否则不要进行。

我刚才总结了以上内容，感谢您的观看。