Reactの完全な初心者向けガイド

UnsplashのAlexander Andrewsによる写真

もっと技術的な内容を書きたいと思います。 Reactは私のお気に入りのテクノロジーの1つなので、Reactイントロを作成すると思いました!この投稿には、HTMLとJavaScriptの知識が必要です。私は、React!のようなライブラリに移る前にこれらを知っておくべきだと固く思っています。

Reactとは

Reactは、Facebook開発チームによって2013年に構築されたJavaScriptライブラリです。 Reactは、ユーザーインターフェイスをよりモジュール化(または再利用可能)し、保守しやすくしたいと考えていました。 ReactのWebサイトによると、「独自の状態を管理するカプセル化されたコンポーネントを構築し、それらを構成して複雑なUIを作成する」ために使用されます。

そもそもReactを書いたので、この投稿全体でFacebookの多くの例を使用します!

Facebookが「いいね」から「リアクション」に移行したことを覚えていますか?投稿を好きになる代わりに、あなたは今、どん​​な投稿に対しても、ハートやスマイルマークなどに反応することができます。これらの反応が主にHTMLで行われた場合、それらのすべてのリアクションを反応に変更し、確実に機能させるには多大な労力が必要になります。

これがReactの出番です。「懸念の分離」を実装する代わりに、Reactには異なるアーキテクチャがあります。このアーキテクチャは、コンポーネントの構造に基づいてモジュール性を高めます。

今日はCSSを分離しますが、必要に応じてそのコンポーネントを特定にすることもできます!

React vs. Vanilla JavaScript

「バニラ」JavaScriptとは、通常、JQuery、React、Angular、Vueなどの追加のライブラリを使用しないJavaScriptコードを記述することです。それらとフレームワークとは何かをもっと読みたいのであれば、ウェブフレームワークに関するすべての投稿をします。

始める前の簡単なメモ

  • このチュートリアルをもう少し簡潔にするために、一部のコード例には...の前後にあります。これは、いくつかのコードを省略したことを意味します。
  • いくつかの場所でGit diffを使用して、変更されるコード行を表示します。コピーして貼り付ける場合は、行の先頭にある+を削除する必要があります。
  • 各セクションの完成バージョンを備えた完全なCodePensがあります。これを使用して、キャッチアップをプレイできます。
  • チュートリアルに不可欠ではない、より高度な概念は、引用符で囲まれています。これらは興味深い事実です!

セットアップ

実動Reactアプリケーションを作成する場合、Webpackのようなビルドツールを使用する必要があります。 Reactはブラウザーではデフォルトでは機能しないパターンを使用するため、Webpackはコードをバンドルします。 Reactアプリの作成は、ほとんどの設定を行うため、これらの目的に非常に役立ちます!

今のところ、React CDNを使用しますが、これは開発目的のみに使用されます!また、Babel CDNを使用して、非標準のJavaScript機能を使用できるようにします(これについては後で説明します!)。