kuwayoshi.com

Reactアプリケーションの開発入門時に学習したこと

近頃は仕事でReactのフロントエンド開発をする様になりました。
そこでReactの入門時に学んだJavaScriptの使い方や、公式のチュートリアルといった情報をまとめていきます。

Reactとは

Reactは、Meta（旧Facebook）が開発したUIを構築するためのJavaScriptライブラリです。
この記事ではReactを学び始めるための基本的な手順と、Reactの学習を支援する各種情報などを記載していきます。

1．JavaScriptの基礎知識

ReactはJavaScript上で動作するライブラリのため、まずはJavaScriptの基本的な理解が必要になります。
JavaScriptの基本的な構文、データ型、制御フロー、関数、オブジェクト、配列などについて学びましょう。

MDN Web Docs（JavaScriptの基本）

はじめはJavaScriptだけで簡単なWebページを作ってみると、Reactを使ったときの便利さがより実感できるのでオススメです。

2．Reactの基本情報

次にReactの基本的な情報を学ぶには、公式サイトのドキュメントを見るのが最適です。
Reactのコンポーネント、propsとstate、ライフサイクルメソッド、イベントハンドリングなどについて学習していきます。

React公式ドキュメント

公式のドキュメントは、慣れないと少し取っつきづらいと感じるかもしれません。
ただReactのドキュメントは日本語への翻訳もされていますし、何より情報の速さと正確さは公式サイトが圧倒的に優れているので、一度は目を通しておくと良いでしょう。

3．Reactアプリケーション作成

Reactの基本を理解したら、実際に手を動かしてReactアプリケーションを作成してみましょう。
ローカルでReactの開発をするには、Node.jsのインストールをしておく必要があります。
Node.jsのサイトから、推奨版をダウンロードしてインストールしておきます。

Node.js

Reactアプリケーションを作成する方法は色々とありますが、入門用のプロジェクトを素早く作成する場合は、create-react-appコマンドを使うのが便利です。

Create React App

ただ最近はcreate-react-appコマンドが公式ドキュメントから外されたりしている様なので、今後はあまり使用されなくなっていくのかもしれません。

Create React Appは役割を終えました

まとめ：Reactは多機能なライブラリ

以上の流れでチュートリアルを終えたら、Reactでフロントエンド開発をする準備は整いました。
他にもより複雑なアプリを開発するための方法として、React Hooks、Context API、Reduxなど、Reactは非常に多くの機能が搭載されています。
いきなりすべてを理解しようとするのは難しいと思いますが、時間をかけてスキルを磨くことで得られる価値は大きいと思います。
Reactを覚えて、快適なフロントエンド開発をしていきましょう！