Category: React

To add routes with React, we use React Router.

To install it, we run

npm install react-router-dom

Then we use it by writing

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

to add the Switch component with the Route components inside.

The Route components have the route components nested inside them.

The path is set to the path that users navigate to to render the component inside.

To use saved image with React, we can call require with the image path to and set the returned path as the value of the src prop of the img element.

For instance, we write

<img alt="timer" src={require('./images/timer.png')} />

to add an img element with the src prop set to the path returned by calling require with the local image path.

To add an SVG with React, we can import it as a component and add it directly into our components.

For instance, we write

import React from "react";
import { ReactComponent as BrandIcon } from "./assets/brand-icon.svg";

export default function () {
  return (
    <div>
      <BrandIcon />
    </div>
  );
}

to import the BrandIcon SVG and put it into our component to render it.

<Grid container spacing={24}>
  <Grid item xs={4}>
    <TextField
      label="PS"
      value={ps}
      onChange={handleChange}
      margin="normal"
      type="number"
      margin="dense"
      variant="filled"
    />
  </Grid>
  <Grid item xs={4}>
    <TextField
      label="MOOE"
      value={mode}
      onChange={handleChange}
      margin="normal"
      type="number"
      margin="dense"
      variant="filled"
    />
  </Grid>
  <Grid item xs={4}>
    <TextField
      label="CO"
      value={co}
      onChange={handleChange}
      margin="normal"
      type="number"
      margin="dense"
      variant="filled"
    />
  </Grid>
</Grid>;

to add our TextFields into Grid components.

We set the width relative to the screen’s width with xs to set the width to 4 out of 12 of the screen width for all screen sizes.

The inner Grids has the item prop to make them an item inside the Grid with the container prop.