01. Installation
Reactは柔軟性があり、さまざまなプロジェクトで使用できます。新しいアプリケーションを作成することはもちろん、
書き直しをせずに既存のコードベースに徐々に導入することもできます。
Reactに興味があれば、CodePenがあります。
このHello Worldのサンプルコードから始めてみてください。
何もインストールする必要はありません。コードを修正し、それが機能するかどうかを確認できます。
独自のテキストエディタを使用する場合は、このHTMLファイルをダウンロードして編集することもできますあなたのブラウザのローカルファイルシステムからそれを開きます。それは実行時のコード変換が遅いため、
本番環境では使用しないでください。
Create React App is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses webpack, Babel and ESLint under the hood, but configures them for you.
You don't need to rewrite your app to start using React.
We recommend adding React to a small part of your application, such as an individual widget, so you can see if it works well for your use case.
While React can be used without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of:
- A package manager, such as Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
- A bundler, such as webpack or Browserify. It lets you write modular code and bundle it together into small packages to optimize load time.
- A compiler such as Babel. It lets you write modern JavaScript code that still works in older browsers.
We recommend using Yarn or npm for managing front-end dependencies. If you're new to package managers, the Yarn documentation is a good place to get started.
To install React with Yarn, run:
yarn init
yarn add react react-dom
To install React with npm, run:
npm init
npm install --save react react-dom
Both Yarn and npm download packages from the npm registry.
We recommend using React with Babel to let you use ES6 and JSX in your JavaScript code. ES6 is a set of modern JavaScript features that make development easier, and JSX is an extension to the JavaScript language that works nicely with React.
The Babel setup instructions explain how to configure Babel in many different build environments. Make sure you install babel-preset-react
and babel-preset-es2015
and enable them in your .babelrc
configuration, and you're good to go.
We recommend using a bundler like webpack or Browserify so you can write modular code and bundle it together into small packages to optimize load time.
The smallest React example looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
This code renders into a DOM element with the id of root
so you need <div id="root"></div>
somewhere in your HTML file.
Similarly, you can render a React component inside a DOM element somewhere inside your existing app written with any other JavaScript UI library.
By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app.
To create an optimized production build with Brunch, just add the -p
flag to the build command. See the Brunch docs for more details.
Run Browserify with NODE_ENV
environment variable set to production
and use UglifyJS as the last build step so that development-only code gets stripped out.
If you use Create React App, npm run build
will create an optimized build of your app in the build
folder.
Use rollup-plugin-replace plugin together with rollup-plugin-commonjs (in that order) to remove development-only code. See this gist for a complete setup example.
Include both DefinePlugin
and UglifyJsPlugin
into your production Webpack configuration as described in this guide.
If you don't want to use npm to manage client packages, the react
and react-dom
npm packages also provide single-file distributions in dist
folders, which are hosted on a CDN:
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
To load a specific version of react
and react-dom
, replace 15
with the version number.
If you use Bower, React is available via the react
package.