REACTでコードを書いて公開する
noteにメモを残しながらReactのコードを書いていきたいと思います．
初期状態のReactの画面にpropsを使って少しコードを追加して自分のサーバにアップしたいと思います．
記述はひとまず自分が勉強した順番で雑多に書いていきたいと思います．
Componentやpropsを用いてReactの初期画面に少し変更を加える
propsで渡せるデータの種類は，「文字列，数値，真偽値 : ex. True/ False，配列，オブジェクト，日付」があります．
コンポーネントには「Class Component」と「Functional Component」があある．基本的には「Functional Component」を使うとのことです．
→ React Hooksの登場によって同じコードが使えるかららしいです．
VSCodeの拡張機能の追加
ReactをVSCodeで開発する際に活用している拡張機能を紹介します．
「vscode-icons」
ファイルやフォルダの横にアイコンを設置してくれる拡張機能です．
「ES7 React/Redux/GraphQL/React-Native snippets」
Reactのためのスニペットを簡単に呼び出すための拡張機能です．
「VSCode React Refactor」
JSXファイルでリファクタリングのするときに役に立つ拡張機能です．
「Prettier – Code formatter」
TypeScriptやJavascriptのためのCode Formatterとしての拡張機能です．
Reactで作成したデータを自分のサーバにアップロードする
Reactは「Create React App」を扱うことでローカル環境で開発し，作成途中のデータを「http://localhost:3000/」で確認することができます．
このローカル環境で作成したページをwebサーバで動かすための方法を紹介します．
react_appフォルダ著化kにある「package.json」を開きます．
jsonファイル内の最初の行に「"homepage": "https://hoge.com/",」を追記します．hoge.comのところはアップロードしたいディレクトリを書いてください．
{
"homepage": "https://hoge.com/",
"name": "react-app",
"version": "0.1.0",
"private": true,
}「package.json」を編集したら，VCCodeのターミナルで下記のコードを実行し，ビルドを行います．
npm run buildビルドが成功すると「build」というフォルダが生成されているかと思います．
この「build」の中身を自分のWebサーバにアップロードすることで自分のホームページで表示することができます．
この記事が気に入ったらサポートをしてみませんか？