README.md

Nima Boscarino

React Breakout

What is React anyways?

• It's a javascript framework for UI design

• what is a framework???

  • like a library
  • library???
    • things that you can take and use that are already built for you
  • Express
  • jQuery
  • http

npm i lotide

• let's talk about UI design, why do we need a framework???

  • Button
  • Text
  • Inputs
  • Checkboxes
  • Navigation

• How to understand or learn a framework??

  • FOCUS ON THE GIMMICK!! (gimmick === abstaction)

• What is the gimmick in Express???

  • creating a server and setting up routes
  • setting up routes, how do we do it?? app.get(URL, handler) app.post() MIDDLEWARE
    • generic middleware app.use

• What is the gimmick in jQuery?

  • selector ($(....))

• What is REACT'S major abstraction/gimmick?

  • COMPONENTS!
  • react only re-renders the components that it needs to instead of rerendering the whole DOM

Create a new react app:

npx create-react-app NAME
cd NAME
npm start

Export: why export default???

App.js

import React, { useState } from 'react';
import './App.css'
import CoolComponent, { LessCoolComponent } from './CoolComponent'



// conditional rendering
const Counter = () => {
  const [clickNumber, setClickNumber] = useState(0)

  return (
    <div>
      <h1>Wow, you clicked {clickNumber} times!!</h1>
      <button onClick={() => {
        setClickNumber(clickNumber + 1)
       }}>
        {clickNumber < 10 && "Click me!!"}
        {clickNumber >= 10 && "WOOOOWW THAT'S TOO MUCH CLICKING"}
      </button>
    </div>
  )
}

const AngryCounter = () => {
  const [clickNumber, setClickNumber] = useState(0)

  return (
    <div>
      <h1>Wow, you clicked {clickNumber} times!!</h1>
      {
        clickNumber < 10 ?
          <button onClick={() => {
            setClickNumber(clickNumber + 1)
          }}>
            CLICK ME!
          </button>
          :
          "STOP CLICKING. NO CLICK FOR YOU."
      }
    </div>
  )
}


// A component is a function
// A function returns ONE thing
const App = () => {
  return (
    <div>
      <CoolComponent name="nima" />
      <CoolComponent name="Bradlina" />
      <CoolComponent name="Kristoferetta" />
      <LessCoolComponent name="Janistorine" />
      <CoolComponent />
      <Counter />
      <AngryCounter />
      <Counter />
      <Counter />
      <Counter />
      {
        [1, 2, 3, 4].map(num => <h1>NUMBER: {num}</h1>)
      }
    </div>
  );
}

export default App;

CoolComponent.js

import React from 'react'

const CoolComponent = ({ name }) => {
    return <h1>Hello, {name}!</h1>
}

export const LessCoolComponent = ({ name }) => {
    return <h1>Blah, {name}!</h1>
}


export default CoolComponent