React 的初始引用方法-為了容易忘記的我

预先要做的事情是安装VSCODE、Node，以及使其能够使用npm。另外，也要配置bash。

在您想要创建的文件夹中打开Visual Studio Code
在终端中键入npx create-react-app +”您喜欢的文件夹名称”，自动创建React的模板
完成React模板后，祝您愉快编码！
在终端中通过cd “您喜欢的文件夹名称”命令切换到该文件夹，然后使用code .命令打开该层级的VS Code。

为了确认本地服务器是否启动，可以在终端中输入”npm run start”，本地服务器将会在3000端口上打开（可能需要一些时间）。

删除不必要的东西。
app.test.js
logo.svg
reportWebVitals.js
全部删除

将下面的内容全部删除
删除App.css（将来会再添加）
App.js 会成为主要的文件。
删除import logo
将

部分全部删除

index.js
从……中移除对reportWebVitals的引入。

从现在开始，画出了纯白无瑕的校园。

把组件放进App.js里面去，

（首字母要大写，用斜杠关闭是React的基本规范）
就是要安装一个叫Header的组件呢。（具体内容有很多，需要看组件才能了解哦～）

在src目录下创建一个名为components的文件夹（当然也可以用别的名称）。
在components文件夹下创建Header.js文件（如果需要进一步拆分，可以创建Header components等文件夹）。
逐渐创建模板。
按下rafce并保存在标签页中（如果无法创建模板，可能是未安装ES7+React/Redux/等扩展插件）。

当在App.js中导入Header时，会调用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中使用import命令粘贴Home.js和Ec.js（如果不粘贴，无法调用）
添加以下代码：import { BrowserRouter as Router, Route, Routes } from “react-router-dom”

把想要全部包围和转移的内容进行包围处理。
另外，可以将a href替换成，具体请参考下方描述。

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中添加导入{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} />