React-SideBar

使用するライブラリ

$ npm i styled-components
$ npm install react-icons —save 

styled-components?

styled-componsesは、JSでCSSを使用するのに役立つスタイルフレームワークです.
応答コンポーネントに特定のモデリングを提供することで、再利用性を向上させ、JavaScriptの影響を受けるモデリングを簡素化できます.
従来の動作で使用されているCSSメソッド

  const divStyle = {
    backgroundColor: "black",
    width: "100px",
    height: "100px"
  };

  return <div style={divStyle}></div>

Styled-コンポーネントの使用

  const StyledDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
  `;

return <StyledDiv></StyledDiv>

styled-conentsは、styleを適用したコンポーネントを直接生成することができ、コードによる造形の使用を低減することができる.

React Icon

Webページを実装する場合は、反応アイコンを使用してアイコンをすばやく挿入できます.

import { 아이콘 이름 } from 'react-icons/아이콘 카테고리';
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}

React-SideBarファイル構造

📂 node_modules

package.jsonにおけるモジュール依存を含む全モジュール

📂 public

index.html(仮想DOM用htmlファイル)

データ(アナログデータ管理)

📂 src
📄 index.js
📄 App.js
📄 reportWebVitals.js
📄 App.css
📁 components
📄 Sidebar.js
📄 SidebarData.js
📄 Overview.js
📁 pages
📄 Reports.js
📄 Reports.js
📄 Team.js

エラーの修正

react-router-domがバージョン6にアップグレードされるにつれて、スイッチはサポートされなくなりました.
また、コンポーネントもelementになりました.

import { BrowserRouter as Router, Routes, Route }from 'react-router-dom';

function App() {  
  return (
    <Router>
      <Sidebar />
      <Routes> // Switch -> Routes
        <Route path='/overview' exact element={<Overview />} />
        <Route path='/reports' exact element={<Reports/>} />
        <Route path='/reports/reports1' exact element={<ReportsOne/>} />
        <Route path='/reports/reports2' exact element={<ReportsTwo/>} />
        <Route path='/reports/reports3' exact element={<ReportsThree/>} />
        <Route path='/team' exact element={<Team/>} />
      </Routes>
    </Router>
  );
}

export default App; 

function App() {
  return (
    <Router>
      <Sidebar />
      <Routes>
      	<!-- React Router Dom v6 - 함수는 React 자식으로 유효하지 않습니다.-->
        <!-- <Route path='/overview' exact element={Overview} />        
        <Route path='/reports' exact element={Reports} />
        <Route path='/reports/reports1' exact element={ReportsOne} />
        <Route path='/reports/reports2' exact element={ReportsTwo} />
        <Route path='/reports/reports3' exact element={ReportsThree} />
        <Route path='/team' exact element={Team} />
      </Routes>
    </Router>
  );
}
export default App;

// element= {Overview} -> element= {<Overview />}
//注意：React Router Dom v 6-FunctionsはReact childではありません