Category: JavaScript

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.

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 react-typed in our React app, we run

yarn add react-typed      

with yarn

or

npm install react-typed --save

with npm.

Then we write

import React, { Component } from "react";
import { render } from "react-dom";
import Typed from "react-typed";

class MyComponent extends Component {
  render() {
    return (
      <div>
        <Typed strings={["Here you can find anything"]} typeSpeed={40} />
        <br />

        <Typed
          strings={[
            "Search for products",
            "Search for categories",
            "Search for brands",
          ]}
          typeSpeed={40}
          backSpeed={50}
          attr="placeholder"
          loop
        >
          <input type="text" />
        </Typed>
      </div>
    );
  }
}

render(<MyComponent />, document.getElementById("app"));

to create a component that uses the Typed property from react-typed.

We add the strings that we want to type out into the strings prop array.

And we set the typeSpeed and backSpeed to set the typeing speed and backspace speed.

loop makes the typing effect loop.