由于我没有React的经验，所以我决定从官方教程开始学习，这是第一部分
首先
关于这篇文章
本文是将在React官方网站上学到的有关“学习React”的内容以个人学习记录的形式进行输出。
学习React
我将以向自己在完全不了解React时进行解释的方式来创建本文。
本次主要涉及以下内容：
– 初识组件
– 组件的导入和导出
– 使用JSX编写标记的内容
基本知識
这不是为完全的编程初学者而设计的。它假设你对HTML、CSS和JavaScript有一定的了解，并且写过相关代码。
只要对HTML和CSS的理解是”创建网页的工具”这个程度就足够了。
对于JavaScript来说，只需要了解函数、lambda表达式、import/export和分割赋值等内容就足够了。
关于环境构建
如果你决定亲自动手写React并使其运行起来，那么你就需要做一些准备工作（环境搭建）。
然而，本文不涉及环境搭建的内容。
（虽然将来可能会单独探讨一下）
由于先贤们留下了许多关于详细方法的信息，请自行查阅。
这篇文章对我来说非常有参考价值。
（需要安装VS Code和Docker。）
在Qiita上使用VSCode的Remote Container来构建React开发环境。
React概述
React 是一种 JavaScript 库。
简单来说，React是用于显示Web页面和应用程序的外观（UI）的JavaScript库。
在我看来，JavaScript是一种可以在屏幕上添加动画效果，控制输入表单的语言。所以，我对它可以创建UI感到非常震惊。
React的好处
我认为最大的好处是将部件作为“组件”进行整理，并且可以重新利用。
在React中，通常我们会把Web页面上的按钮、文本和输入框等部件以“组件”的形式进行整合。
这些“组件”可以进行组合和嵌套，并且可以重复使用。
因此，只需提前准备好这些部件，然后将它们组合起来，就可以轻松地创建页面。
我们将稍后更详细地讨论”组件”这个概念。
React实践
首先试着写一下
如果环境配置已经正确完成，应该可以显示以下界面。
※假设是使用create-react-app创建的。
让我们修改这个显示内容。首先，我们要找到一个名为App.js的文件。
这个App.js文件就是构成上述页面的文件。
我将修改App.js如下。
import logo from './logo.svg';
import './App.css';
function App() {
return (
- {/* 元々の記載 */}
+ <h1>Hello World!</h1>
);
}
export default App;
请删除原文中所有的内容，并用h1标签替代。
保存文件后，屏幕上将输出“Hello World！”。
我只編輯了JavaScript文件，但能成功改變畫面顯示。
我有點理解React是用來顯示用戶界面的。
那么，让我们更详细地审视其内容。
正在发生什么？
我只是修改了JavaScript，并成功地更改了用户界面。上述重写需要注意的有两个方面。
1. 文内有类似HTML的内容
在return的括号中，类似于HTML的记法被称为JSX。虽然它看起来像HTML，但在内部被当作JavaScript的对象来处理。虽然JSX有一些规则，但在本文中暂时不提及（会在下一篇文章中解释）。
2. 函数已经被导出
有一个名为App的函数被定义并导出。
它对应于React中的”组件”。
通过在其他文件中导入App.js，可以使用App组件。
需要注意的是，定义函数时函数名必须以大写字母开头。
接下来我们将讨论组件的使用。
组件的使用
然后，我们将按照以下的方式进行描述。
function TestComponent() {
return (
<div>
<p>Fruits</p>
<ol>
<li>apple</li>
<li>banana</li>
<li>orange</li>
</ol>
</div>
);
}
export default TestComponent;
这样就创建好了一个名为TestComponent的组件。
– JSX在return语句中返回。
– 函数名以大写字母开头。
我将确认这两个点。
现在，我们来编辑App.js文件。
import logo from './logo.svg';
import './App.css';
+import TestComponent from './TestComponent.js';
function App() {
return (
+ <div>
<h1>Hello World!</h1>
+ <TestComponent />
+ <TestComponent />
+ </div>
);
}
export default App;
首先，导入我们刚刚导出的TestComponent组件。
这次我们添加了两个实例。
如果我们反复使用组件，可以轻松地增加相同的描述信息。
此外，如果想要增加列表的内容，在html中需要修改两个列表，而在React中只需要修改一个原始组件的js文件。
总结
这一次，我们在Part1中将重点放在React的概述和简单的屏幕显示上进行了描述。
我想你大致上对React是什么样的东西有了直观的理解。
下一次，我们将更深入地探讨JSX和组件的详细信息。
第2部在这里。
参考网站
-
- Reactを学ぶ UI の記述
【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript
※Udemyの講座です。
