ご依頼を検討されている方

【React入門】Reactとは?UI構築のためのJSライブラリ

URLをコピーする
URLをコピーしました!

Reactに関する記事は沢山出回っていますが、最近のReact情報の記事は少ないです

おにちゃん

例えば、クラスコンポーネントでしか使えなかったhooksが関数コンポーネントでも使用可能になっていたり、Reduxの重要度が落ちてきていたりなどの変化が2021年にあります。

そのため、2021年のReactと昔とでは少し書き方が異なって来ています。

そこで、おにちゃん塾では『最新のReact情報』をまとめた記事を公開することにしました。

本記事ではReactに関するあらゆる情報を最新にして掲載しています。

現在、2021年版Reactで作るtodoリストを準備中です。少々お待ちください

目次

Reactとは

Reactとは

Reactとは

Reactとは、UIユーザーインターフェースを構築するためのJavaScriptライブラリです。

フレームワークではなくライブラリです。

  • フレームワーク:Webアプリを開発する際に、枠組みが使える開発ツール
  • ライブラリ:Webアプリを開発する際に、簡単に扱える部品
おにちゃん

ReactはFacebookが開発していることでも有名ですよね。


Reactの特徴

Reactを表す3つの特徴があります。

  • Declarative
  • Component-Based
  • Learn Once,Write Anywhere

Reactは『宣言型、コンポーネントベース、一度学び、どこにでも書くことができる』JavaScriptライブラリです。

おにちゃん

Reactのメリットなどは実際に使ってみると実感できるはずです。


ReactをCDNで導入

今のWebサイトや、WebアプリにReactを一部的に導入したい方はCDNをおすすめします。

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
        'use strict';
        class VoteButton extends React.Component {
         }
</script>
おにちゃん

CDNを使う方も、まずはReactオンリーでサービスを開発してみることをおすすめします。

→その方が理解度が格段に変わってきます。


【入門】Reactの環境構築

【入門】Reactの環境構築
【入門】Reactの環境構築

ターミナルを使ってReactの開発環境を構築していきます。

Reactの環境構築
  1. Homebrewをインストール
  2. nodebrewをインストール
  3. Node.jsをインストール
  4. npmをインストール
  5. npxでプロジェクト作成

1つ1つ詳しく解説していきます。


React導入手順1:Homebrewをインストール

まずは、Homebrewをインストールしていきましょう。

Homebrewはnodeをインストールする際に必要なものです。

brew -v

バージョンが表示されない方は下記のコマンドを入力しましょう。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

少しするとインストールが完了します。

おにちゃん

その後、もう一度バージョンを確かめてみてください。

brew -v

表示されればオッケーです。


React導入手順2:nodebrewをインストール

nodebrewはNode.jsを管理できるツールです。

nodebrew -v

表示されない方は下記のコマンドを入力しましょう。

brew install nodebrew

インストールが完了しましたら、バージョンを確認しましょう。

nodebrew -v


React導入手順3:Node.jsをインストール

node.jsをインストールしていきましょう。

nodebrew install-binary stable

インストールが完了した方は下記のコマンドで確認してみましょう。

nodebrew ls

バージョンが表示されればインストール完了です。

おにちゃん

それでは、nodebrewのcurrentであるバージョンを活用するために下記のコマンドを入力してみてください。

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile


React導入手順4:npmをインストール

npmではNode.jsの管理ツールです。

npm -v

Command not Foundと表示された方は下記のコマンドを入力してみてください。

sudo npm install -g npm

おにちゃん

パスワードが聞かれますので、普段のパスワードを入力してみましょう。


React導入手順5:npx create app reactでプロジェクト作成

まずは、React用のフォルダを作成しましょう。

おにちゃん

おにちゃん塾では、react開発というフォルダを作成しています。

  1. mkdir react開発
    フォルダ作成
  2. cd react開発
    ディレクトリを移動
  3. npx create-react-app oniprojects
    reactの開発用のフォルダを生成
  4. cd oniprojects
    Oniprojectにディレクトリを移動します
  5. npm start
reactの環境構築完了

このような画面が表示されれば成功です。

おにちゃん

これで、Reactの環境構築は完了です。


【入門】Reactの基本的な書き方

【入門】Reactの基本的な書き方
【入門】Reactの基本的な書き方

現在準備中です


【2021年版】React入門|人気コンテンツ掲載

【2021年版】React入門|人気コンテンツ掲載
【2021年版】React入門|人気コンテンツ掲載

現在準備中です。続々と追加していきます。


React material ui入門

【React + Material-UI入門】カッコいいデザインを秒速で作成
  • Reactでデザインを整えたい
  • Googleが推奨するモダンデザインを作りたい

→material-UIを活用しましょう。

おにちゃん

僕はReactのデザインほぼ全てをmaterial-UIに任せています。


React hooks入門

【入門編】React hooksとは|基礎知識を徹底解説【書籍付き】

React hooksとは、これまでクラスコンポーネントでしか扱えなかったstateやライフサイクルなどを関数コンポーネントで扱うためのものです。

おにちゃん

今のReactの主流は関数コンポーネントなので、React hooksは必須の知識です。


React redux入門

現在準備中です


React router入門

現在準備中です


ReactNative入門

【基礎入門】ReactNativeとは?環境構築からメモアプリまでを解説

Reactでモバイルアプリを開発したい方は必須のスキルです。

おにちゃん

おにちゃん塾では無料で学習することができます。


まとめ:【入門】Reactとはjs(JavaScript)のライブラリ

まとめ:【入門】Reactとはjs(JavaScript)のライブラリ
まとめ:【入門】Reactとはjs(JavaScript)のライブラリ

ここまでで【React入門】Reactとは?UI構築のためのJSライブラリについて解説してきました。

本記事では『todoアプリ、chatbotアプリ開発』を追加する予定です。

おにちゃん

1ヶ月以内にはコンテンツを追加します

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる