React でアプリ作成

JavaScript React

StackBlitz

githubで認証試すが利用できない

JavaScriptにてtodoアプリ

未完了のTODO

完了のTODO

React VSCode インストール

参考記事：https://teto-tech.com/article/react-start1

Node.jsのインストール

▼「my-app」を作成　→　この中に環境が構築

npx create-react-app my-app 

※作業フォルダにてコマンド実行しました

▼作業フォルダを移動

cd my-app

▼編集をリアルタイムで確認

npm start

my-app/src/App.jsを編集すると正しく表示されました
※Ctrl+Cで終了

Props分割代入

分割代入しない場合

export const Profile = (props) => {
 return (
  <p>私の名前は{props.name}です。{props.age}歳です。</p>
 )

分割代入する場合

export const Profile = (props) => {
 // propsを分割代入
 const { name, age } = props;
 return (
  <p>`私の名前は{name}です。{age}歳です。`</p>
 )

↓引数propsを渡す段階で分割代入

export const Profile = ({ name, age }) => {
 return (
  <p>`私の名前は{name}です。{age}歳です。`</p>
 )

useEffect

  useEffect(() => {
    …
  },[num, ]);

第二引数に変更がある場合、中の処理が実行

Reactで作成したアプリをレンタルサーバに公開する方法

参考サイト：https://zenn.dev/kiriyama/articles/538face511307d

▼package.jsonを編集

homepageという項目を追加しURLを記載

{
  "homepage": "https://○○",
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
//省略
}

▼publickフォルダに.htaccessのファイルを作成

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

▼コマンド実行

npm run build

作成されたbuildフォルダの中身をアップロード
※buildフォルダはアップロードしない

なぜデプロイ時にnpm run buildが必要なのか?
https://qiita.com/bell_007/items/e84cd7a11b1d196e8bb4

デモページ

→実際Reactにて作成したページ

アップロードファイル