1 Flashcards
What is ES6
ES6 is a newer version of Javascript that allows concise and declarative syntax.
What is JSX
Javascript rendition of HTML
How do you import React?
import React from “react”
How do you import ReactDOM?
import ReactDOM from “react-dom”
How do you render to the DOM in React?
ReactDOM.render(<h1>code here</h1>. document.getElementById(“root”))
where root is the div references in your index.html
How can you add multiple html tags into the DOM?
Wrap them in a <div></div>
What is the syntax for a basic function?
function MyApp() { return (<h1>Hello World</h1>) }
Basic full example.
import React from “react”
import ReactDOM from “react-dom”
function MyApp() {
return (
<div>
<h1>Kevin Jones</h1>
<p>I like turtles!</p>
<p>I also like...</p>
<ul>
<li>Pizza</li>
<li>Sushi</li>
<li>KungFu</li>
</ul>
</div>
)
}
ReactDOM.render(
,
document.getElementById(“root”)
)
How to export a function?
export default MyFunction
How to import a js or jsx from index.js?
import MyFunction from “./MyFunction”
how to add style to a js or jsx html elements?
Use className i.e. <h1> - a DOM API property
update styles.css</h1>
Syntax for basic arrow function, hello world? (useful for anon functions)
function HelloWorld = () => <h1>Hello world!</h1>
How to use variables in jsx?
Use curly braces… i.e. <h1>Hello {firstName} {lastName}</h1>
allows javascript execution. another example…
<h1>Hello {`${firstName} ${lastName}`}!</h1>
Example of dynamic variable rendering with React
function App() {
const date = new Date()
const hours = date.getHours()
let timeOfDay
if (hours < 12) {
timeOfDay = "morning"
} else if (hours >= 12 && hours < 17) {
timeOfDay = "afternoon"
} else {
timeOfDay = "night"
}
return (
<h1>Good {timeOfDay}!</h1>
)
}
How to set background color on style tag with jsx? And font size?
Use backgroundColor: “#FF8C00” camel case syntax.
or fontSize: 24
Example dynamic styles.
import React from “react”
import ReactDOM from “react-dom”
function App() {
const date = new Date(2018, 6, 31, 15)
const hours = date.getHours()
let timeOfDay
const styles = {
fontSize: 30
}
if (hours < 12) {
timeOfDay = "morning"
styles.color = "#04756F"
} else if (hours >= 12 && hours < 17) {
timeOfDay = "afternoon"
styles.color = "#8914A3"
} else {
timeOfDay = "night"
styles.color = "#D90000"
}
return (
<h1 style="">Good {timeOfDay}!</h1>
)
}
ReactDOM.render(, document.getElementById(“root”))
How to read props objects, example ContactCard.js
import React from “react”
function ContactCard(props) {
console.log(props)
return (
<div>
<img></img>
<h3>{props.contact.name}</h3>
<p>Phone: {props.contact.phone}</p>
<p>Email: {props.contact.email}</p>
</div>
)
}
export default ContactCard
How to pass object values via props? App.js
import React from “react”
import ContactCard from “./ContactCard”
function App() {
return (
<div>
</div> ) }
export default App
Check for existence of a specific variable and render dynamically?
Dynamic style using ternary
<h3>Question: {props.question}</h3>
Or…
<h3>Question: {props.question}</h3>
Example map function
const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const doubled = nums.map(function(num) {
return num * 2
})
console.log(doubled)How to create const arrow function of data from JSON object. (using map function)
import React from “react”
import Joke from “./Joke”
import jokesData from “./jokesData”
function App() {
const jokeComponents = jokesData.map(joke => )
return (
<div>
{jokeComponents}
</div>
)
}
export default App
References for Javascript global objects (functions)
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findindex
convert to specific currency string
<p>{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })}</p>
example of passing nested object from one component to another…
import React from “react”
import Product from “./Product”
import productsData from “./vschoolProducts”
function App() {
const productComponents = productsData.map(item => )
return (
<div>
{productComponents}
</div>
)
}
export default App
==== Product.js ======
import React from “react”
function Product(props) {
return (
<div>
<h2>{props.product.name}</h2>
<p>{props.product.price.toLocaleString("en-US", { style: "currency", currency: "USD" })} - {props.product.description}</p>
</div>
)
}
export default Product
function vs class method example
function App() {
return (
<div>
<h1>Code goes here</h1>
</div>
)
}
class App extends React.Component {
render() {
return (
<div>
<h1>Code goes here</h1>
</div>
)
}
}
Basic setup of state using a constructor
import React from “react”
// https://scrimba.com/p/p4Mrt9/cQnMDHD
class App extends React.Component {
constructor() {
super()
this.state = {
answer: "Yes"
}
}
render() {
return (
<div>
<h1>Is state important to know? {this.state.answer}</h1>
</div>
)
}
}
export default App
How to pass down state via props to a child component?
Another state example
import React, {Component} from “react”
// Challenge: // Given an incomplete class-based component without a constructor, // add a constructor and initialize state to fix the broken component.
class App extends Component {
constructor() {
super()
this.state = {
name: "Kevin",
age: "41"
}
}
render() {
return (
<div>
<h1>{this.state.name}</h1>
<h3>{this.state.age} years old</h3>
</div>
)
}
}
export default App
Example of dynamic variables based on state
import React from “react”
class App extends React.Component {
constructor() {
super()
this.state = {
isLoggedIn: true
}
}
render() {
let wordDisplay
if (this.state.isLoggedIn === true) {
wordDisplay = "in"
} else {
wordDisplay = "out"
}
return (
<div>
<h1>You are currently logged {wordDisplay}</h1>
</div>
)
}
Example click function with console log
import React from “react”
function handleClick() {
console.log("I was clicked")
}
function App() {
return (
<div>
<img>
<br>
<br>
Click me
</div>
)
}
export default App
//full list of supported events: https://reactjs.org/docs/events.html#supported-events
How to change state in react?
call this.setState()
Handleclick counter full example…
import React from “react”
class App extends React.Component {
constructor() {
super()
this.state = {
count: 0
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
this.setState(prevState => {
return {
count: prevState.count + 1
}
})
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
Change!
</div>
)
}
}
export default App
Example state with multiple buttons
import React from “react”
class App extends React.Component {
constructor() {
super()
this.state = {
count: 0
}
this.addTo = this.addTo.bind(this)
this.subFrom = this.subFrom.bind(this)
}
addTo() {
this.setState(prevState => {
return {
count: prevState.count + 1
}
})
}
subFrom() {
this.setState(prevState => {
return {
count: prevState.count - 1
}
})
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
\+1
-1
</div>
)
}
}
export default App
How to create an onChange that has props id passed to it?
from render() function:
const todoItems = this.state.todos.map(item => )
handleChange(id) { stuff }
to Component:
props.handleChange(props.item.id)}
/>
Todo checkbox example.
===== App.js =====
import React from “react”
import TodoItem from “./TodoItem”
import todosData from “./todosData”
class App extends React.Component {
constructor() {
super()
this.state = {
todos: todosData
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(id) {
this.setState(prevState => {
const updatedTodos = prevState.todos.map(todo => {
if (todo.id === id) {
todo.completed = !todo.completed
}
return todo
})
return {
todos: updatedTodos
}
})
}
render() {
const todoItems = this.state.todos.map(item => )
return (
<div>
{todoItems}
</div>
)
}
}
export default App
===== TodoItem.js =====
import React from “react”
function TodoItem(props) {
return (
<div>
props.handleChange(props.item.id)}
/>
<p>{props.item.text}</p>
</div>
)
}
export default TodoItem
What lifecycle method should be used to do initial data ingest?
componentDidMount()
What lifecycle method should be used to check whether a specific component should update?
shouldComponentUpdate(nextProps, nextState) { // check for true or fales here }
What lifecycle component should be uses to clean up or teardown before your component disappears?
componentWillUnmount()
How to use derived state from props? When Components need their own dedicated state. Discouraged by React team.
static getDerivedStateFromProps(props, state) { }
// blog on why this isn't really needed // https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
How can I use a lifecycle method to backup an object or state?
getSnapshotBeforeUpdate() { }
How to use lifecycle method to always run code when component updates?
componentDidUpdate(prevProps, prevState) { }
