Learn React for free

Learn React for free

Course Introduction & Learning Philosophy
Bob Ziroll5:1610 months ago
    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)
        }
What we'll be building
Bob Ziroll0:58a year ago
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>
The Responsive Web Design Bootcamp Promo
Per Harald Borgen3:2219 days ago
    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'));
Why use React?
Bob Ziroll2:56a year 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."
    
ReactDOM & JSX
Bob Ziroll6:49a year ago
    import React from "react"
    import ReactDOM from "react-dom"
    
    ReactDOM.render(
      <ul>
        <li></li>
        <li></li>
        <li></li>
        </ul>)
ReactDOM & JSX Practice
Bob Ziroll4:11a year ago
    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(
React Functional Components
Bob Ziroll3:52a year ago
    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>
React Functional Components Practice
Bob Ziroll5:05a year ago
    import React from "react"
    import ReactDOM from "react-dom"
    
    import MyInfo from "./components/MyInfo"
    
    ReactDOM.render(<MyInfo />, document.getElementById("root"))
Move Components into Separate Files 
Bob Ziroll5:20a year ago
    import React from "react"
    import Footer from "./Footer"
    
    function App() {
        return (
            <div>
                <Header />
                <MainContent />
                <Footer />
            </div>
        )
    }
    
    export default App
React Parent/Child Components
Bob Ziroll8:03a year ago
    import React from "react"
    
    function MainContent() {
        return (
            <main>This is the main section</main>
        )
    }
    
    export default MainContent
React Parent/Child Component Practice
Bob Ziroll4:53a year ago
    import React from "react"
    
    function App() {
        
    }
React Todo App - Phase 1
Bob Ziroll2:31a year ago
    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>
        )
Styling React with CSS Classes
Bob Ziroll5:00a year ago
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    function App() {
        return (
           <h1>Hello world!</h1>
        )
    }
    
    ReactDOM.render(<App />, document.getElementById('root'))
Some Caveats 
Bob Ziroll2:13a year 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"
JSX to JavaScript and Back
Bob Ziroll3:53a year ago
    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"
React Inline Styles with the Style Property
Bob Ziroll7:05a year ago
    import React from "react"
    
    function TodoItem() {
        return (
            <div className="todo-item">
                <input type="checkbox" />
                <p>Placeholder text here</p>
            </div>
        )
    }
    
    export default TodoItem
React Todo App - Phase 2
Bob Ziroll3:1710 months ago
    <html>
        <head></head>
        <body>
            <a href="https://google.com">This is a link</a>
            <input placeholder="First Name" name="" type=""/>
            <img src=""/>
        </body>
    </html>
React Props Part 1: Understanding the Concept
Bob Ziroll2:08a year ago
    import React from 'react'
    import ReactDOM from 'react-dom'
    
    function App() {
      return (
        <h1>Hello world!</h1>
      )
    }
    
    ReactDOM.render(<App />, document.getElementById('root'))
React Props Part 2: Reusable Components
Bob Ziroll2:28a year ago
    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>
        )
    }
    
React Props
Bob Ziroll12:05a year 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
React Props and Styling Practice
Bob Ziroll10:41a year ago
    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
    
Mapping Components in React
Bob Ziroll7:57a year ago
    /* 
    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() {
Mapping Components Practice
Bob Ziroll5:13a year ago
    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
React Todo App: Phase 3
Bob Ziroll4:2810 months ago
    import React from "react"
    
    // function App(props) {
    //     return (
    //         <div>
    //             <h1>{props.whatever}</h1>
    //         </div>
    //     )
    // }
    
    class App extends React.Component {
        
        yourMethodHere() {
            
Class-based Components
Bob Ziroll5:10a year ago
    /*
    
    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() {
Class-based Components
Bob Ziroll3:34a year ago
    import React from "react"
    
    // https://scrimba.com/p/p4Mrt9/cQnMDHD
    
    class App extends React.Component {
        constructor() {
            super()
            this.state = {
                answer: "Yes"
            }
        }
        
        render() {
            return (
React State
Bob Ziroll4:51a year 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
            }
        }
React State Practice
Bob Ziroll3:32a year 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
            }
React State Practice 2
Bob Ziroll4:09a year ago
    /*
    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() {
React Todo App: Phase 4
Bob Ziroll2:0110 months ago
    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 />
Handling Events in React
Bob Ziroll3:42a year ago
    /**
     * 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>
        )
    }
React Todo App: Phase 5
Bob Ziroll1:1310 months ago
    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 {
React setState: Changing the State
Bob Ziroll12:15a year 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>
        )
    }
React Todo App: Phase 6
Bob Ziroll7:4010 months ago
    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
        }
React Lifecycle Methods Part 1
Bob Ziroll9:25a year ago
    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
React Lifecycle Methods Part 2
Bob Ziroll3:18a year ago
    import React from "react"
    
    function Conditional(props) {
        return <h1>Some cool stuff about conditional rendering</h1>
    }
    
    export default Conditional
React Conditional Render
Bob Ziroll11:14a year ago
    import React, {Component} from "react"
    import Conditional from "./Conditional"
    
    class App extends Component {
        constructor() {
            super()
            this.state = {
                unreadMessages: ["a", ""]
            }
        }
        // &&
        // false && false
        render() {
            return (
React Conditional Render Part 2
Bob Ziroll2:5010 months ago
    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
React Conditional Render Practice
Bob Ziroll8:32a year ago
    /**
     * 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 (
React Todo App: Phase 7
Bob Ziroll2:3010 months ago
    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: {}
            }
        }
Fetching data from an API with React
Bob Ziroll10:55a year ago
    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
React Forms Part 1
Bob Ziroll12:0611 months 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)
        }
React Form Part 2
Bob Ziroll15:2110 months 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
React Form Practice
Bob Ziroll20:1310 months 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,
React Container & Component Architecture
Bob Ziroll11:2010 months ago
    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)
        }
React Meme Generator Capstone Project
Bob Ziroll20:1110 months ago
    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
            })
        }
        
Writing Modern React Apps
Bob Ziroll6:0310 months ago
    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
React Project Ideas for Practicing
Bob Ziroll0:4310 months ago
Conclusion - React Tutorial
Bob Ziroll2:0510 months ago
A comprehensive introduction to React for beginners 💪


In this 48-part interactive tutorial, you'll learn how to build dynamic, 
interactive web applications with  React.js in 2019. 
React is a JavaScript library for creating user interfaces. It has been created by the developers at Facebook and it excels in creating fast web applications using web components built with a simple-to-understand API.


The course is also filled with coding challenges that you'll complete by writing React code directly inside the Scrimba screencasts.
Before you know it, you'll have written two first React JS applications! And you're in good company: over 50.000 students have enrolled in this course so far. 


Many of them have pointed out on Twitter that this course is the best React tutorial they've went through.


Course Objectives


Upon completion of this course, you'll know everything you need in order to start building 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 JS 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. 


Advanced React course waiting list


Finally, I'm also working on a follow-up course that'll tackle more adcanved React topics. Leave your email here if you'd like to get updates on this course as I progress with it.


Built withImba
TermsDocsStart teachingAbout
#
Learn React for free
New Responsive Design CourseSearchCommunity