Author: John Au-Yeung

To use react-fontawesome with React, we run

npm i react-fontawesome

to install the icon packages.

Then we use it by writing

const React = require("react");
const FontAwesome = require("react-fontawesome");

const MyComponent = () => {
  return (
    <FontAwesome
      className="super-crazy-colors"
      name="rocket"
      size="2x"
      spin
      style={{ textShadow: "0 1px 0 rgba(0, 0, 0, 0.1)" }}
    />
  );
};

to add the FontAwesome component into the MyComponent React component.

To use if else inside JSX in React, we can add them in a function.

For instance, we write

const MyComponent = () => {
  return (
    <div>
      {(() => {
        if (someCase) {
          return <div>someCase</div>;
        } else if (otherCase) {
          return <div>otherCase</div>;
        } else {
          return <div>catch all</div>;
        }
      })()}
    </div>
  );
};

to add the if-else statements in the function.

We call the function immediately so we render the returned value.

To use radio buttons in React class-based component, we add inputs with type radio.

For instance, we write

class App extends React.Component {
  
  setGender(event) {
    console.log(event.target.value);
  }
  
  render() {
    return ( 
      <div onChange={this.setGender.bind(this)}>
        <input type="radio" value="MALE" name="gender"/> Male
        <input type="radio" value="FEMALE" name="gender"/> Female
      </div>
     )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

to add 2 radio buttons into the div.

We set the value prop to set the value of event.target.valye when we click on a radio button.

And then we set them to the same name so we can pick on either one to pick a value.

Then we set onChange to this.setGender.bind(this) to get the checked value with event.target.value when we pick a choice.

To use the React useMemo hook, we call useMemo with a callback to return the value we want and an array with the values to watch to return the result in the callback.

For instance, we write

const MyComponent = () => {
  const computeLetterCount = (word) => {
    let i = 0;
    while (i < 1000000000) i++;
    return word.length;
  };

  const letterCount = useMemo(() => computeLetterCount(word), [word]);
  //...
};

to create the computeLetterCount function that returns some value derived from the word state.

Then we call useMemo with a function that calls computeLetterCount with word to do the computation.

We pass in [word] as the 2nd argument so we return the latest value of the callback with useMemo when word changes.

To use React Router with React, we install the react-router-dom and use it.

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.