React.js 14 Web開発者向けのツールとリソース

の React.jsの人気 されています 急成長 Facebookが2013年に最初にライブラリをリリースして以来。 5番目に頻繁に出演するオープンソースプロジェクト また、React開発者向けの求人広告も急増しています。反応は 軽量JavaScriptフレームワーク にとって ユーザインタフェースの構築 - 最も有名な例はFacebookとInstagramです。.

リアクトオファー MVCフレームワークの代替, AngularやBackboneなど、 より簡単な構造 そして パフォーマンスの最適化に焦点を当てる. Reactは今後数年間で確実にWeb開発の展望を定義することになるので、この記事では私たちはあなたに以下を提供したいと思います 開発者ツールキット あなたがReact開発の領域に足を踏み入れるのを助けるために.

Facebookの公式React.jsドキュメント

Facebookは開発者に 詳細なドキュメント に Reactの主な概念. ドキュメント以外にも、ここで素晴らしいチュートリアルを見つけることができます。 インタラクティブな三目並べゲームの作り方 Reactを使って ディスカッションフォーラム React開発者向けとして docsはオープンソースです, 必要に応じて編集することもできます.

React.js Githubリポジトリ

React Githubリポジトリでは、次のことができます。 Reactのソースコードをチェックする あなたがそれを必要とする時はいつでも。現在の開発状況を把握したい場合は、次のサイトもご覧ください。 問題, の マイルストーン, そしてその 最新のプルリクエスト. あなたが動けなくなった場合、それはまた勉強することをお勧めすることができます トラブルシューティングガイド ちょっと.

ハローワールドスターターコード

あなたがReactをさっと試してみたいのなら、これで始めることができます。 “こんにちは世界” インタラクティブデモ Codepenで。それは含んでいます 必要なすべての資産 そしてその スターターコード 同様に。 Babelもオンになっているので、あなたは使うことができます ECMAScript 6とJSX構文の両方. このペンをフォークするだけで、環境全体を自分で設定しなくても先に進むことができます。.

リアクトスターターキット

の リアクトスターターキット です 同形Webアプリの定型文 から成っている Node.js、Express、GraphQL、React, そして、次のような一握りのWeb開発ツール Webpack、バベル, そして ブラウザ同期. それはあなたに提供します Facebookが使用しているのと同じフロントエンドスタック そしてあなたがジャンプすることができます フルスタックReact開発 あまり手間をかけずに.

ReactCSS

ReactCSS それを可能にします JavaScriptにインラインCSSスタイルを追加する. ReactCSSは、React、Redux、React Native（Reactを使用してネイティブモバイルアプリケーションを構築するためのフレームワーク）、自動プレフィックス、ホバー、擬似要素、およびメディアクエリをサポートしています。早くすることができます npmでインストール.

React JSFiddle統合（JSXの有無にかかわらず）

これは素晴らしいです オンライン遊び場 あなたがReactを練習し始めることができる場所が欲しいなら。それは JSFiddleでホストされています, そして持っています 2つのバージョン： JSXのもの そして JSXなしのもの, どちらか快適な方を選んでください.

Reactスタイルガイドジェネレータ

早くすることができます スタイルガイドを作成する この使いやすいReactプロジェクトのために Reactスタイルガイドジェネレータ. あなただけが必要です ちょっとしたドキュメントを追加する あなたのファイルに、そしてジェネレータが残りの面倒を見る。ツールには詳細なREADMEファイルが付属しています.

Belle構成可能なReactコンポーネント

ベル です リアクトコンポーネントライブラリ それはあなたを装備しています Reactコンポーネントのセット 以下のように、プロジェクトで使用したいと思うかもしれません。 “ボタン”, “カード”, “スピナー”, “トグル”, “評価”, さまざまなフォームコンポーネントなどコンポーネントが動作 モバイルとデスクトップの両方で, そして彼らは カスタマイズ可能 同様に.

ベルは 唯一のReactコンポーネントライブラリではありません そこには、Githubに他にも素晴らしいものがあります。 ウィジェットを反応させる または エレメンタル.

React Storybook UI開発環境

他の人のコンポーネントライブラリを使いたくないが あなた自身のものを作りたい, 試してみる価値がある リアクトストーリーブック これは Reactコンポーネント用のUI開発環境. ストーリーブックはあなたをすることができます インタラクティブにコンポーネントを開発する. それは持っています 複雑な文書, そして、次のことができます 開発を始める の中に ストーリーブックハブ.

Reactブートストラップ

Reactブートストラップ Reactを人気のあるものと統合する ブートストラップ3フロントエンドフレームワーク. その開発者は基本的にReact.jsでBootstrapコンポーネントを再構築しました。これにより、 クリーナーコードベース より少ない繰り返しで、そして より高い性能.

リポジトリは活発に開発されているので、APIは将来変更されるでしょう。のために 開発の現状, チェックアウト プロジェクトのロードマップ.

Chrome向けReact開発者ツール

Chrome用のReact DevTools Chromeデベロッパーツールの拡張機能です。 コンポーネントの階層を調べる. そうだった Facebookによって作成された 開発者コミュニティが新しいReactアプリケーションを構築するのを支援する努力をしています。簡単にできます Chrome拡張機能として追加する あなたのブラウザに。あなたは閲覧することができます 所属するソースコード Githubでも.

Firefox用のReact開発者ツール

これは Firefoxのバージョン 同じの Facebookが作成したReact開発者ツール. 追加するだけ Firefoxブラウザのアドオンとして, Reactアプリの階層ツリーをすぐに調べ始める.

Atom用のReact.jsパッケージ

あなたは付け加えられます あなたのAtomコードエディタへのサポートをリアクトする このAtom Reactパッケージと一緒に。付属しています 構文の強調表示、オートコンプリート、コードスニペット、HTMLからJSXへの変換, そしてReact開発を非常に容易にすることができるその他の便利な機能.

React.js基礎 - 無料のオンラインコース

あなたがすることができる多くの優れた＆かなり安価なコースがあります React開発を学ぶ, しかしあなたはこれを登録することができます React.jsの基礎 完全無料のオンラインコース。それはで構成されています 12レッスン, で始まる Reactの基本, そして 素敵なカリキュラム それはすべての重要なことを網羅しています.