React の初期導入方法-忘れがちな自分用

事前にすることVSCODE、node、インストールしてnpmを使えるようにbashも

作りたいフォルダでVisualStadioCodeを開く
ターミナルでnpx create-react-app +"好きなフォルダ名"を入れてひな形を自動作成
Happy hacking!でReactのひな形完成！
ターミナルでcd "好きなフォルダ名"で移動して、code . でその階層のVScodeを開く

ローカルサーバーで起動できているか確かめる為
npm run startとターミナルで打ち込むとローカルサーバー３０００番で開かれる（時間が少しかかる）

必要のないものは取り除いていく。
app.test.js
logo.svg
reportWebVitals.js
全て消す

下記は中身のみ消していく
App.cssは全部消しておく（後々追加していく）
App.js←これがメインのファイルになってくる。
import logoを消す
<header></header>まで全部消す

index.js
import reportWevVitals from……も消す

真っ白のキャンパスが描かれるのでこれからスタート

コンポーネントをApp.jsに入れていく
<Header/>（頭文字を大文字にしてスラッシュで閉じるのがReactの基本）
ヘッダーコンポーネントと言うパーツを取り付けるよって感じだね。（中身は色々あるけど詳しくはコンポーネントを見てよね～ってな感じだ）

srcの階層にディレクトリを作るcomponents（もちろん別名でも大丈夫）
componentsの中にHeader.jsを作成（さらに細分化するときはHeader components等としてフォルダを作ったりする）
ひな形を作成していく
rafceと打ってタブで保管する（ひな形ができない場合は拡張機能でES7+React/Redux/……が入っていない）

App.jsでHeaderをimportするとHeaderが呼び出される。

Componentの中のheader.jsでヘッダーを作っていく。

import React from 'react'

const Header = () => {
  return (
   <div>
     <header>
        <div className='logo'>
            <h3>Valeur F</h3>
        </div>
        <nav>
            <ul>
                <li>
                    Home
                </li>
                <li>
                    EC
                </li>
                <li>
                    Huwatto
                </li>
            </ul>
        </nav>
      </header>
    </div>
  )
}

export default Header

※app.cssで形色などをあてていく

.App{widht 100% 
height 100% 
fontsize=16px}

header{display: flex;
justify-contents:space-arowond; 
aline-items:center;
background color:black;
color: white;
position:fixed;
width:100%;
z-index:10;
}
この辺は好みで作っていく
nav ul li{
list-style:none;
display:inline-block;
margin-right:30px;}横並びになる

nav ul li a {
text-decolation:none;
color:white;
transition:all 0.2s;
}後々これはahrefタグではなくなる。

nav ul li a:hover{
color:green;}

ルーティングの設定
Reactでルーティング（ページの遷移）を設定するのは新しいターミナルを追加して
npm i react-router-dom （←npm i -Dでもよい）と打ち込むと簡単にルーティングできるライブラリが追加される。
App.jsにルーティングしたいコンポーネントを作成していく。

<Header/>←もとからある
<Home/>
<EC/>

componentsにHome.jsとEc.jsを新規で作る。作り方はHeader.jsと同じrafce

App.jsにHome.jsとEc.jsをimport文で貼り付けしておく（して置かないと呼び出せないぞ）
import{BrouserRouter as Router,Route,Routes}from "react-router-dom"の文言追加

全体的にで囲ってで遷移させたいものを囲う。
更にa=hrefの代わりに<Route path="/"></Route>と書く※下記参照

import './App.css';

import Ec from './components/Ec';
import Header from './components/Header';
import { BrowserRouter as Router,Route,Routes } from "react-router-dom" 
import Home from './components/Home';
import Huwatto from './components/Huwatto';

function App() {
  return (
      <Router>

    <div className="App">
      
      <Header/>
      <Routes>
        <Route path='/' element= {<Home/>}/>
        <Route path='/ec' element= {<Ec/>}/>
        <Route path='/huwatto' element= {<Huwatto/>}/>
       

      </Routes>



    </div>
      </Router>
  );
}

export default App;

この段階で/ecとか入れるとルーティングをしてくれるが、urlで直打ちしないと遷移しないので下記を記入してクリックで遷移するようにする。

Header.jsにimport{Link} from "react-router-dom;を追記
後は下記のように

import React from 'react'
import { Link } from 'react-router-dom'

const Header = () => {
  return (
    <div>
      <header>
        <div className='logo'>
            <h3>Valeur F</h3>
        </div>
        <nav>
            <ul>
                <li>
                    <Link to="/">Home</Link>
                    {/* <a href='#'></a> */}
                </li>
                <li>
                    <Link to="/ec">EC</Link>
                </li>
                <li>
                <Link to="/huwatto">Huwatto</Link>
                </li>
            </ul>
        </nav>
      </header>
    </div>
  )
}

export default Header

　　　
これでルートの設定ができました。

追記
reactで画像を読み出す場合は

import img1Image from "../Images/img1.jpg";

<img src={img1Image} />