WEBEER – Web制作の覚えがき –

Reactを始める準備(覚書)

React
React 更新日:2020.10.29 公開日:2020.10.26

私のメモから

環境

ビルドツール
・webpack
フレームワーク
・React.js + Redux
テンプレートエンジン
・JSX
パッケージマネージャ
・yarn

プロジェクトの準備

① エディタをインストールする
② 好きなフォルダにgitのリポジトリを作る
③ Readme.mdを作る
④ このフォルダをプロジェクトとして作る
gitignore にmod_moduleとpublic/bandle.jsを忘れずに

yarnをインストールする

brew install yarn でインストールする

パッケージのインストール

yarn add react@15.6.1 これでインストールするバージョンを指定できる
yarn init でpackage.jsonを作成
yarn add でインストールとpackage.jsonの記述を同時にやってくれる
yarn add webpack webpack-cli webpack-dev-server axios prop-types @babel/core babel-loader @babel/preset-react @babel/preset-env

webサーバーを立てる

① プロジェクトディレクトリの直下にwebpack.config.js というファイルに webpackの設定を貼り付ける
② プロジェクトディレクトリの直下にpublicというフォルダを作る
③ pblicフォルダの中にindex.htmlを作る
④ bandle.jsの読み込みを記述しておく
④ プロジェクトディレクトリの直下にsrcフォルダを作る
⑤ srcフォルダ内にindex.jsを作る
./node_modules/.bin/webpack-dev-server でコンパイル
./node_modules/.bin/webpack で成果物ができる
⑧ packege.jsonにコマンドを登録する

"scripts": {
"start" : "./node_modules/.bin/webpack-dev-server"
},

⑨ yarn run start で実行できる

eslintの文法のチェックコードを導入する

① yarn add eslint eslint-plugin-react これでインストールするバージョンを指定できる
② 設定ファイルを作る
③ ./node_modules/.bin/eslint –init  設定ファイルを作る
④ ポピュラースタイルガイド、airbnb、Javascriptの組み合わせで選択
⑤ ./node_modules/.bin/eslint src/index.js これでチェックできる
⑥ VSCodeのプラグインをインストール

Scssを使えるようにする

① プラグインのインストール yarn add node-sass style-loader css-loader sass-loader import-glob-loader mini-css-extract-plugin
② stylesheets フォルダにindex.scssを作成

Reactを使えるようにする

yarn add react@15.6.1 react-dom@15.6.1