Learn React for free

A comprehensive introduction to React by the Director of Education at V School, an award-winning school of technology education

    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'));
Bob Ziroll2:567 months ago
    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."
    
Bob Ziroll6:497 months ago
    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'))
Bob Ziroll2:136 months ago
    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>
        )
    }
    
Bob Ziroll12:056 months ago
    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 (
Bob Ziroll4:514 months ago
    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
            }
        }
Bob Ziroll3:324 months ago
    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 {
Bob Ziroll12:154 months ago
    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
Bob Ziroll12:06a month ago
    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)
        }
Bob Ziroll15:21a month ago
    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
Bob Ziroll20:13a month ago
    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
Bob Ziroll2:0524 days ago

In this course, you'll learn all the basics to build dynamic, interactive web applications with React. React is a library created by the developers at Facebook which excels in creating very fast web applications using web components built with a simple-to-understand API.

Course Objectives
Upon completion of this course, you'll know everything you need in order to build web applications in React. We'll be covering:

  • JSX
  • Props and state
  • Conditional rendering
  • Styling components
  • Lifecycle methods
  • Fetching data from an API
  • Handling events
  • Forms and controlled components
  • Writing modern React code
  • Setting up an environment outside of Scrimba


V School Learning Philosophy
As the head of education at a tech school called V School in downtown Salt Lake City, Utah, I've formulated some philosophies about learning:

  • Learning should never be lonely - Take the course with friends if possible, and make use of the Q&A option to ask questions!
  • Learn by doing - Take advantage of Scrimba by frequently pausing the lesson and playing with the code. Then try to build things from your own computer using the stuff you just learned. And don't skip the practices!
  • Spaced learning and repetition is key - Give yourself time (days/weeks) to finish this course, and include lots of breaks. Don't try cramming it all in.


Contact Me
All constructive feedback is welcome! Feel free to tweet at me (@bobziroll) to let me know your thoughts!

Good luck, and welcome to the world of React!

What people are saying about Scrimba: