Skip to content

Instantly share code, notes, and snippets.

@misterhtmlcss
Created September 21, 2020 15:57
Embed
What would you like to do?
// 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
// }
// 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')
);

Additional Resources when preparing for React:

Resources:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment