React Basics

Setup

After running create-react-app,

All packages are listed in package.json.
Delete all src files except index.js.
Structure of the project,

flowchart TB subgraph a[Project] direction TB subgraph b[src] direction LR A[App.js] --> B[index.js] subgraph b1[components] direction TB subgraph b11[CustomButton] direction LR B11[styles.js] --> B12[CustomButton.jsx] end subgraph b12[Graph] direction LR B13[styles.js] --> B14[Graph.jsx] end b11 --> B1[index.js] b12 --> B1 end b1 --> A end subgraph c[public] direction LR C[index.html]; end B --> C; D[package.json] end;

Syntax

index.js (Don't need to touch most of the time)


import React from "react"
import ReactDOM from "react-dom"
import App from './components/App'

const reactContentRoot = document.getElementById("root")

ReactDOM.render(<App/>, reactContentRoot)

App.js


import React from "react"
import customButton from "./customButton"

const App = () => {
    return {
        <p> I am Leo. </>
    }
}
export default App

Functions


const funcname = (arg1,arg2) => {
    return x
}

Import


import x,{a,b} from y

Export


export default jsscriptname

Hooks


var,setter = useState(initial_var)
useEffect

.css, just normal css script


import "./customButton.css" # in .js

Install external js library


npm install @material-ui/core
npm install --save package --legacy-peer-deps # if cannot resolve dep

Practice app

https://zcemycl.github.io/practice-app/

Useful dependencies

@material-ui/core
@material-ui/icons
@chec/commerce.js
@stripe/react-stripe-js
@stripe/stripe-js
react-router-dom
react-hook-form
react-chartjs-2
react-socket-io
three @react-three/fiber
@react-three/drei
ammojs cannonjs ammo-physics
leaflet react-leaflet react-leaflet-geosearch


## from package.json
 "browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},
## to 
"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],
##
sudo rm -r node_modules/.cache
sudo npm install
sudo yarn start

react-dat-gui

Useful extensions in vscode

Auto Rename Tag
Bracket Pair Colorizer
ES7 React/Redux/GraphQL/React-Native snippets