React Component の世界に触れる

この章では、Hands-On 形式で、実際に React Component を作りながら、React を使うために理解しなければいけない、コンポーネントの概念やライフサイクルについて説明します。この章を終えるころには、React Component の基本的な知識がつき、React を使ったアプリを作るための準備が整います。

目次
・Bootcamp 0 - 時代遅れのプログラミング講座
・Bootcamp 1 - なぜ React なのか？
・Bootcamp 2 - React Component の世界に触れる　→　今ここです
・Bootcamp 3 - 初めての React アプリを作ろう
・Bootcamp 4 - React でウェブサイトを作る（前半）
・Bootcamp 5 - React でウェブサイトを作る（後半）
・Bootcamp 6 - ウェブサイトを公開しよう
・Bootcamp X - 最後に

こちらのマガジンから全てのノートが閲覧できます。

ゴールの確認

さて、これから皆さんは実際に React Component の世界に踏み入れることになります。そこでまずは、この章のゴールを確認しておきましょう。

この章で、まず皆さんは React を使った開発ができる環境を立ち上げます。次の画像は、React で作られたプロジェクトのサーバーが立ち上がったときの最初の画面になります。

次に、この Bootcamp の最終成果物である「Kace Gallery」のウェブサイトを例に、React が従来の UI デザイン手法とどのように違うのかを説明します。

そして最後は、実際に Greeting、CountUp コンポーネントを作りながら、React を使用する上で必須な、Props、State、Lifecycle などの React Component に関する基本的な知識を身につけていきます。

この章で学べるスキルは以下になります。

・React アプリの開発環境構築
・React Component の概念
・Atomic Design について
・Component と Props の関係
・State とComponent のライフサイクル

React アプリの開発環境構築

最初に React アプリを作るための開発環境を整えていきます。まずは npm を使えるようにする必要があります。