-
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