O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning React

Video Description

Get up and running with the world’s leading game engine.

About This Video

  • Understand the core concepts involved in thinking and structuring code in React.
  • Jump straight into any React project.
  • Use tools and resources to accomplish your goals.

In Detail

Want to make the process of building modular, reusable user interface components simple and intuitive? React.js is the answer, with its Learn Once, Write Anywhere approach. This course will help you understand the power behind this approach and build beautiful, modern, and modularized UIs with React’s latest version.

This course will cover all of the React.js basics such as its API, which will help you create elements and components; the virtual DOM and the JSX syntax extension; using state; working with browser events; and component lifecycle methods. You will build an application from scratch throughout the course and use the knowledge you've gained in a practical way. You will also learn to update various elements of a site or application seamlessly without delay, without disrupting the rest of the display or requiring the user to refresh. Also, get introduced to the new concept of hooks.. Finally, you will work with a server API to persist data using local storage.(Note that we use Node.js 10.13.0 for this course, which will run successfully with the React features we cover.)

By the end of the course, you will be fully capable of using ReactJ.js tools to build several UI elements, making them reactive to user input, and extending your knowledge of DOM manipulation to customize your own UIs in the future.

Downloading the example code for this course: You can download the example code files for this course on GitHub at the following link: https://github.com/PacktPublishing/Learning-React. If you require support please email: customercare@packt.com

Table of Contents

  1. Chapter 1 : Introduction to the World of React
    1. The Course Overview 00:04:05
    2. Thinking in React 00:03:05
    3. Start Using React Right away 00:05:03
    4. Local React Dev Environment Setup with create-react-app 00:05:02
    5. Building Our First Custom React Component 00:05:56
    6. Using State and Conditional Rendering in JSX 00:06:10
    7. Using React Dev Tools to Help Build and Debug Our Apps 00:02:31
  2. Chapter 2 : Dive into Interactive React Apps
    1. Handle Mouse, Keyboard, Form, and Browser Events 00:10:59
    2. Basic Form Validation 00:05:43
    3. Create a Shopping List Component 00:05:24
    4. Persist Shopping List State with Local Storage 00:06:06
  3. Chapter 3 : Modular React Components and Shared State
    1. Overview:Mini Address Book App 00:00:50
    2. Use Stateful and Stateless Components to Build UIs 00:03:23
    3. Pass Props Down to Nested Components 00:02:45
    4. Update Parent Component State from a Child Component 00:02:19
    5. Persist Address Book State with Local Storage 00:03:17
    6. Intro to Hooks 00:04:21
    7. Implement the useState and useEffect 00:06:19
  4. Chapter 4 : Multi-Page React Apps with React Router
    1. Overview: Multi-Page React App 00:01:08
    2. React Router 5 Setup and Configuration 00:05:14
    3. Handle Dynamic URL Values, and Error State 00:03:54
    4. Convert Render Props into Components 00:04:30
    5. Conditionally Render Components, Redirects 00:06:27
  5. Chapter 5 : Fetch Data from Third-Party APIs
    1. Overview: React App + Star Wars API 00:03:23
    2. Fetch DATA from swapi.co 00:05:08
    3. Extract Logic into Separate Components 00:05:57
    4. Fetch Data Based on URL/Route 00:05:51
    5. Persist API Data in Local Storage 00:05:52
  6. Chapter 6 : Prepare and Deploy React Apps to Production
    1. Build React App to Optimize for Production 00:03:18
    2. Deploy to Netlify: Drag and Drop 00:03:45
    3. Deploy to Netlify: Command Line 00:04:57
    4. Deploy to Netlify: Continuous Deployment 00:05:32
    5. What’s Next? Eject from CRA, More Hosting Options 00:05:30