React JS

Create react app

npx create-react-app my-app
cd my-app
npm start

Stateless component

import React from 'react'

const YourComponent = () => <div>aaa</div>

export default YourComponent

Properties in stateless component

const YourComponent = ({ propExample1, example2 }) => (
  <div>
    <h1>properties from parent component:</h1>
    <ul>
      <li>{propExample1}</li>
      <li>{example2}</li>
    </ul>
  </div>
)

// <YourComponent propExample1="aaa" example2="bbb" />

Stateful component

import React from 'react'

class YourComponent extends React.Component {
  render() {
    return <div>aaa</div>
  }
}

export default YourComponent

Properties in stateful component

class YourComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>
          properties from parent component:
        </h1>
        <ul>
          <li>{this.props.propExample1}</li>
          <li>{this.props.example2}</li>
        </ul>
      </div>
    )
  }
}

Children

const Component1 = (props) => (
  <div>{props.children}</div>
)

const Component2 = () => (
  <Component1>
    <h1>Component 1</h1>
  </Component1>
)

ReactJS lifecycle

State

class CountClicks extends React.Component {
  state = {
    clicks: 0
  }

  onButtonClick = () => {
    this.setState(prevState => ({
      clicks: prevState.clicks + 1
    }))
  }

  render() {
    return (
      <div>
        <button onClick={this.onButtonClick}>
          Click me
        </button>
        <span>
          The button clicked 
          {this.state.clicks} times.
        </span>
      </div>
    )
  }
}

useState hook

import React, { useState } from 'react'

function Example() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click here to increase the counter.
      </button>
    </div>
  )
}

High order component

// withLoading.js
const withLoading = (WrappedComponent) => {
  return (props = {}) => {
    if (props.isLoading) {
      return <h1>Loading...</h1>;
    }
    return <WrappedComponent {...props} />;
  };
};

export default withLoading;

// App.js
import withLoading from './withLoading';

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default withLoading(App);

// index.js
ReactDOM.render(
  <React.StrictMode>
    <App isLoading={false} />
  </React.StrictMode>,
  document.getElementById('root')
);

Use SASS in React App

npm i node-sass@4.14.1
//or
yarn add node-sass@4.14.1

React Router

Install dependencies

yarn add react-router-dom 
// or: npm i react-router-dom

Switch

//Renders the first <Route> that matches the location.

import  { 
  BrowserRouter, 
  Switch, 
  Route 
} from 'react-router'

//private route example: https://github.com/shidqi/dumbsound/blob/master/client/src/routes.jsx

const YourComponent = () => (
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/:user" component={User}/>
      <Route component={NoMatch}/>
    </Switch>
  </BrowserRouter>
);


export default YourComponent

Link

import { Link } from 'react-router-dom'

const Links = ({ match }) => (
  <nav>
    <Link to="/">Home</Link>
    <Link to={{ pathname: '/dashboard' }}>
      Dashboard
    </Link>
    <Link replace to="/about">About</Link>
  </nav>
)

export default Links

NavLink

import { NavLink } from 'react-router-dom'

const Links = ({ match }) => (
  <nav>
    <NavLink activeClassName="active" to="/">
      Home
    </NavLink>
    <NavLink activeClassName="active" to="/dashboard">
      Dashboard
    </NavLink>
    <NavLink activeClassName="active" to="/about">
      About
    </NavLink>
  </nav>
)

export default Links

Match

const Dashboard = ({ match }) => (
  <ul>
    <li>params: {JSON.stringify(match.params)}</li>
    <li>isExact: {match.isExact.toString()}</li>
    <li>path: {match.path}</li>
    <li>url: {match.url}</li>
  </ul>
)

<Route path="/dashboard" component={Dashboard}/>