import React, { Component } from "react"
class MemeGenerator extends Component {
constructor() {
super()
this.state = {
topText: "",
bottomText: "",
randomImg: "http://i.imgflip.com/1bij.jpg",
allMemeImgs: []
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
} import React from 'react';
import ReactDOM from 'react-dom';
class Main extends React.Component {
render() {
return (
<h1>Hello world!</h1>
);
}
}
ReactDOM.render(<Main />, document.getElementById('root')); import React from "react"
import ReactDOM from "react-dom"
// JSX
ReactDOM.render(<div><h1>Hello world!</h1><p>This is a paragraph</p></div>, document.getElementById("root"))
var myNewP = document.createElement("p")
myNewP.innerHTML = "This is a paragraph."
import React from "react"
import ReactDOM from "react-dom"
ReactDOM.render(
<ul>
<li></li>
<li></li>
<li></li>
</ul>) import React from "react"
import ReactDOM from "react-dom"
function MyApp() {
return (
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
)
}
ReactDOM.render( import React from "react"
import ReactDOM from "react-dom"
function MyInfo() {
return (
<div>
<h1>Bob Ziroll</h1>
<p>This is a paragraph about me...</p>
<ul>
<li>Thailand</li>
<li>Japan</li>
<li>Nordic Countries</li>
</ul>
</div> import React from "react"
import ReactDOM from "react-dom"
import MyInfo from "./components/MyInfo"
ReactDOM.render(<MyInfo />, document.getElementById("root")) import React from "react"
import Footer from "./Footer"
function App() {
return (
<div>
<Header />
<MainContent />
<Footer />
</div>
)
}
export default App import React from "react"
function MainContent() {
return (
<main>This is the main section</main>
)
}
export default MainContent import React from "react"
function App() {
} import React from "react"
import Header from "./components/Header"
import MainContent from "./components/MainContent"
import Footer from "./components/Footer"
function App() {
return (
<div>
<header className="navbar">This is the header</header>
<MainContent />
<Footer />
</div>
) import React from 'react'
import ReactDOM from 'react-dom'
function App() {
return (
<h1>Hello world!</h1>
)
}
ReactDOM.render(<App />, document.getElementById('root')) import React from "react"
import ReactDOM from "react-dom"
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" 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" import React from "react"
function TodoItem() {
return (
<div className="todo-item">
<input type="checkbox" />
<p>Placeholder text here</p>
</div>
)
}
export default TodoItem <html>
<head></head>
<body>
<a href="https://google.com">This is a link</a>
<input placeholder="First Name" name="" type=""/>
<img src=""/>
</body>
</html> import React from 'react'
import ReactDOM from 'react-dom'
function App() {
return (
<h1>Hello world!</h1>
)
}
ReactDOM.render(<App />, document.getElementById('root')) import React from "react"
function ContactCard(props) {
console.log(props)
return (
<div className="contact-card">
<img src={props.contact.imgUrl}/>
<h3>{props.contact.name}</h3>
<p>Phone: {props.contact.phone}</p>
<p>Email: {props.contact.email}</p>
</div>
)
}
import React from "react"
function Joke(props) {
return (
<div>
<h3 style={{display: !props.question && "none"}}>Quest
<h3 style={{color: !props.question && "#888888"}}>Answ
<hr/>
</div>
)
}
export default Joke import React from "react"
import Joke from "./Joke"
import jokesData from "./jokesData"
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
/*
Given a list of products (as an array of objects, as seen in productsData.js)
render a <Product /> component (which you'll also need to crea
product in the list.
Make sure to use the array's `.map()` method to create these components, and
don't forget to pass a `key` prop to it to avoid the warning.
*/
import React from "react"
import Product from "./Product"
import productsData from "./vschoolProducts"
function App() { import React from "react"
function TodoItem(props) {
return (
<div className="todo-item">
<input type="checkbox" checked={props.item.completed}/>
<p>{props.item.text}</p>
</div>
)
}
export default TodoItem import React from "react"
// function App(props) {
// return (
// <div>
// <h1>{props.whatever}</h1>
// </div>
// )
// }
class App extends React.Component {
yourMethodHere() {
/*
Challenge:
1. Convert all 3 components to be class-based
2. Fix the small bug
*/
import React, {Component} from "react"
import ReactDOM from "react-dom"
// #1
class App extends React.Component {
render() { import React from "react"
// https://scrimba.com/p/p4Mrt9/cQnMDHD
class App extends React.Component {
constructor() {
super()
this.state = {
answer: "Yes"
}
}
render() {
return ( 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: "Sally",
age: 13
}
} import React from "react"
// Given a stateless functional component, add state to it
// state should have a property called `isLoggedIn` which is a boolean
// (true if logged in, false if not)
// Then, give your best shot at rendering the word "in" if the user
// or "out" if the user is logged out.
class App extends React.Component {
constructor() {
super()
this.state = {
isLoggedIn: true
} /*
In the previous iteration of this todo list app, we pulled in todos
Eventually we'll want to be able to modify the data, which will only
Challenge: Change the <App /> component into a stateful class
*/
import React from "react"
import TodoItem from "./TodoItem"
import todosData from "./todosData"
class App extends React.Component {
constructor() { import React from "react"
function handleClick() {
console.log("I was clicked")
}
// https://reactjs.org/docs/events.html#supported-events
function App() {
return (
<div>
<img onMouseOver={() => console.log("Hovered!")} src="https://
<br />
<br /> /**
* Challenge: Get rid of our warning about not having an onChange on
*/
import React from "react"
function TodoItem(props) {
return (
<div className="todo-item">
<input type="checkbox" checked={props.item.completed}/>
<p>{props.item.text}</p>
</div>
)
} 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 { import React from "react"
function TodoItem(props) {
return (
<div className="todo-item">
<input
type="checkbox"
checked={props.item.completed}
onChange={() => props.handleChange(props.item.id)}
/>
<p>{props.item.text}</p>
</div>
)
} import React, {Component} from "react"
// https://engineering.musefind.com/react-lifecycle-methods-how-and-
// https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-l
class TodoList extends Component {
constructor() {
super()
this.state = {}
}
componentDidMount() {
// GET the data I need to correctly display
} import React, {Component} from "react"
// https://engineering.musefind.com/react-lifecycle-methods-how-and-
// https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-l
class TodoList extends Component {
constructor() {
super()
this.state = {}
}
static getDerivedStateFromProps(props, state) {
// return the new, updated state based upon the props
// https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops import React from "react"
function Conditional(props) {
return <h1>Some cool stuff about conditional rendering</h1>
}
export default Conditional import React, {Component} from "react"
import Conditional from "./Conditional"
class App extends Component {
constructor() {
super()
this.state = {
unreadMessages: ["a", ""]
}
}
// &&
// false && false
render() {
return ( import React from "react"
/*
Challenge:
Given a stateless functional component:
1. Follow the steps necessary to add state to it,
// class-based component
// constructor method
2. Have state keep track of whether the user is logged in or not
// isLoggedIn: Boolean (true or false)
3. Add a button that logs the user in/out
// event listener (onClick)
a. extra challenge - make the button display "log in" if they're /**
* Challenge: Style the completed todo items differently from the in
*/
import React from "react"
function TodoItem(props) {
const completedStyle = {
fontStyle: "italic",
color: "#cdcdcd",
textDecoration: "line-through"
}
return ( import React, {Component} from "react"
// https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGl
// https://swapi.co/
// https://medium.com/javascript-scene/master-the-javascript-intervi
class App extends Component {
constructor() {
super()
this.state = {
loading: false,
character: {}
}
} import React, {Component} from "react"
class App extends Component {
constructor() {
super()
this.state = {
firstName: "",
lastName: ""
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
const {name, value} = event.target import React, {Component} from "react"
class App extends Component {
constructor() {
super()
this.state = {
firstName: "",
lastName: "",
isFriendly: false,
gender: "",
favColor: "blue"
}
this.handleChange = this.handleChange.bind(this)
} import React, {Component} from "react"
/**
* Challenge: Wire up the partially-finished travel form so that it works!
* Remember to use the concept of controlled forms
* https://reactjs.org/docs/forms.html
*
* All information should be populating the text below the form in real-time
* as you're filling it out
*
* This exercise is adapted from the V School curriculum on vanilla JS forms:
* https://coursework.vschool.io/travel-form/
*
* All of our challenges and learning resources are open for the public import React, {Component} from "react"
import FormComponent from "./FormComponent"
class Form extends Component {
constructor() {
super()
this.state = {
firstName: "",
lastName: "",
age: "",
gender: "",
destination: "",
isVegan: false,
isKosher: false, import React, {Component} from "react"
class MemeGenerator extends Component {
constructor() {
super()
this.state = {
topText: "",
bottomText: "",
randomImg: "http://i.imgflip.com/1bij.jpg",
allMemeImgs: []
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
} import React, {Component} from "react"
class App extends Component {
// Change to use class properties
state = { firstName: "" }
// Change to use arrow functions
handleChange = (event) => {
const { name, value } = event.target
this.setState({
[name]: value
})
}
https://medium.freecodecamp.org/every-time-you-build-a-to-do-list-app-a-puppy-di
https://medium.freecodecamp.org/want-to-build-something-fun-heres-a-list-of-samp
https://medium.freecodecamp.org/summer-is-over-you-should-be-coding-heres-yet-an