⛳

Cloud9でReactの環境構築をしてみる(🔰)

2023/07/19に公開

React

Cloud 9

tech

はじめに

プログラミング初心者の備忘録です。
手探りで行っているため、間違えているところもあるかと思います🤦‍♀️
間違えているところがあれば教えてください😵

今回のReactを導入するまでの流れ

Cloud9とVSCodeどっちにするか悩んだ
では、入れてみよう
出来上がったアプリケーションの初期フォルダの中身は何がある？
土台完成

作成するアプリケーションと参考本

まず初めに、実際にエンジニアとして働いている方々からJavasprictのプレームワークとしてReactがよく使われていると教えてもらったのですが、どうやって学習しよう？というところで、まず簡単なものを作りながら勉強してみることにしました。
色々読んでみたいけど、本高いんですよね・・・。
なので、とりあえずKindle Unlimitedで読めるものから選びました。Kindle Unlimitedをつかうなら当たりはずれもあんまり気にしなくていいし、数をこなせるかも？ということで、1冊目に選んだのはこちら。

あなたもこの本が気に入るかもしれません。"はじめてつくるReactアプリ（React入門シリーズ）"（三好アキ著）
こちらから無料で読み始められます: https://a.co/gvPnwk7

内容の最新版への更新も結構最近です。

内容は二時間程度で完成するwetherアプリをつくれるらしいです。apiの導入もあるのでその辺の勉強にも使います。
完成アプリの見た目がかわいいのでつくりたい。と思った本ですが、一応中身は載せれないのでぜひ見てみてください。

１.Cloud9とVSCodeどっちにするか悩んだ

ここから実際に環境構築をしていくのですが、本の内容に沿って進めると「VSCode」を使うことになるのですが…
その際にReact開発に必要なNode.jsをダウンロードする必要があります。無知ゆえに「うーん…」と思ったポイントが「PCの容量大丈夫かな…」という感じで、調べるのがちょっと面倒でした。Cloud9の環境構築が済んでいたこともあり、Node.jsもサポートされているプログラミング言語に入っていたので今回はCloud9で制作して、目的のReactでアプリケーションを制作することを最優先に行うことにしました。

環境構築サボってますね…。

2.では、いれてみよう

こうして

$yarn global add create-react-app

今回は公開しない個人的なプロジェクトや自分だけで使うプロジェクトに該当するので、そのままスルーします。successが出てたのでいけたっぽいです。

こう。

$ create-react-app react-weather-app

上の記述の「react-weather-app」は

$ create-react-app 作成するアプリケーション名

ということで記述しています。名前とか適当に付けたけどいいんかな？とかは今度考えます…！

こういう感じで作成できました。

3.出来上がったアプリケーションの初期フォルダの中身は何がある？

こういう感じの構成になっているみたいです。

your-app-name/
  ├── node_modules/
  ├── public/
  │   ├── index.html
  │   └── favicon.ico
  ├── src/
  │   ├── App.css
  │   ├── App.js
  │   ├── App.test.js
  │   ├── index.css
  │   ├── index.js
  │   ├── logo.svg
  │   └── serviceWorker.js
  ├── .gitignore
  ├── package.json
  ├── package-lock.json
  └── README.md

主なファイルとディレクトリの説明

node_modules/: npmからダウンロードされたパッケージが保存されたディレクトリです。npmやyarnなどのパッケージマネージャによって自動的に生成されます。
public/: 静的なファイルが格納されるディレクトリです。ここには、HTMLファイルやfaviconなどが含まれます。フォルダには開発完了後、オンライン上に後悔する準備ができたファイルやデータが入っています。
src/: アプリケーションのソースコードが格納されるディレクトリです。
App.js: アプリケーションのメインコンポーネントで、ここからアプリケーションのルートコンポーネントが呼び出されます。
index.js: アプリケーションのエントリーポイントです。ここからReactアプリケーションが始まります。
gitignore:コードを管理するgitで使われるファイルです。
package.jsonおよびpackage-lock.json: プロジェクトのメタ情報や依存関係が記述されているファイルです。

ブラウザで表示される初期画面
Reactのデフォルト設定では、src/App.jsファイルが以下のように初期設定されています。

// src/App.js

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src="logo.svg" className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

これにより、ブラウザで表示される初期画面が生成されます。ページにはReactのロゴが表示され、編集のためのメッセージとReactの公式サイトへのリンクが提供されています。
この初期画面からReactアプリケーションをカスタマイズしていくことができます。新しいコンポーネントを作成し、デザインやロジックを追加して、独自のアプリケーションを構築してください。
という感じでした。私はここから、私用しないファイルの削除、ファイルの内の記述の変更をしていきました。

構成を学習するのに参考にさせていただいたサイト

4. 土台完成

という感じでCloud9でReactの環境構築をしてみました。
これから、動かしたり、制作に入っていくので追加で気づいたことがあれば、追加や訂正をしていきたいと思います。