あなたがreactjsを開始する前にについて学ぶ必要がある10のもの

Millions of developers use ReactJS. If you are new to React development or willing to start it, this article might help you. Here are my top 10 things you should know definitely about react.

1ライブラリやフレームワークを反応させるか?
それは初心者の間でよくある質問だ.むしろ私はいくつかの人々が反応しているフレームワークだと思う人を見てきた.
レコードのために、それは図書館です.フレームワークは理論的にはライブラリと比較して大きなものです.ライブラリがフレームワークに比べて柔軟になります.あなたはそれ以上のコントロールを持っています.
反応は、角度、vue、laravel、またはdjangoのようなフレームワークより比較的小さいです.

2 . ReactJSとは何か?
フロントエンドの開発のためのオープンソースのJavaScriptライブラリです.それはFacebookによって作成され、開発されました.Reacrtjsは非常に最近、単一のページのWebアプリケーションを作成するために人気があります.

なぜ反応するのか?
他のフレームワークと比較して、より良いパフォーマンスとより良いユーザー経験を提供します.これは、フロントエンドの開発者のための痛みの多くを減らす再利用可能なコンポーネントを使用します.それは速く、SEOフレンドリーです.ReactJs迅速なレンダリングを保証します.また、学ぶことは簡単です.
もう一つのエキサイティングなことは、反応ネイティブを使用して、AndroidとIOSのアプリケーション開発の両方を使用することができますです.reactjsに向かう前に、私はAndroidアプリ開発に情熱的でした.この機能は、私はreactjsを学ぶために最も興奮した.

日本学術振興会
反応はJSXに我々を紹介します.JSXはJavaScriptの構文拡張です.JavaScriptコード内でJSXを使用してHTMLを書くことができます.

const element = <h1>ROXANNE</h1>;

別のファイルにマークアップと論理を書く代わりに、反応はJSXに我々を紹介します.ブラウザーはJSXを理解しません、JSXをブラウザー理解できるJSに翻訳するために、我々はトランスポーターを必要とします.例えばバベルと転写物.
詳しくは下記の記事を読んでください
https://reactjs.org/docs/introducing-jsx.html

仮想DOM
以前のフロントエンドの開発経験があれば、DOM(Document Object Model)という単語を聞くことができます.DOMはツリー構造としてHTMLを扱います.JSを使用してDOMを変更できます.DOM内で何かを変更すると、ツリー構造全体が更新されます.大規模なアプリケーションで動作している場合は、適切な時間を消費することができます.
あなたがここに興味があるならば、あなたはDOMについてより多くを学ぶことができます
反応は、仮想DOMに我々を紹介します.V DOMで変更が発生するたびにDOM全体が更新されません.以前のバージョンDOMとの変更をDiffingアルゴリズムを使用して比較します.それから、それはUIを更新するために和解プロセスを適用します.それは私の意見でreactjsのクールな機能の一つです.以下のURLから、このことについて詳しく説明します.
http://taligarsiel.com/Projects/howbrowserswork1.htm#Parsing_general
https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e
コンポーネント
反応アプリケーションはすべて私の目のコンポーネントについてです.HTML要素として使用できる再利用可能なコンポーネントを作成することができます.reactjsで2種類のコンポーネントを使用できます.機能とクラスベース.
クラスベースのコンポーネントは少し時代遅れです.あなたがreactjsを学びたいならば、私はあなたが最初に機能的な構成要素を学ぶことを提案します.

function Welcome() {
  return <h1>Hello, How you doin?</h1>;
}

function App() {
  return (
    <div>
      <Welcome/>
      <Welcome/>
      <Welcome/>
    </div>
  );
}

ここでは歓迎3回使用されているコンポーネントです.このようなコンポーネントの多くにあなたの反応アプリケーションを分割することができます.以下のリンクからこれについての明確なアイデアを得ることができます.

https://reactjs.org/docs/components-and-props.html
柱
HTML要素には、タイトル、プレースホルダなどのようないくつかのプロパティを持つことができます.それは小道具と呼ばれます.HTMLプロパティを宣言するように、コンポーネントを宣言しながらデータを渡すことができます.例えば、

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Michael" />
      <Welcome name="Dwight" />
      <Welcome name="Jim" />
    </div>
  );
}

ここでは、HTMLプロパティを渡すように、各コンポーネントごとに異なる名前を渡します.小道具を使用すると、UIを構築するために異なるデータをコンポーネントに送信できます.
小道具についての詳細は、このURLに従ってください

フック
フックは、“フックに”機能を反応させる特別な機能です.たとえば、有効なコンポーネントを使用したい場合は、reactjsアプリケーションをフックします.
あなたはフックの詳細については、以下の記事に従うことができます.
https://reactjs.org/docs/components-and-props.html

現状
状態は、UIを変更するための開発者のための痛みの多くを減らす特別な反応機能です.ここでは簡単にusestate法を論じた.まず、次のコードを覗いてみてください

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

USENTフックは値のペアを返します:現在の状態とそれを更新する関数.クラスのコンポーネントでこれを使用します.状態.カウントとこれ.同様の理由でsetstate.状態の値はsetStateメソッドを使用して更新できます.以下のリンクに従ってください.
https://reactjs.org/docs/hooks-state.html
今日はこれが一番だと思います.これは私の最初の記事
書くことを続けるように私を奮起させてください.お読みいただきありがとうございます
ハッピーコーディング!