きどうはんのう

応答項目を生成するcreate-react-appコマンドのインストール
次のレスポンスを作成するときにglobalとしてインストールできるようになりました.

npm install -g create-react-app

npxを使用してプロジェクトを作成する必要があるため、npmを使用してnpx 설치を作成します.

npm install npx -g

プロジェクトの作成(buur)
プロジェクト名に英字大文字は使用できません

npx create-react-app [프로젝트 이름]

プロジェクトの実行

cd [프로젝트 이름]
npm start

http://localhost:3000/アドレスブラウザが開きます

不要なファイルを削除

src/App.js

src/App.css

src/App.test.js

src/logo.svg

作成するフォルダ

src/components:構成部品が存在するディレクトリ.

src/pages:各ルーティングが存在するディレクトリ.

src/client:ブラウザ側で使用するトップレベルのコンポーネント.サーバ側でレンダリングを実行するため、ディレクトリを個別に分割します.(サーバ側でレンダリングする場合は、サーバ専用のルータを使用する必要があります.)ルータを設定します.

src/server:サーバ側で使用する反応器に関連するコードをここに入れます.

src/shared:サーバとクライアントが共有するコンポーネントアプリケーション.jsはここにあります.

src/lib:Web連動を将来実現するために必要なAPIとコードをここに示します.

Root.js > App.js > pages or components

コンポーネントのモジュール化

トップクラスカテゴリとしてRoot.js>App.jsを使用Nav番バス
Home/Recommend/Search/Mypage
移動

Routerの使用

react-router-dom:ブラウザで使用されるレスポンスルータ

npm install react-router-dom --save

その後、<router> inside another <router>エラーが発生し、ダウングレードされました.

npm install react-router-dom@5.3.0

Root.js

「中華人民共和国対外貿易総協定」をRoot.jsに輸入し、Appを庇護する.

// src/client/Root.js

import React from "react";
import App from '../App';
import { BrowserRouter } from 'react-router-dom';

const Root = () => (
  <BrowserRouter>
      <App/>
  </BrowserRouter>
);

export default Root;

App.js

// src/App.js

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from './pages/Home';
import Recommend from './pages/Recommend';
import Search from './pages/Search';
import MyPage from './pages/MyPage';
import Nav from './components/Nav';
import './styles/common/App.css';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/recommend" component={ Recommend} />
          <Route path="/search" component={ Search} />
          <Route path="/mypage" component={MyPage} />
        </Switch>
        <Nav />
      </div>
    )
  }
}

export default App;

// src/styles/common/App.css

* {
  box-sizing: border-box;
}

.app {
  width: 100%;
  height: 100%;
}

Nav.js

// src/components/Nav.js

import React from "react";
import { NavLink } from "react-router-dom";
import '../styles/common/Nav.css'

const Nav = () => {
  return (
    <nav>
      <div>
        <NavLink to="/">
          Home
        </NavLink>
      </div>
      <div>
        <NavLink to="/recommend">
          Recommend
        </NavLink>
      </div>
      <div>
        <NavLink to="/search">
          Search
        </NavLink>
      </div>
      <div>
        <NavLink to="/mypage">
          MyPage
        </NavLink>
      </div>
    </nav>
  );
};

export default Nav;

// src/styles/common/Nav.css

nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  
  display: flex;
  border: solid 2px;

}

nav > div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

Pagesフォルダにrouter関連のファイルを配置する
書式Home / MyPages / Recommend / Search

// src/pages/...

import React from "react";

class Home extends React.Component {
  render () {
    return (
      <h1>Home</h1>
    )
  }
}

export default Home;

実行結果

リファレンス

https://velopert.com/3417