react - start

vue, angular, react. 先端三大将と呼ばれる技術の中で、最近最も人気のある反応です.始めましょう🤗

開始します。

モダンネットワークは、大量のデータをユーザーに表示、受信、インタラクティブに表示します.この場合、DOMを操作してプログラミングを行うと소스 코드が乱雑になる可能性が高いため、メンテナンスも困難になる.これらの問題を解決するために、多くの技術が現れ、その代表的なものは上述した프론트엔드 3대장である.中でもフェイスブックで作る反応が最も多く使われているので、先端に向かっている人なら一度は学ぶべき技術と言えます!

WHY

なぜ、反応を使うのですか?

1. 많은 데이터를 보여줘야 하는 VIEW를 제작할 때, DOM을 직접 조작하는 것보다 
뛰어난 성능을 나타냄.
2. component 단위로 모듈을 쪼개, 재사용성이 뛰어남.
3. 거대한 커뮤니티가 형성되어 있어, 다양한 라이브러리들이 존재

なぜ、反応以外に他の方法を選ぶのですか?

1. 만드려는 어플리케이션이 적은 데이터를 다룬다면, 굳이 리액트를 선택할 필요가 없다.
2. 리액트는 오직 VIEW만 신경쓰는 라이브러리이기 때문에, 다양한 라이브러리를 사용해보아야 한다.
이러한 절차가 어렵게 느껴지고 시간적 여유가 없다면, 다른 방법을 선택하는 것이 더 나은 루트가 될 수 있다.

Virtual DOM

反応の最も重要な特徴.仮想DOMの前に、DOMとは何かを知っておきましょう.

- DOM

Documentオブジェクトモデルの略.すなわち,オブジェクトを用いて文書構造を表す手法により,文書をXMLまたはHTMLに合成する.

WebブラウザはDOMを使用してJavaScriptとCSSをオブジェクトに適用します.

DOMはツリー型で、特定のノードを検索、変更、削除、または挿入できます.

動的UIは最適化されておらず、JavaScriptを使用してDOM

を動的に作成する.

DOMが変化すると、ブラウザはCSSを再計算し、레이아웃を構成し、페이지をリフレッシュする.この過程では、리소스と多くの時間がかかる.

- Virtual DOM

仮想ドメインを使用すると、実際のDOMにアクセスして操作するのではなく、抽象的なJavaScriptオブジェクトを構成して使用できます.実際のDOMのような単純なコピー
応答で実際のDOMをWebブラウザに更新するためにデータを変更する場合は、次の3つの手順に従います.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링함.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교.
3. 바뀐 부분만 실제 DOM에 적용함.

きどうはんのう

反応項目を作成する手順を整理しましょう.

1. Node.js / npm, yarn 설치
2. 코드 에디터 설치(Visual Studio Code 설치를 추천)
3. Git 설치 (필수는 아니지만, 프로젝트 형상관리를 위에 반필수적)
4. 리액트 프로젝트를 시작할 폴더 생성(ex mkdir test-react)
5. 폴더로 들어가 npm create-react-app . 입력

簡単に整理しましたが、この部分の内容は反応公式サイトでよく整理されていますので、参考にしてください😗

JSX

Javascript拡張構文XMLと同様の外観.コードが번들링の場合、바벨(Webパッケージとバーベルを個別に整理)を使用して通常のJavaScript形式のコードに変換します.

function App() {
  return (
    <div>
    	Hello! <b> There </b>
    </div>
    )
  
  // 위의 코드가 아래 코드로 변환
  
  function App() {
    return React.createElement("div", null, "Hello", React.createElement("b", null, "There");

JSXで記述されたコードは、JavaScriptのみで記述されたコードよりも表示および熟知しやすい.これがJSXを使用している핵심적인の理由です.

の最後の部分

実際、上に整理した内容だけですべての基本的な内容を知ることができ、非常に膨大で、非常に起きられないライブラリです.これからも足りない点はありますが、勉強の反応が面白いので、充実した内容をこのブログにまとめたいと思います.ハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハハ😳