【React】通过入门学习React，我所得到的经验
首先
我是一名在SIer公司工作的工程师，作为新毕业生已经工作了五年，并在Web开发领域担任工程师的角色。
最近我正在学习React，并且将我所学到的知识整理了一下。
希望对于想要开始学习React的人或已经开始学习的人有所帮助。
本篇文章的目标读者
-
- ES6をある程度学んで、これからReactを始めようとしている方
-
- すでに学び始めているReact初学者
- Reactの基礎について振り返りたい方
這篇文章所沒有提及的事情。
-
- そもそもReactとは？などの概要
- ルーティング、TypeScript等応用的な内容
抱歉
为了加深对所学内容的理解，我会以自己的方式来进行语言表达，但可能会包含错误的内容。
如果您发现了错误，希望您能友善地指出来。
（前提）关于ES6之类的东西
在学习ES6编码和JS框架之前，总结了在以下文章中需要理解的重要事项。建议您一并阅读。
搭建React开发环境
以下将分为两种情况，分别说明React开发环境的构建方法：
1. 在本地电脑上进行开发
2. 在Web浏览器上进行开发
1. 在本地个人电脑上进行开发。
前提 tí)
-
- MacOS
-
- HomebrewとNodeはインストール済み
- ターミナルの基本的な操作方法を理解している
流程
1-1. 创建任意的React项目
执行以下命令。
npx create-react-app hello-react
你可以根据喜好来命名。
创建后，hello-react文件夹的结构如下。
hello-react/
├─ node_modules/
├─ public/
├─ src/
├─ .gitignore
├─ package-lock.json
├─ package.json
├─ README.md
1-2. 构建hello-react
执行以下命令。
npm run build
确认以下消息的出现。
Creating an optimized production build...
Compiled successfully.
1-3. 启动hello-react项目。
执行以下命令。
npm start
2. 在网页浏览器上进行开发。
前提 tí)
(Note: “前提” in Chinese is already a native term, so there is no need for paraphrasing.)
- Webブラウザが操作できる
操作步骤
2-1. 访问CodeSandbox
我将使用一个名为CodeSandbox的服务来在浏览器上进行JavaScript开发。
2-2. 进行新的注册或登录
请在页面顶部的”创建账号”或”登录”处进行新注册或登录。
如果您有GitHub、Google或Apple账号，可以使用SSO登录。
从模板开始学习React。
环境搭建的总结
如果使用npx的方法（1.），您需要安装Homebrew和Node.js，因为在实际工作中，有时需要使用命令来管理软件包，所以这种方法是实践性很强的。
然而，如果您只是想尝试一下React，使用CodeSandbox的方法（2.）就足够了。
当然，两种方法都掌握也是很好的。
JSX语法
使用React时，我们可以使用JSX语法进行编码。
以下是使用JSX语法编码的示例。
// JSファイルでReactを使うためのおまじない
import React from 'react';
// ReactでDOM操作をするための設定
import ReactDom from 'react-dom';
// Javascriptなのでアロー関数が使える
// 複数のタグを返す場合は、必ず１つのタグで囲まないといけない
const App = () => {
return (
<>
<h1>Hello, React!!</h1>
</>
);
};
// rootというIDを持つ要素にApp関数の返り値をレンダリングする
ReactDom.render(<App />, document.getElementById('root'));
组件化
如果希望在其他地方使用先前提及的App函数的结果，可以按照屏幕组件将文件进行分割。
组件化的方法
制作组件的文件
为了将前文提到的App函数组件化，这次我们将创建一个App.jsx文件。
（尽管扩展名.js也可以，但从文件管理的角度出发，使用React编程的话，.jsx似乎更好）。
→ 必须使用帕斯卡命名规则！
用App.js编写组件的内容
import React from 'react';
const App = () => {
return (
<>
<h1>Hello, React!!</h1>
</>
);
};
// App関数を他のファイルで使えるようにするための設定
export default App;
在index.js中加载App组件。
import React from 'react';
import ReactDom from 'react-dom';
// Appコンポーネントをインポートする
import App from './App';
ReactDom.render(<App />, document.getElementById('root'));
道具
Props是传递给组件的类似于参数的东西。
假设有一个组件来显示消息，
如果想要根据消息类型改变背景颜色，或者根据条件将相应的Props传递给组件。
这是一个很好理解的Qiita的Markdown示例。
:::note info
インフォメーション
infoは省略可能です。
:::
:::note warn
警告
○○に注意してください。
:::
:::note alert
より強い警告
○○しないでください。
:::
→ 这些单词 “info”、”warn”、”alert” 在 “note” 后面改变颜色和图标，这些在 “note” 后面指定的单词相当于 React 中的 Props。
代碼範例
假设有一个组件Message，它接收props中的文字颜色color和字符串message。在调用组件的一侧，可以按照以下方式实现：
// import文等は省略
<Message color="red" message="ここに表示したいメッセージを入力するよ" />
在组件的一侧，实现如下
const Message = (props) => {
// propsというオブジェクトの中から、呼び出し側で指定した属性をキーとして値を参照できる
const messageStyle = {
color: props.color
}
// JSX記法ではHTMLタグ内でJavascriptを使う場合、
// {}で囲う必要がある。
return <p style={ messageStyle }>{ props.message }</p>
};
陈述
State指的是每个组件各自所持有的状态。
每当State发生变化，组件都会重新渲染。
代码示例
要使用state，需要导入useState。
import React, { useState } from 'react';
在这里，我们要考虑的是每次按下按钮时数字从0逐一增加1的功能。
import React, { useState } from 'react';
const Addnumber = () => {
// num : state
// setNum : stateを更新する関数名
// useStateの引数はstateの初期値
const [num, setNumber] = useState(0);
// buttonタグが押された時、呼び出される関数
// numというstateを1加算して、setNumに渡すことでnumが更新される。
const onClickCountUp = () => {
setNum(num + 1);
};
return(
<>
<button onClick={ onClickCountUp }>ボタン</button>
<p>{ num }</p>
</>
);
}
影响
Effect（useEffect）是指在渲染结果反映在屏幕上后执行的函数。
代码示例 (Code example)
useEffect(() => {
console.log("useEffectが実行されました。");
});
在上述代码示例中，当所有组件都被渲染时，必定会执行的是useEffect。
有时候我们只想在某个变量发生改变时才执行一次。对于这种情况，useEffect 的使用方法如下所示。
// valueという変数が変更されたときに処理されるuseEffect
useEffect(() => {
console.log("valueが変更されました。");
},[value]);
总结起来就是这样的。
最后
在这篇文章中，我总结了有关React的基础知识。虽然这只是基础中的一小部分，如果有什么其他重要的内容，请在评论中告诉我（我会从中学到很多）。希望对正在学习React的人有所帮助。
请参考
