Category: React

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.