React的基础知识 – React是什么？
React（リアクト）是什么？
这是JavaScript的前端库。
这个社交网站最初是由Facebook公司（现称为Meta公司）以开源的方式开发的。
React16.8的React Hooks的出现使得原本就受欢迎的库更加受到瞩目。
React的特点
jQueryよりもコードがぱっと見で理解しやすく、複雑になりがちな見た目（DOM）の操作もシンプルに設計できる
DOM操作の前に「仮想DOM」で検査して差分のみレンダリングするので、パフォーマンスが良い
コンポーネント指向で部品の再利用やデバックがしやすく、大規模開発に向く
JSX 可以以一种自然的中文表达方式进行转述。
实现上述特点的因素之一是JavaScript的扩展语法JSX。
大致上来说，它结合了HTML和JavaScript的功能，能够使用JavaScript输出类似于HTML的标签。
包含JSX的文件的扩展名是.jsx（如果是TypeScript，则为.tsx）。
建立环境
安装Node.js。
Mac 用户可以参考这篇文章来安装 Node.js 在 Mac 上（来自 Qiita）。
创建项目
您可以使用以下命令轻松构建开发环境。
npx create-react-app APP_NAME
# => Happy hacking! と表示されたら完了
npx是一个可以从npm5.2及更高版本中使用的包管理工具。
创建React应用程序
常用的库进行整合安装的库。
目录结构
根目录内的内容如下所示。
-
- public
-
- src
App.js
index.js
App.css
node_modules
package.json
yarn.lock（yarnの場合）
README.md
公共目录
index.html和favicon图片等被存储在其中。
源代码文件夹
基本上，在此之下您可以编写组件和代码。
通过 index.js 文件，会覆盖 index.html 文件中 id=”root” 的元素，并在 App.js 中进行渲染。
// ここで外部モジュールを読み込み
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// ここで#rootにApp.jsをマウントします
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
引入
请点击这里了解有关JavaScript基本导入和导出的内容。
严格模式
在开发环境中，当出现错误时，React 的严格模式能够提供警告。
请原生中文重新表述以下短语，只需要一种选择：
“マウント”
征服
将React组件（DOM）插入到DOM树中的过程。
渲染
用render()函数渲染由react-dom导入的ReactDOM变量。
ReactDOM.render(reactElement, DOM);
启动服务器
可以使用 npm 或 yarn 启动服务器
npm start
# もしくは
yarn start
# ローカルならhttp://localhost:3000 でアクセス
# startコマンドはpackage.jsonで定義されている
创建组件
我們將在日後的文章中進行介紹！
React钩子
我將在接下來的一篇文章中進行介紹！
满足需求
感谢您一直阅读到最后！
这篇文章是我作为一个刚开始学习编程的初学者，记录每天学习进程的日志。如果您有任何问题、意见或发现错误的指正，请随意留言。
另外，我们也正在寻找一起努力工作、互相请教的伙伴。如果您有兴趣，请通过Twitter等方式与我们联系！
从现在开始，请多多关照。
