React Commands

How to create & run first React App

(click to expand/hide)

Creating React App

(click to expand/hide)

• In bash

    npx create-react-app <app name>

Start development server

(click to expand/hide)

• In bash located into the react app directory

    cd <app name>

    npm start

Upgrade React App version

(click to expand/hide)

• In bash located into the react app directory

    cd <app name>

    npm install react-scripts@latest

React 101

(click to expand/hide)

Import libraries in js file

(click to expand/hide)

import React from 'react';
import ReactDOM from 'react-dom/client';

Inject code to an element (ex. div/h1/p)

(click to expand/hide)

import React from 'react';
import ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <h1>
    Hello World
  </h1>
);

Calling js variable in an element (ex. div/h1/p)

(click to expand/hide)

import React from "react";

function Footer() {
  const currentYear = new Date().getFullYear();
  return (
    <footer>
      <p>Copyright ⓒ {currentYear}</p>
    </footer>
  );
}

export default Footer;

React function with parameter (React props)

(click to expand/hide)

import React from "react";
import ReactDOM from "react-dom";

function Card(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <img src={props.img} alt="avatar_img" />
      <p>{props.tel}</p>
      <p>{props.email}</p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>
    <h1>My Contacts</h1>
    <Card
      name="Beyonce"
      img="https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg"
      tel="+123 456 789"
      email="b@beyonce.com"
    />
    <Card
      name="Jack Bauer"
      img="https://pbs.twimg.com/profile_images/625247595825246208/X3XLea04_400x400.jpg"
      tel="+7387384587"
      email="jack@nowhere.com"
    />
  </div>,
  document.getElementById("root")
);

useState function

(click to expand/hide)

• const [state, setState] = useState(initialState);

  import React, { useState } from "react";
  
  function App() {
    const [count, setCount] = useState(0);
  
    function increase() {
      setCount(count + 1);
    }
  
    function decrease() {
      setCount(count - 1);
    }
  
    return (
      <div className="container">
        <h1>{count}</h1>
        <button onClick={decrease}>-</button>
        <button onClick={increase}>+</button>
      </div>
    );
  }
  
  export default App;

Appending element into a state array

(click to expand/hide)

  const [inputText, setInputText] = useState("");
  const [items, setItems] = useState([]);

  function handleChange(event) {
    const newValue = event.target.value;
    setInputText(newValue);
  }

  function addItem() {
    setItems(prevItems => {
      return [...prevItems, inputText];
    });
    setInputText("");
  }

Adding link to a react component

(click to expand/hide)

1. First install react-router-dom

   npm install react-router-dom

2. In index.js import BrowserRouter

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import { BrowserRouter } from 'react-router-dom'
   import App from './App';
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
       <BrowserRouter>
         <App />
       </BrowserRouter>
   );

3. Finally add to the desired react component

    import React from 'react';
    import { Link } from 'react-router-dom';
    import './GameCard.css';
    
    const GameCard = (props) => {
      return (
        <Link to='/about' className="game-card">
          <img className="game-card__image" src={props.imageUrl} alt={props.imgTitle} />
          <div className="game-card__details">
            <h2 className="game-card__title">{props.title}</h2>
            <p className="game-card__description">{props.description}</p>
          </div>
        </Link>
      );
    };
    
    export default GameCard;

---

Deploy react app as github pages

(click to expand/hide)

1. Make sure to have the react app push to GitHub
2. install npm packages : gh-pages

   npm install gh-pages

3. on package.json, include:
   • "homepage" path on top of the json

     "homepage": "https://<GitHub usersame>.github.io/<repository name>/#"

     
   • "predeploy" and "deploy" on "script"

     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",

     
4. If your react app does not use any Route or Anchor tag, please jump to step 7.
   • install react-router-dom if not already installed

      npm install react-router-dom

5. On App.js, add or replace "BrowserRouter/Router" with HashRouter
   • there is nothing need to be change on Route path or Anchor tag path, path can just start with "/"

    import React from 'react';
    import { HashRouter, Routes, Route } from 'react-router-dom';
    import Home from './pages/Home';
    import About from './pages/About';
    import './App.css';
    
    function App() {
      return (
        <HashRouter basename='/'>
            <Routes>
              <Route exact path='/' element={<Home />} />
              <Route path='/about' element={<About />} />
            </Routes>
        </HashRouter>
      );
    }
    
    export default App;

6. Push your code to GitHub if you have not already.
7. On bash, run:

   npm run deploy

8. After step 8 your react app is starting to deploy to GitHub pages, please wait a few moments.
9. I have experienced very slow deployment on my GitHub pages, and looking online for solution I have found this, but I do not know if this solution helps speed up the deployment process at all.

• On public/index.html, add these meta tags:

  <meta http-equiv='cache-control' content='no-cache'>
  <meta http-equiv='expires' content='0'>
  <meta http-equiv='pragma' content='no-cache'>

• Sources I looked at: source1, source2

12. Sources (If you still have troubles these links may help):
    • Deploying Github Pages with create-react-app
    • Deploying a create-react-app with routing to GitHub pages
    • Question: React Router not working with Github Pages
    • Question: My github webpage is not updating after changes are made.
    • Question: How long does it take for GitHub page to show changes after changing index.html

Use Place Autocomplete in React

(click to expand/hide)

• video tutorial
• @react-google-maps/api npm package
• use-places-autocomplete
• @reach/combobox
  • Issue: Reach UI currently does not support React 18.
  • Solution (choose 1):
    1. Downgrade React version
    2. Force install @reach/combobox(might not work)
    3. Find another package
    4. Mui package - google maps place sample included

       • npm install @mui/material @emotion/react @emotion/styled

       • npm install @mui/icons-material

       • additional required package - autosuggest-highlight

         • npm install autosuggest-highlight --save

       • changing MUI search bar style
    5. (Worked) using react-places-autocomplete
       • react-places-autocomplete GitHub Repo
       • with react-script-hook to load script in react component rather than in index.html.
       • video tutorial

External Libraries

Form (Formik)

• Formik Tutorial

Prebuilt Components (Chakra UI)

• Chakra UI provides prebuilt components to help you build your projects faster.
• Documentation

Input Autocomplete (Material UI & Google Maps API)

• MUI Documentation
• Google Maps Place Autocomplete Documentation
• Google Maps Geocoding API overview