React的概述

React公式是一款专为JavaScript开发的UI组件构建库，由Facebook开发。这个库被许多知名企业如Facebook、Yahoo!、Uber、Airbnb、Slack和Netflix采用，并有望成为未来的事实标准。

三个概念 gè

• Declarative

• 条件と結果が明確にコードに記載される。JavaScriptと異なる点である。従来の命令型のように、欲しいUIを頭の中で一度整理して、main要素を作って次はinput要素を作って初期値にfooを入れて、、という命令に変換しなくても、「アプリの内部状態がこの状態だったら、この見た目にする！」と宣言するように実装できる。

• Component-Based

• アプリケーションの構成要素を小さい部品(コンポーネント)の集合として考えて設計し、機能を小さい部品に分割して持たせる。部品化することで保守性を高め、再利用できるようになる。

• Learn Once, Write Anywhere

新しい機能を追加しやすいため、開発の途中から利用されることを想定して開発できる。また、モバイルアプリ開発ではReact Native、VR開発ではReact VRフレームワークで開発することができるなど、拡張性が高い。

特點

• レンダリングが高速

• DOM（Document Of Model）とはHTMLにアクセスする窓口の役割を果たす。DOMを生成してHTML構造や見た目を作ったりコンテンツを変更することができる。Reactでは仮想DOMという技術で、Webページ内の一部を更新したいときに全てページをまるっと更新するのではなく、更新された一部のみを変更することができる。パフォーマンスが良いため、SPA（Single Page Application）に必要な高速な動作速度を実現できる。

• 大規模なアプリケーション管理が容易

• 多数のコンポーネントの再利用化ができ、管理がしやすい。レンダリング（コンポーネント指向の機能）とその他の機能も別々のモジュールとして開発されている。

• 可読性が高い

• JSXを使用することでHTMLを書いているかのようにReact内に組み込むことができる。更にTypeScriptを使えば厳密に型チェックも可能。

• 流行のUIパーツが提供されている

google標準で使われているMaterial-UI を始め、ButtonやForm、Table等の良い感じのUIパーツが提供されていて、Reactコンポーネントとして簡単にインポートして扱える。

准备开发环境

下载最新版本的Node.js。

请从以下页面下载最新的LTS（长期支持）版本的Node.js。

在终端中检查Node的版本。

$ node -v 

安装yarn

使用Node.js的包管理器yarn进行安装。
与Node.js一同下载的npm相比，yarn更快速和可靠性更高。
通过使用这些包管理器，可以解决依赖关系。

$ npm install --global yarn
$ yarn --version

以下是关于包管理系统的参考【JavaScript·React】基本知识。

主要功能
1. 更新和搜索本地环境的软件包
2. 安装和删除软件包
3. 解决依赖关系，自动安装所需的依赖包
4. 编写配置文件，实现1-3的自动化。

3. 为了完成作业而创建Github代码库。

为了作业而创建一个代码库，并在本地进行git克隆。
GitHub

如果将sample.git克隆到本地的playground目录中，请执行以下操作：

$ git clone sample.git playground

安装 create-react-app

安装Facebook开发的React脚手架create-react-app，这样就解决了以前需要手动安装各种包例如Bubble和webpack的问题。

$ yarn global add create-react-app

使用npm5.2或更高版本，只要有Node.js，就可以通过以下命令一次完成create-react-app的安装和playground环境的搭建！?‍♂️

 npx create-react-app playground

使用create-react-app会创建以下目录。

src:コンポーネントを作るJSファイル置き場

src/App.jsを変更すると画面が切り替わる
src/index.jsでDOMを使ってsrc/App.jsを呼び出し、root要素に置き換えている

public：HTMLファイルや設定置き場

public/index.jsの

确认并完成，验证”hello world”的显示！

如果将GitHub存储库克隆到名为playground的目录中。

$ create-react-app  ../playground
$ yarn run start