React（リアクト）ってなに？
JavaScriptのフロントエンドのライブラリです。
Facebook社（現在はmeta社）によりオープンソースで開発されました。
元々人気のあるライブラリでしたが、React16.8のReact Hooksという便利な関数群の登場で、人気に拍車がかかりました。
Reactの特徴
-
jQueryよりもコードがぱっと見で理解しやすく、複雑になりがちな見た目（DOM）の操作もシンプルに設計できる -
DOM操作の前に「仮想DOM」で検査して差分のみレンダリングするので、パフォーマンスが良い
-
コンポーネント指向で部品の再利用やデバックがしやすく、大規模開発に向く
JSX
前述の特徴を実現している要因のひとつは、JSXというJavaScriptの拡張構文です。
ざっくり言うとHTMLとJavaScriptの機能をあわせもち、
JavaScriptでありながらHTMLのようなタグを出力できます。
JSXを含むファイルの拡張子は.jsxとなります。（TypeScriptなら.tsx）
環境構築
Node.jsをインストールします。
Macの方はこちらの記事が参考になります。
MacにNode.jsをインストール（Qiita）
プロジェクトの作成
以下のコマンドで簡単に開発環境を構築できます。
npx create-react-app APP_NAME
# => Happy hacking! と表示されたら完了
npxは、npm5.2以降から利用できるパッケージランナーツールです。
create-react-app
よく使うライブラリをまとめてインストールするライブラリ。
ディレクトリ構成
rootディレクトリ内は以下のようになります。
- public
- src
- App.js
- index.js
- App.css
- node_modules
- package.json
- yarn.lock（yarnの場合）
- README.md
publicディレクトリ
index.htmlやファビコン画像などが格納されます。
srcディレクトリ
基本的にこの下にコンポーネントやコードを書いていきます。
index.jsによって、index.htmlのid="root"要素がApp.jsで上書きされ、レンダリングされます。
// ここで外部モジュールを読み込み
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// ここで#rootにApp.jsをマウントします
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
import
JavaScriptの基本的なインポート・エクスポートについてはこちら
React.StrictMode
開発環境でエラーが発生した際に、警告を出してくれる機能
strict モード - React
マウント
DOMツリーにReactコンポーネント（DOM）を挿入する処理
レンダリング
react-domからimportしたReactDOM変数をrender()関数でレンダリングする
ReactDOM.render(reactElement, DOM);
サーバ起動
npmもしくはyarnでサーバを起動します
npm start
# もしくは
yarn start
# ローカルならhttp://localhost:3000 でアクセス
# startコマンドはpackage.jsonで定義されている
コンポーネントの作成
後日別の記事で紹介します！
React Hooks
後日別の記事で紹介します！
補足
さいごまでお読みいただき、ありがとうございます！
この記事はプログラミング初心者であるわたしが、毎日の学習ログとして書きました。
ご質問やご意見、間違いのご指摘などがあれば、気軽にコメントください。
また、平日にもくもく作業したり質問しあえる仲間も募集しています。
ご興味がある方はTwitterなどでご連絡くださいー！
これからもどうぞよろしくお願いします