Memo 2023-03-08¶

17:15～

React の流儀
React Developer Toolsについて

React Routerについて¶

React Router

install

npm install react-router-dom

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.js

import './App.css';
import { Routes, Route } from 'react-router-dom';

import Default from './components/Default';
import Sample1 from './components/Sample1';

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Default />} />
        <Route path="/sample1" element={<Sample1 />} />
      </Routes>
    </div>
  );
}

export default App;

最終回(今期の)までの宿題¶

• reactを使ってデモアプリを実装する（何でもよし）
• CodeCommitにpushする
• ポイントについて説明する（なにかあれば）

↑CloudFront＋S3で認証（Cognito）付きで公開する（必要であれば人に見せられる用に）※私(K)担当