My React Learning Note (2)

Topic: React Basics

¶My React Learning Note (1)

¶Hover effect

//menu-item
overflow: hidden;

&:hover {
    cursor: pointer;
  
    & .background-image {
      transform: scale(1.1);
      transition: transform 6s cubic-bezier(0.25, 0.45, 0.45, 0.95);
    }
  
    & .content {
      opacity: 0.9;
    }
  }

//menu-item
<div
      className="background-image"
      style={{
        backgroundImage: `url(${imageUrl})`,
      }}
    />

¶Routing

Server focuses on data: REST

Frontend: Single Page Application

React does not have built-in routing

¶React Router

https://reactrouter.com/web/guides/quick-start

//index.js
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

https://github.com/ZhangMYihua/react-router-demo

check this repo to know the demo code for Router, Switch

import React from 'react';
import { Route, Link } from 'react-router-dom';

import './App.css';

const HomePage = props => {
  console.log(props);
  return (
    <div>
      <button onClick={() => props.history.push('/topics')}>Topics </button>
      <h1>HOME PAGE</h1>
    </div>
  );
};

const TopicsList = props => {
  return (
    <div>
      <h1>TOPIC LIST PAGE</h1>
      <Link to={`${props.match.url}/13`}>TO TOPIC 13</Link>
      <Link to={`${props.match.url}/17`}>TO TOPIC 17</Link>
      <Link to={`${props.match.url}/21`}>TO TOPIC 21</Link>
    </div>
  );
};

const TopicDetail = props => {
  return (
    <div>
      <h1>TOPIC DETAIL PAGE: {props.match.params.topicId}</h1>
    </div>
  );
};

function App() {
  return (
    <div>
      <Route exact path='/' component={HomePage} />
      <Route exact path='/blog/asdqw/topics' component={TopicsList} />
      <Route path='/blog/asdqw/topics/:topicId' component={TopicDetail} />
      <Route exact path='/blog/topics' component={TopicsList} />
      <Route path='/blog/topics/:topicId' component={TopicDetail} />
    </div>
  );
}

export default App;

Fast way of passing attributes to props:

{this.state.sections.map(({ id, ...otherSectionProps }) => (
          <MenuItem key={id} {...otherSectionProps}></MenuItem>
        ))}

¶Navigate

<div
    className={`${size} menu-item`}
    onClick={() => history.push(`${match.url}${linkUrl}`)}
  >
  ...
  </div?
  
export default withRouter(MenuItem);

By using withRouter: it has the ability of getting the history

¶Forms

1. Decide on Components
2. Decide the State and where it lives
3. What changes when state changes

Here uses class component for the convenience of using arrow function to have access to this.state

//Handle submitting the form
handleSubmit = (event) => {
    event.preventDefault();

    this.setState({ email: "", password: "" });
  };

  //this will auto fill name with name and the value to be the value
  //Handle updating the state
  handleChange = (event) => {
    const { value, name } = event.target;
    this.setState({ [name]: value });
  };

//Can dynamically set className or Label
const FormInput = ({ handleChange, label, ...otherProps }) => (
  <div className="group">
    <input className="form-input" onChange={handleChange} {...otherProps} />
    {label ? (
      <label
        className={`${
          otherProps.value.length ? "shrink" : ""
        } form-input-label`}
      >
        {label}
      </label>
    ) : null}
  </div>
);

¶Firebase

After setting all the configs of Firebase Auth. We can use

//Class component App.js
constructor() {
    super();

    this.state = {
      currentUser: null,
    };
  }
...
componentDidMount() {
    auth.onAuthStateChanged((user) => {
      this.setState({ currentUser: user });
      console.log(this.state.currentUser);
    });
  }

to automatically check if a user is logged in or not. Then we can use JWT to auth user to the backend.

We can then pass this currentUser to Header to set SignIn SignOut

const Header = ({ currentUser }) => (
  <div className="header">
    <Link className="logo-container" to="/">
      <Logo className="logo" />
    </Link>
    <div className="options">
      <Link className="option" to="/shop">
        SHOP
      </Link>
      <Link className="option" to="/shop">
        CONTACT
      </Link>
      {
        currentUser ? <div className="option" onClick={() => auth.signOut()}>SIGN OUT</div>: <Link className="option" to="/signin">SIGN IN</Link>
      }
    </div>
  </div>
);

¶About SetState()

handleChange = (event) => {
    const { name, value } = event.target;

    this.setState({ [name]: value });
  };

We can use handleChange to handle the input to be sent to state. But what {[name]: value} exactly does?

here name is a variable name, using [name] means pass the string that variable represents to the place of [name]!