React入門

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

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

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つ詳しく解説していきます。

 

Homebrewをインストール

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

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

brew -v

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

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

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

おにちゃん
おにちゃん

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

brew -v

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

 

nodebrewをインストール

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

nodebrew -v

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

brew install nodebrew

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

nodebrew -v

 

Node.jsをインストール

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

nodebrew install-binary stable

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

nodebrew ls

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

おにちゃん
おにちゃん

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

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

 

npmをインストール

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

npm -v

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

sudo npm install -g npm

おにちゃん
おにちゃん

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

 

npx create app reactでプロジェクト作成

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

おにちゃん
おにちゃん

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

mkdir react開発
フォルダ作成

cd react開発
ディレクトリを移動

npx create-react-app oniprojects
reactの開発用のフォルダを生成

cd oniprojects
Oniprojectにディレクトリを移動します

npm start

reactの環境構築完了

Reactの環境構築完了

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

おにちゃん
おにちゃん

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

 

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

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

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

現在準備中です

 

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

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

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

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

React material ui入門

現在準備中です

React hooks入門

現在準備中です

React redux入門

現在準備中です

React router入門

現在準備中です

ReactNative入門

現在準備中です

 

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

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

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

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

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

おにちゃん
おにちゃん

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

 

ABOUT ME
アバター
鬼澤龍平(20)
Twitterにて役立つ情報を掲載しております。
関連記事