Reactは、javaScriptのフレームワークです。
Reactを使えば、モダンな開発を行えるようになるので、一緒に勉強していきましょう！
今回は、勉強を始めるための環境づくりの話をしていきます。
<目次>
React環境構築(CDN)
[Visual Studio Code]をPCにインストールしてください。これは、開発用のエディタです。私は、Macを使って開発していきますが、Windowsでも使用できます。
続いて、Visual Studio Code を開いたらオレンジ枠のボタンをクリックして、検索ボックスに「liveserver」と打ち込んでください。
Live Server が検索結果として表示されるので、インストールしてください。
次に、開発したコードを格納するフォルダをDesktopに作成してください。
|
1 |
mkdir ~/Desktop/learning_react |
Visual Studio CodeのFileからOpenWorkSpaceを選択し、先ほど作成した「learning_react」を開きましょう。
Visual Studio Codeのオレンジ枠のボタンをクリックすると先ほど指定した「learning_react」のワークスペースが表示されているはずです。
続いて、learning_reactの中にフォルダとファイルを作成します。
|
1 2 3 4 5 |
pwd /Users/hoge/Desktop/learning_react mkdir ch01 touch ch01/index.html touch ch01/index.js |
Visual Studio Code上でindex.htmlを開き、中身に書きましょう^^
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>First React Learning</title> </head> <body> <h1>Hello World</h1> </body> </html> |
Visual Studio Code上のindex.htmlを右クリックし、「Open with Live Server」をクリックしてください。
Webブラウザ(Chromeなど)をインストールしている環境であれば、自動でブラウザが立ち上がり、index.htmlの中身が表示されます。
index.htmlの中身が変更された時、自動でブラウザをリフレッシュしてくれるので、大変便利です^^
Pythonをインストールしてあれば、以下の方法でもReactの動作確認を行えます。
|
1 |
python -m http.server |
index.htmlのベースコード
次回から以下の内容のindex.htmlを使って学習を進めていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone"></script> <script src="index.js" type=text/jsx></script> </body> </html> |
React環境構築(Node.js)
React環境構築(CDN)は、CDNによる学習環境の構築方法ですが、Node.jsを利用する方法もあります。学習していく中で、Node.jsを利用する場面も出てくるので、こちらもインストールしてください。※Node.jsは、サーバー内で動くjavaScriptです
Node.jsのインストール
InstallerからNode.jsをローカル環境にインストールできたら、ターミナル(コマンドライン)から下記のコマンドを実行してみましょう。Node.jsのバージョンが表示されたら成功です。※バージョンは異なると思います
|
1 2 3 4 5 6 7 8 |
node -v v12.1.0 npm -v 6.9.0 npx -v 6.9.0 |
Reactプロジェクトの作成
npxを使って、Reactプロジェクトを作成しましょう。
[公式サイト]
|
1 2 3 4 5 6 7 8 9 10 |
# Desktopに移動 cd ~/Desktop/ # プロジェクト作成 npx create-react-app sample_react_app cd sample_react_app/ # プロジェクト起動 npm start |
Reactのスタートアップ画面が表示されたら成功です。
その他の設定
「npm install -g create-react-app」の設定をしておくと、npxは不要になります。terminal(コマンドプロンプト)から設定ができます。
|
1 2 3 4 |
npm install -g create-react-app # npx 不要でReactプロジェクトが作成できる create-react-app sample_react_app |
プロジェクトの構成
以下は、プロジェクトの構成になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
├── README.md ├── package.loc.json ├── package.json │ │ ├── public │ ├── favicon.ico │ ├── index.html # サイトのメインページ │ ├── manifest.json ├── src # Reactソースの格納場所 │ ├── App.css # sample css │ ├── App.js # sample component │ ├── App.test.js # App.jsに対してのテストコード │ ├── index.css # サイト全体のcss │ ├── index.js # Main javaScript │ ├── logo.svg # Reactのロゴ │ └── serviceWorker.js |
React Developer Tools
Chromeに「React Developer Tools」を導入しましょう。
次回
次回は、Reactのコンポーネントについて学びましょう 。
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。