React.jsを始めよう

React.js です 柔軟でコンポーネントベース JavaScriptライブラリ 対話型ユーザインタフェースの構築. そうだった Facebookによって作成およびオープンソース化された Dropbox、AirBnB、PayPal、Netflixなど、多くの主要なハイテク企業で使用されています。 Reactは開発者を可能にします データ量の多いアプリを作成する それは苦労せずに更新することができます 必要なコンポーネントだけを再レンダリングする.

反応は からレイヤを表示 MVC ソフトウェア設計パターン, そしてそれは主に DOM操作に焦点を当てています. 最近では誰もがReactについて語っているので、この記事では私たちはあなたがどのようにできるかを見ています。 それを始めます.

Reactをインストール

Reactをインストールすることができます npmパッケージマネージャを使って またはによって 必要なライブラリを手動で追加する あなたのHTMLページに。おすすめです BabelでReactを使う それはあなたがすることができます ECMAScript6構文とJSXを使用する Reactコードに.

あなたがしたい場合は 手動でReactをインストールする, 公式文書は このHTMLファイルを使う. をクリックしてページをダウンロードできます。 ファイル>ページを別名で保存… ブラウザのメニューあなたが必要とするスクリプト（React、React DOM、Babel）もまたダウンロードされます。 react-example_files / フォルダ。次に、次のスクリプトタグを HTML文書のセクション

それらをダウンロードする代わりに、Reactスクリプトを追加することができます。 CDNから 同様に.

また使用することができます 縮小バージョン 上記のJavaScriptファイルのうち、

あなたがむしろしたい場合 npmでReactをインストール, 最善の方法は Reactアプリを作成する GithubリポジトリはFacebook Incubatorによって作成されました - これはReactのドキュメントが推奨するソリューションでもあります。 Reactとは別に、それも Webpack、Babel、Autoprefixer、ESLint、その他の開発者用ツールが含まれています. はじめに、次のCLIコマンドを使用してください。

 npmインストール-g作成 - 反応アプリ作成 - 反応アプリマイアプリcdマイアプリnpm start

準備ができたら、できます 新しいReactアプリにアクセスする に localhost：3000 URL：

もっと読みたいなら Reactのインストール方法, チェックアウト インストールガイドライン ドキュメントの.

ReactとJSX

必須ではありませんが、 JSX構文を使用する あなたのReactアプリで。 JSXの略 JavaScript XML, そしてそれ 通常のJavaScriptに変換. JSXの大きな利点はそれです。 JavaScriptファイルにHTMLを含めることができます, したがって、React要素を定義するのが簡単になります。.

JSXについて知っておくべき最も重要なことは次のとおりです。

そのタグ 小文字で始める （小文字のラクダケース）がレンダリングされます 通常のHTML要素として.
そのタグ 大文字で始める （アッパーキャメルケース）がレンダリングされます Reactコンポーネントとして.
任意のコード 中括弧で囲まれた… 解釈されます 文字通りのJavaScriptとして.

もっと知りたいのなら ReactでJSXを使う方法 このページをドキュメントからチェックしてください。 デフォルトのJSXドキュメント JSXウィキを見てください。.

React要素を作成する

Reactは コンポーネントベースのアーキテクチャ 開発者が作成する 再利用可能なコンポーネント さまざまな問題を解決するために。 Reactコンポーネントはいくつかあるいは多くのもので構成されています 反応要素 それは Reactアプリの最小単位.

以下で、あなたは見ることができます React要素の簡単な例 これにより、HTMLページに[クリックして表示]ボタンが追加されます。 HTMLでは、

コンテナ "myDiv" なるID React要素が設定されている. その中にReact要素を作成します。

   React要素を ReactDOM.render（） 方法 どっち 2つの必須パラメータを取ります, の 反応要素 （）と そのコンテナ （document.getElementById（ 'myDiv'））もっと読むことができます React要素のしくみ の中に “レンダリング要素” ドキュメントのセクション.
 コンポーネントを作成する
 反応コンポーネント あります 再利用可能な独立したUIユニット データを簡単に更新できます。コンポーネントは、1つ以上のReact要素で構成できます。. 小道具 あります 任意の入力 あなたはコンポーネントにデータを渡すために使うことができます。 ReactコンポーネントはJavaScript関数と同じように機能します。呼び出されるたびに、 ある種の出力を生成する.
 どちらでも使えます 古典的な関数の構文 または新しい ES6クラスの構文 に Reactコンポーネントを定義する. この記事では、BabelがECMAScript 6を使用できるようにするので、後者を使用します。ES6を使用せずにコンポーネントを作成する方法に興味がある場合は、ドキュメントのComponents and Propsページをご覧ください。.
 下に、あなたは見ることができます 単純なReactコンポーネント 例として作成します。これは、ユーザーがサイトにログインした後に表示される基本的な通知です。 3つのデータがあります ケースからケースへの変更：ユーザーの名前、メッセージの数、そして通知の数、これらを渡します 小道具として.
  
各ReactコンポーネントはJavaScriptクラスです。 を拡張 React.Component 基本クラス. 私たちのコンポーネントはと呼ばれます 統計 それはユーザーに基本的な統計を提供するので。まず、私たち を作成 統計 クラス とともに クラスStatsはReact.Component …を拡張します 構文、それから我々 画面にレンダリングする を呼び出すことによって ReactDOM.render（） メソッド（前のセクションで後者を既に使用しました）.
  クラスStatsはReact.Componentを拡張したものです。  こんにちはthis.props.nameさん、this.props.notifications新しい通知とthis.props.messages新しいメッセージがあります. 
 ; ReactDOM.render（ , document.getElementById（ "myStats"））; 
 の最初の引数 ReactDOM.render（） メソッドは Reactコンポーネントの名前 （）、 その小道具 （名, 通知, そして メッセージ）その値で。プロップの値を宣言すると、文字列は次のようになります。 引用符で囲まれている （のように "ジョン・ドウ"）と数値 中括弧内 （のように 3）.
 JavaScriptのため、 中古 クラス名 の代わりに クラス HTMLタグにクラス属性を渡すためには（className = "概要"）.
 一致するHTMLページは次のとおりです。
          
    
 Reactのドキュメントには、他にもたくさんの素晴らしい例があります。 Reactコンポーネントの構築と管理方法, そして 小道具について他に知っておくべきこと.
 参考文献
 Reactと共に、Facebookは紹介しました 新しい種類のフレームワーク フロントエンド開発に MV *デザインパターンに挑戦. それがどのように機能するのか、そしてそれを使ってできることとできないことをよりよく理解したいのであれば、役立つ記事がいくつかあります。
 上のFacebookのブログ投稿 なぜ彼らはReactを作ったのか.
 Andrew Rayのすばらしいブログ記事 Reactの善と悪に.
 共著者 ReactとAngularJSの比較.
 FreeCodeCampのかどうかに関する部分 MVCはフロントエンドで死んでいます.
 に関するHackerNoonの記事 React関連のパフォーマンスを最適化する方法.