41. Installation — React
【所要時間】
1時間21分(2018年8月22日)
【概要】
Reactのインストール
最近、最も利用されているJavaScriptのフレームワークについて学んでいきます。
【要約・学んだこと】
Reactとは、ユーザーインターフェースを構築するためのJavaScript libraryのことだ。
Try React
Online Playgrounds
Reactのオンラインコードプレイグラウンドが CodePen かCodeSandbox だ。また、ここからもダウンロードできる。download this HTML file
Add React to a Website
下記のリンクからHTMLページにReactを追加する方法がわかる。
add React to an HTML page in one minute
Add React in One Minute
Step 1: Add a DOM Container to the HTML
まずHTMLページを開く。Reactで表示したいスポットに空の<div>tagを加える。この<div>は独自のid HTML attributeを与える。これはJSコードからそれを探し、そのコードの中にあるReactコンポーネントを表示する。
Tip: <div>は<body>tagの内側ならどこでも置くことができる。1ページに必要なだけ独立したDOM containerを持つことができる。通常は空だ。そしてReactはDOMコンテナ内の既存のコンテンツを置き換える。
Step 2: Add the Script Tags
</body>タグの直前に3つの<script>tagをHTMLページに追加する。
最初の2つはReactをロードするタグで、3つ目がコンポーネントコードをロードする。
Step 3: Create a React Component
like_button.jsと呼ばれるファイルをHTMLページのために作る。
その後、like_button.jsにこのコードを追加。
この2行のコードが最初のステップでHTMLに加えた<div>で、”Like” ボタンの中にReactコンポーネントを表示する。
これだけでウェブサイトにReactコンポーネントを追加できた。
Likeボタンをおすと”You liked this”と表示が変わる。
Tip: Minify JavaScript for Production
プロダクションにウェブサイトをdeployする前に、無制限のJSがユーザーページを大幅に遅くする可能性があることに注意する。
すでにアプリのスクリプトを縮小したなら、deployされたHTMLがproduction.min.jsで終わるReactのバージョンをロードすることを保証し、サイトは実稼動状態になる。
もし縮小化のステップがないなら、セットアップの方法はこちらになる。here’s one way to set it up.
Optional: Try React with JSX
ReactはJSXを代わりに使う方法もある。 JSX
Create a New React App
Reactツールチェーンは下記のようなタスクに役立つ。
- たくさんのファイルとコンポーネントへのスケーリング
- npmからサードーパーティライブラリを使用する。
- ありがちな間違いを早期に発見する。
- 開発中のCSSとJSのライブ編集。
- 生産のための生産量の最適化。
このページで推奨されるツールチェーンは設定が必要ない。
Recommended Toolchains
- If you’re learning React or creating a new single-page app, use Create React App.
- If you’re building a server-rendered website with Node.js, try Next.js.
- If you’re building a static content-oriented website, try Gatsby.
- If you’re building a component library or integrating with an existing codebase, try More Flexible Toolchains.
Create React App
Create React App はReactを学ぶのに快適な環境で、Reactの新しいsingle-page applicationを作り始めるには最適な方法だ。
開発環境を設定し、最新のJS機能を利用できるようにする。そしてよい開発経験を提供し、プロダクションのためのアプリを最適化する。マシンに>= 6 and npm >= 5.2 が必要。下記のコマンドでプロジェクトを作成する。
npx create-react-app my-app
cd my-app
npm start1行目のnpxはtypoではない。package runner tool that comes with npm 5.2+.だ。
Create React Appはバックエンドロジックやデータベースを扱わない。フロントエンドパイプラインを作るだけだ。そのためどのバックエンドでも使うことができる。Babel とwebpack を使うが、特に知る必要はない。
プロダクションにdeployする準備ができたら、npm run buildの実行で、build folderのアプリの最適化されたbuildを作る。詳しくはfrom its README and the User Guide.
Next.js
Next.js はReactで構築されたstaticでサーバーレンダリングアプリのための軽量なフレームワークだ。スタイリングとルーティングのソリューションが含まれていて、Node.jsをサーバー環境として使っていることが想定されている。
Gatsby
Gatsby はstatic ウェブサイトをReactで作るのに最適な方法だ。Reactコンポーネントを使うことができるが、ロード時間を素早くするために、プリレンダリングされたHTMLとCSSを出力する。
More Flexible Toolchains
下記のツールチェーンはより殉難な選択肢を与える。
- Neutrino combines the power of webpack with the simplicity of presets, and includes a preset for React apps and React components.
- nwb is particularly great for publishing React components for npm. It can be used for creating React apps, too.
- Parcel is a fast, zero configuration web application bundler that works with React.
- Razzle is a server-rendering framework that doesn’t require any configuration, but offers more flexibility than Next.js.
Creating a Toolchain from Scratch
JSはツールチェーンを構築する。
- package manager
Yarn or npm サードパーティのたくさんのエコシステムを使うことができ、それらのインストールやアップデートが簡単。 - bundler
webpack or Parcel モジュラーコードを書くことができ、それを最適化されたロードタイムの小さなパッケージに束ねることができる。 - compiler
Babel 古いブラウザで動作する最新のJSコードを書くことができる。
Create a New React App
Reactのプロジェクトを始めるときは、シンプルなHTML pageにscriptタグを使うのが最も良い。
a simple HTML page with script tags
Learn React
JavaScript Resources
ReactのドキュメントはJS言語でのプログラミングと似ている。エキスパートである必要はないが、ReactとJSを同時に学ぶのは難しい。
【わからなかったこと】
特になし
【感想】
まだピンとこないが、一見JSとHTMLの記述を混ぜたようなコードを書く印象で、これを使うことで楽になるようだ。