es.js

// const name = 'Roger'

// function bob(name){
//   // ``, $, {}  => `${whatever variable you wish to interpolate}`
//   return `Hi ${name}`
// }


const name = {
  fname: 'Bob',
  lname: 'Seger',
  email: "bob@seger.com",
  phone: "344-444-5555",
  address: 'bobs house of pain'
}

const name2 = {
  fname: 'Dave',
  lname: 'Shatterkirk'
}


function bob(nameObj){
  const { fname, lname } = nameObj
  return `Hi ${fname} ${lname}`
}

bob(name)


const team = ["G-man", "David", "Enzo", "Andy"]

const [ classmate1, classmate2, ...everyoneElse] = team

const store = {
  storename: '711',
  location: 'Calgary'
}

// store.location = "Edmonton"

const newStore = {
  ...store,
  location: "Edmonton"
}


// const crm = {
//   person,
//   company
// }

const person = {
  // person this individual
  // name
  // email
}

const company = {
  // company specific data as it relates to the person
  // location,
  // address,
  // business line
  // buyer or not buyer
}


// const crm = {
//   ...person,
//   ...company
// }

index.jsx

// Boiler plate code -- Start
// ES Modules -> ES6 => EcmaScript/JavaScript
import React from 'react'; // <== ES6 Modules; this is how we import libraries in React
import ReactDOM from 'react-dom'; // <== ES6 Modules; this is how we import libraries in React
// Boiler plate code -- End

// HelloMessage is a component in React. We create components like functions to work together to build dynamic data driven interfaces
function HelloMessage({name, location}){ <= Destructuring 'props', which is a React object you assign key:value pairs too.
  // const {name, location} = props // <= Alternative to destructuring inside the parameter area of the function.
  return (
    <div>
      <h1>Hello, I am {name} {location}</h1>
      <p>I love {name}</p>
    </div>
  )
}


// Boilerplate code except for 'HelloMessage', which is custom code in a form that you will write.
ReactDOM.render(
  <HelloMessage name={"Bob Seger"} location={'Calgary'} /> // <= Where you pass data into 'components' which is what HelloMessage is
  ,
  document.getElementById('root')
);

Resources.md

Additional Resources when preparing for React:

Resources:

• Closures: Video

• Closures: Text

• Closures: Text

• String/Template Literals

• Object Destructuring

• Array Destructuring

• Spread

• Rest

• ES Modules

• ES Modules Cheatsheet

• Ternaries

• Ternary Pitfalls in React/JSX

• tag - Defer || Async

  **Please note I used many different authors from YouTube to give you some different experiences of the great authors ** available to you. I recommend thinking about which author presents in a style you most like and subscribe and follow them. My personal favourite is: FunFunFunction, but he retired. Maybe you all will find someone new that I don't know of that does great videos too.