Reactをインストール
Create React Appを用いたReactのインストール
Create React AppはFacebookによって提供されているReactのスケルトンアプリケーションです。非常に簡単にReactアプリケーションのプロジェクトを始められます。
補足
今回説明するインストール方法、CDNを使用しての使用方法はReactの環境を整える一例です。
他にも、Reactの環境を整えるためのコマンドがあります。
インストールとプロジェクトの作成
ターミナルで以下のコマンドを実行します。
npx create-react-app my-appこのコマンドを解説します。
npx: Node.js 8.2.0以上で使用可能なパッケージランナーです。これを使用することでcreate-react-appを事前にインストールする必要がありません。create-react-app: Reactアプリケーションを作成するためのCLIツールです。my-app: 新しいプロジェクトのディレクトリ名です。任意の名前に変更できます。
このコマンドを実行すると、my-appという名前のディレクトリが作成され、その中に最初から設定されたReactのプロジェクトが生成されます。
CDNで利用する
1.HTMLファイルを作成: まずは、Reactを利用するための基本的なHTMLファイルを作成します。
2.ReactとReactDOMのCDNリンクを追加: <head>セクションの終わりに、公式のCDNリンクを追加します。公式のリンクはこちらから最新のバージョンを選んでください。
<!-- React のバージョンによってURLは変わるので公式サイトを確認 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>3.BabelのCDNリンクを追加: JSXをブラウザでトランスパイルするために、BabelのCDNリンクも必要です。
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>4.Reactコードの追加: <body>内に、Reactコンポーネントやアプリケーションのロジックを書くための<script>タグを追加します。タイプとしてtext/babelを指定することで、Babelがこのスクリプトをトランスパイルします。
<script type="text/babel">
function App() {
return <h1>Hello, React!</h1>;
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>これで、ReactをCDNを通じて使う基本的なセットアップが完了しました。公式のCDNリンクは定期的に更新される可能性があるので、公式ドキュメントから最新のリンクを確認してください。
手動でのセットアップ（WebpackとBabelを使用）
手動でセットアップする方法もあります。この方法ではWebpackとBabelを使用します。
必要なパッケージのインストール
まず、新しいディレクトリを作成し、その中で以下のコマンドを実行してpackage.jsonを生成します。
npm init -y次に、Reactとその他必要なパッケージをインストールします。
npm install --save react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react各オプション解説
--save: 実行時に必要な依存関係をインストールします。--save-dev: 開発時のみに必要な依存関係をインストールします。
webpack.config.jsの設定
プロジェクトのルートにwebpack.config.jsという設定ファイルを作成します。
以下は一例です。
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};この2つがReactの主なインストール方法です。どちらの方法でも、Reactを成功的にインストールし、プロジェクトを開始することができます。初心者にはCreate React Appを、より細かい設定を行いたい中級者以上には手動セットアップをおすすめします。