初めてのReactアプリ作成ガイド

公開:2021/02/01
更新:2021/02/26
7 min読了の目安(約6400字TECH技術記事

(原文) A Guide to Creating Your First React App
image.png

Facebookは2010年代初頭にReactの初期バージョンを使い始めました。しかし、アプリ開発者は2020年まで安定したリリースを得ることができませんでした。その結果、開発者の中には、オープンソースの JavaScript ライブラリの使用経験が豊富な人もいれば、基本的な使い方と高度な使い方を説明した React アプリガイドの恩恵を受けられる人もいます。

幸いなことに、ほとんどの開発者は JavaScript を使用した経験をすでに持っているため、最初の React アプリをすぐに作成することができます。

Reactアプリを構築するために必要ないくつかのスキル

CSSとJSを知っていると仮定して、Reactアプリガイドを理解し、初めてのアプリを作り始めるために必要なスキルの多くをすでに持っています。最初は戸惑いを感じたら、数日続けてみましょう。また、時間をかけて「Thinking in React」を読んでみてください。多くの開発者は、5段階のチュートリアルが非常に役立つと言っています。

始めるための前提条件

JavaScript、CSS、HTMLの経験があれば、Reactを使うことはもうすぐそこまで来ています。しかし、Reactを使って何かを構築する前に、インストールする必要があります。

初めてのReactプロジェクトにツールチェーンは必要ないかもしれません。しかし、以下のようなオプションをチェックしてみるといいかもしれません。

これらの開発ツールキットはどれも重宝するでしょう。使う必要はありませんが、使うべきです。これらのツールはあなたの作業をずっと楽にしてくれるでしょう。

ReactとJavaScriptの違いを知る

image.png

ReactとJSの間には類似点がありますが、Reactを使いこなすにはいくつかのハードルを乗り越えなければなりません。最も顕著な違いとしては、以下のようなものがあります。

  • UIの構築方法 - JavaScript では、HTML ドキュメント内にインターフェイスを作成し、そのインターフェイスがコードのためにサーバーに接続されます。React では、ブラウザで UI を定義します。最初は、このような短い HTML を追加するのは不自然に感じます。しかし、現実的には同じ結果が得られます。違いは、Reactはブラウザ内で動作するのに対し、JSはサーバーの助けを必要とする点です。
  • アプリ間で機能的にどのように分割するか - 開発者が JavaScript を使用する方法は非常に複雑になっており、JS コードはしばしば耐え難いほど複雑に見えます。その結果、同じアプリで作業している間、多くのファイルを開いたままにしておくことになります。React は、機能をコンポーネントに分割することで、プロジェクトをより管理しやすくしています。各コンポーネントは、それが実行するのに必要なすべてのコードを保持しています。その結果、ごちゃごちゃしたライブラリというよりは、ショートリストのようなコードが得られます。
  • アプリがユーザーデータをどのように管理するか - JSの場合、ユーザーが投稿したデータは、ブラウザが扱うDOM(Document Object Model)に格納されます。例えば、テキストフィールドに名前を入力すると、情報はサーバーに転送される前に DOM に送られます。Reactは、ユーザーのデータを変数として保存します。ユーザーの視点では、何も大きく変わることはありません。バックエンドでは、データの管理がはるかに簡単になります。

Reactを使ってアプリを作る練習

いくらJavaScriptでアプリを作ったことがあっても、Reactでアプリを作り始めるにはReactアプリガイド以上のものが必要になります。W3Schoolsには、簡単なアプリの作り方を教えてくれるプライマーがあります。

以下により、より多くの経験を積むことができます:

すでにJSを知っているのに、わざわざReactを学ぶ必要があるのでしょうか?

あなたが JavaScript を使ってアプリを構築することを楽しんでいる初心者の開発者であれば、なぜあなたの分野の他の人たちが React に興奮するのか不思議に思うかもしれません。キャリアの中で複雑な機能を実行するアプリケーションを構築する必要が出てくると、その理由が分かるでしょう。ある時点で、JavaScriptは今日のアプリ開発者のニーズに対応していないため、大きな苦痛になります。

Reactを学ぶべき理由は...

image.png

  • 再利用可能なコンポーネントを提供し、長期的に時間を節約します。
  • DOM の落とし穴を回避します。
  • 自由にツールやアドバイスを提供する開発者の堅牢なコミュニティを持っています。
  • 急速に業界標準になりつつあります。

また、Reactでビルドを学ぶことで、多くのデザインパターンにアクセスすることができます。最初から学んでおくべきおすすめのパターンとしては、以下のようなものがあります。

  • ステートレスコンポーネント
  • 条件付きレンダリング
  • レンダープロップス
  • 制御されたコンポーネント
  • 制御されたコンポーネント

あなたが知っておくべき最高のReactデザインパターンを読むことで、Reactデザインパターンについてより深い理解を得ることができます。

UXPinでReactアプリのプロトタイプを作成してテストする

UXPinを使うとReactアプリのプロトタイプを簡単に作成してテストすることができます。JSXプリセットのオーサリングと管理をチェックして、UXPin でコードをテストするのがいかに簡単かを確認してください。コンポーネントを UXPin エディタのキャンバスにドロップするだけで、意図した通りに動作するかどうかを判断することができます。

image.png

アプリ開発の経験がどれだけあるかに関わらず、UXPinがお手伝いします。クラウドベースのツールのコラボレーション機能を使って、あなたのアイデアを他の人と共有しましょう。UXPinのアカウントを作成しなくてもプロジェクトを見たり、フィードバックを残したりすることができます。適切なリンクを与えれば、プロトタイプにアクセスすることができます。

また、コードに何かをコミットする前に UXPin を使ってアイデアを探ることもできます。内蔵ライブラリを使えば、機能を素早く簡単にテストすることができます。気に入った機能があれば、製品に合わせて微調整を加えて独自のバージョンを構築することができます。

UXPinがReactアプリのプロトタイプを作成するのに必要な機能を持っているかどうか確信がありませんか?14日間の無料トライアルを開始して、実際にUXPinを使ってみましょう。UXPinの使用を継続したくない場合は、トライアルメンバーシップは有効期限が切れます。クレジットカード番号を提供する必要がないので、必要のないサービスで請求されることはありません。HBOやPayPalなどの企業の開発者が好むメリットを享受しているのであれば、より良いReactアプリをより効率的に作るのに役立つメンバーシップオプションを選択しましょう。

UXPinは、世界中のプロダクトチームがアイデアをより早く製品に変えることを支援するデザインプロセスツールです。

UXPin の革新的なテクノロジーである Merge を使用すると、PayPal のような企業は DesignOps の課題を簡単に解決することができます。UXPin Merge は、最終製品との完全な一貫性を達成するために React コンポーネントを使用してデザインすることを可能にします。

本記事は2020/12/16投稿を翻訳したものです