Category: React Answers

To install React Bootstrap, we run

npm install react-bootstrap bootstrap

Then in index.js, we add

import 'bootstrap/dist/css/bootstrap.min.css';

to import the CSS.

And in our components, we can add

import { Navbar, Nav, Button } from "react-bootstrap";

to import the components we need.

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.