はんのう

(react、react.js、reactJS)は、JavaScriptオープンソースライブラリであり、ユーザーインタフェースを作成するために使用されます.

応答は、単一ページアプリケーション(SPA)またはモバイルアプリケーションの開発に使用することができる.

の大規模または複雑な応答アプリケーション開発では、通常、ルーティング、API通信などの機能が必要であり、応答は基本的に提供されないため、追加のライブラリ(npm install react-router-dom)を使用する必要がある.
Facebookと個別開発者および企業共同体が維持する.

最初に反応した時にcreateClassを使ってClassに更新した後、Hooksが最新に更新されました.今でもclassをよく使うので、hooksと一緒に勉強したほうがいいです.

1.反応の3つの特性を理解する

*宣言:コードを表示し、実際の機能を想像する宣言ガイド.1つのファイルで明示的に作成できるプログラミング

コンポーネントベース:1つの機能を実現するために、複数の(HTML,JS)コードに基づくコンポーネントを開発する.独立して実行します.これらの構成部品を再利用可能
各機能の実行そのものに集中できるので、障害が発生した場合はその機能だけを見ればよい.

汎用性:JavaScript環境の任意の場所で使用できる、コンテンツの一部を修復するライブラリです.
DOMと異なり、CSSやJSX構文を使うだけでWebアプリケーションを開発できます.

1つのコンポーネントを実現するために必要なファイルが少なくなり、1つのコンポーネントが一目で見えます.

フェイスブックで管理、安定、最も有名で、反応帳で携帯電話を開発することもできます.

2.JSX

JSXとは何ですか。

jsの構文を拡張し,この構文を用いて反応元素を作成できる.
ただし,直ちに使用することはできず,ブラウザが理解できるjsコードを使用しなければならない.
babel:jsxをjavascriptにコンパイルして読み取ることができ、コンパイルされたjsを画面に読み込んで表示します.
また、HTMLファイルを別途作成する必要はなく、jsファイルに注釈を付けてcss効果を提供するだけなので、HTMLに関連付けられたDOM機能は不要です.

jsxの作成ルール

1. 하나의 엘리먼트 안에 모든 엘리먼트가 들어가야 한다.
2. 클래스명은 className 으로 지칭한다.
* html의 속성은 class가 아닌, 자바스크립트의 class로 받아들이기 때문이다.
3. 자바스크립트 표현식을 사용할 땐 {} 중괄호를 넣어준다.
 * dom이 필요없다.
4. 함수 컴포넌트는 대문자로 시작해야 한다.
5. 조건부 렌더링에는 if문이 올 수 없다. 삼항연산자만 사용!

function Example() {
	<div id = container>
    
    	<header>
        	<nav> {jsx}는 </nav> // jsx라는 js식이 위에 있는 것. 텍스트가 아니다.
        </header>
        <section>
        	<ul>
            	<li>무조건 큰 엘리먼트 안에</li>
                <li>모든 엘리먼트가 들어가야 한다.</li>
            </ul>
         </section>
         <div>
         	{(react === 'love') ? true : false}
         </div>
         <footer>
         	<p className = 'classname'> 클래스명은 </p>
            <p className = 'classname'> 클래스네임으로 작성해준다. </p>
       	</footer>
        
        </div>
     }   

Map()関数を使用して、

以上のhtml領域を表示します.
反応器のmapにはkey属性を付けなければなりません.
keyプロパティの位置はmapメソッドの内部の最初の領域に配置されます.

3.反応素子

コンポーネントは機能を実現します.
様々なコードを同梱したポケットの役割を果たしている.
素子はそれぞれ独立した機能を有しているので、これらの素子を組み合わせて完全なWeb/APpを作成することができ、今後のメンテナンスにおいて問題のある素子が動作できるので、反応器の核心機能と考えられる.

4. Life Cycle

すべての構成部品がブラウザに表示、更新、または消去されると、特定のメソッドを使用してこのメソッドが呼び出されます.
(1)実装:構成部品インスタンスを作成してDOMに挿入するときに順番に呼び出す

constructor()

render()

componentDidMount()

(2)更新:構成部品の再レンダリング時に順番に呼び出す

render()

componentDidUpdate()

(3)アンインストール:DOMから構成部品を削除するときに呼び出す

componentWillUnmount()

(4)エラー処理

componentDidCatch()