Learning React

  • Section 1: Introduction to the World of React

    React has taken the world of web development by storm. It is used for everything from web apps, to native iOS and Android apps. In this section we’ll learn core React concepts and methodologies to get up and running building interactive web apps.

    • The Course Overview
    • Thinking in React
    • Start Using React Right away
    • Local React Dev Environment Setup with create-react-app
    • Building Our First Custom React Component
    • Using State and Conditional Rendering in JSX
    • Using React Dev Tools to Help Build and Debug Our Apps

    Browse Videos
  • Section 2: Dive into Interactive React Apps

    JavaScript allows us to create highly interactive and dynamic UIs. Using React, we’ll learn how to set state, handle various user and browser events. This will lay the groundwork for more robust components and web apps.

    • Handle Mouse, Keyboard, Form, and Browser Events
    • Basic Form Validation
    • Create a Shopping List Component
    • Persist Shopping List State with Local Storage

    Browse Videos
  • Section 3: Modular React Components and Shared State

    We take our skills to the next level by nesting React components, and sharing state between components. We will create reusable components, learn about file size and performance optimization techniques.

    • Overview:Mini Address Book App
    • Use Stateful and Stateless Components to Build UIs
    • Pass Props Down to Nested Components
    • Update Parent Component State from a Child Component
    • Persist Address Book State with Local Storage
    • Intro to Hooks
    • Implement the useState and useEffect

    Browse Videos
  • Section 4: Multi-Page React Apps with React Router

    In this section, we build a multi-page React app using React Router.

    • Overview: Multi-Page React App
    • React Router 5 Setup and Configuration
    • Handle Dynamic URL Values, and Error State
    • Convert Render Props into Components
    • Conditionally Render Components, Redirects

    Browse Videos
  • Section 5: Fetch Data from Third-Party APIs

    Interacting with APIs is essential to modern web applications. In this section we fetch data from third-party APIs and populate our React application state. These patterns can be adapted to consume most JSON APIs.

    • Overview: React App + Star Wars API
    • Fetch DATA from swapi.co
    • Extract Logic into Separate Components
    • Fetch Data Based on URL/Route
    • Persist API Data in Local Storage

    Browse Videos
  • Section 6: Prepare and Deploy React Apps to Production

    After building interactive, responsive, multi-page apps, the next step is to show the world. In this section we prepare our app for production, and deploy to various hosts and servers.

    • Build React App to Optimize for Production
    • Deploy to Netlify: Drag and Drop
    • Deploy to Netlify: Command Line
    • Deploy to Netlify: Continuous Deployment
    • What’s Next? Eject from CRA, More Hosting Options

    Browse Videos
View Larger

Next Prev