前のパートに戻る 完了して次のパートへ  

  1-2 Reactのプロジェクトを作成する

Reactのプロジェクトを作成する(5分)


create-react-appを用いてReactの新しいプロジェクトを作成します。


プロジェクトを作成する


npxを用いてcreate-react-appを実行します。

※ npxはnpmと一緒にインストールされています。

$ npx create-react-app techpit-forum

このときtechpit-forumというディレクトリが作成されます。

::: tip techpit-forumの部分は好きな名前に変えることができます。 :::

作成したディレクトリに移動します。

$ cd techpit-forum

本カリキュラムでは、バージョン16.7.0-alpha.2のReactを採用します。

$ npm i -S [email protected] [email protected]


開発サーバを起動する


npmコマンドを用いて開発サーバを起動します。

$ npm start

ブラウザでhttp://localhost:3000を開くとこのような画面が表示されます。


index.jsを修正する


Hot Module Replacementを有効にしてブラウザをリロードせずに開発できるようにします。

以下を追加することで有効になります。

./src/index.jsはこのようになります。

index.cssを修正する


グローバルCSSを避ける為にindex.cssを修正します。 全てのcssを削除してから、aのリンクの下線のみは非表示にしておきます。

以上で今回のパートは終了です。

教材を進めていく中で何か困ったことがあったら作成者に質問してみよう!


エラーが出てしまって「手を尽くしたけど解決できない!」「ここの説明がよく理解できない!」など質問したいことは教材を作成した方に直接聞いてみよう!

作成者:uufish
twitter:@eslintrc
Email:[email protected]

このコースの評価は?