# 【第一回】React勉強:Reactの開発環境を構築しました。

概要

エンジニアを始めたのにポートフォリオサイトが無いのはさみしいなと思ったので作ります。
どうせなら流行りのReactで動的webサイトを作ってみたいと思います。

• 持ってる知識

  • webサーバ関連のインフラ知識

• 基本的なことだけ知っている

  • html
  • css
  • javascript
  • node.js

• 何も知らない

  • React

こんな感じの人間がReactを使ってwebサイトを作ってみたいと思います。

Reactってなに？

javascriptのフレームワークでサイトを作るのに便利くらいしかReactのことを知らなかったので調べました。

1. コンポーネントベース: Reactでは、UIを再利用可能なコンポーネントに分割して構築します。これにより、コードの可読性と保守性が向上し、開発速度も向上します。
2. 仮想DOM: Reactは、実際のDOMとは別に仮想DOM（Virtual DOM）というメモリ上の軽量なデータ構造を使用して、UIの変更を効率的に管理します。これにより、ページの再描画が最小限に抑えられ、パフォーマンスが向上します。
3. 単方向データフロー: Reactでは、データは親コンポーネントから子コンポーネントへと一方向に流れます。これにより、データの管理が容易になり、アプリケーションの複雑さが抑えられます。

んーよくわかりませんが、触っていってみましょう。

導入方法

1. Node.jsのインストール

• reactはNode.jsで動くということがわかりました。まずはnode.jsをインストールします。

Windows
[node.js公式ページ]https://nodejs.org

MacOS

brew install node@18.16.0

今回は18.16.0のnode.jsを使いました。

1. Reactのインストール

• Reactはnpmでインストールです。

npm install react react-dom

ここではreact本体とreact-domをインストールしてます。
インストールはこれで終わりです。簡単ですね。

Reactアプリケーションの作成

• インストールしたReactで早速アプリケーションを作ってみましょう。

npx create-react-app "APP名"

これでカレントディレクトリにReactのアプリケーションができました。

サンプルアプリを起動してみましょう

cd "APP名"
npm start

デフォルトブラウザにロゴがくるくる回転するwebページが出ればＯＫです。

明日はフォルダの中身をみて、簡単にカスタマイズしてみようと思います。