ぼんやりとした不安を忘れるために、Reactのチュートリアルをやってみることにしました。
今回は、ローカルで環境構築するまでと、コンポーネントとは何ぞやということを自分の言葉で記録しておきます。

概要

公式サイト
読み方は「リアクト」みたいです。ナウでヤングなUIを作るためのJavaScriptライブラリだそう。
ひとつひとつのパーツは「コンポーネント」という単位で、それを組み合わせて作っていくのだそうです。

ローカルでの環境構築

「ちょっと使ってみたい」ということであれば、公式様がすべて整えてくださっている環境をブラウザ上で動かすので十分だそうです。
でも私は土台がわかってないと気持ち悪くなる性分なので、ローカルに開発環境を作り、そちらで楽しんでいこうと思いました。

作業の流れは以下の通りです。

環境に最新のNode.jsがなければインストールする
Create React Appにならってプロジェクトフォルダをつくる
- 違うプロジェクトフォルダ名がよければ「my-app」をお好みの名前に置き換えます
- 仕上がるまでに少し時間がかかった。空を眺めるなどして待ちます
srcフォルダにcssファイルとjsファイルを作る
- まず表示されるページを作るので、両方とも「index」にしておきます
自動生成されたプロジェクトフォルダの中に入って、npm startコマンドを実行。そのあとlocalhost:3000にアクセスして表示されれば構築は完了。おつかれさまー！
jsファイルを更新すると自動で反映されるので、更新ボタンを押したりなどは不要

お仕事とかで開発用サーバーを使うときは、4のやり方がまた違ってくるのだと思います。
ちなみに、srcフォルダに作ったjsファイルの先頭には、以下のコードを記述する必要があります。

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import './cssファイル名.css';

ちなみにバージョン17以降だと、 import React from 'react';は必要ないみたいです。
参考：import React from "react" はもう要らない

コンポーネントの概要

コンポーネントは、Reactで基本になる、画面の部品の単位です。
コンポーネントはクラスや関数で作ります。今回はチュートリアルで開設されていたクラスコンポーネントのみ扱います。

ざっくり、以下のように定義します。

class コンポーネントの名前 extends React.Component {
  render() {
    return (
      // 最終的に画面に表示する内容をここに書く。
      // タグとコードをおなじみの見た目のまま混ぜて書ける(JSX)
      // JSは{}で囲う。{/*コメントもこのように囲う必要がある*/}
      // コンポーネントは、ほかのコンポーネントの中で呼び出して使うこともできる(コンポーネントの組み合わせ)
    );
  }
}

こんな感じで書くと、return()の中に書いたJSXをもとにrenderメソッドがいいかんじにしてくれます。
全体のコードの流れとしては、まず最小要素から作っていき、どんどん完成形へ組み上げていくというイメージでいいのかしらね。

今回はここまで。
きっと、あとでわかってくることもたくさんあるでしょう。

log

日々の記録と、書くことを楽しむためのブログです

React使ってみる(環境構築・コンポーネント)

概要

ローカルでの環境構築

コンポーネントの概要