O'Reilly logo
live online training icon Live Online training

React First Steps

Topic: Web & Mobile
Rap Payne

React is the world’s most popular JavaScript framework and it continues to grow more popular as new organizations discover how it makes the creation of beautiful and capable web apps with much less work. Our goal in this training is to show you exactly that … what React does so well, how it does it, and to give you the tools you need to begin using React.

This course is full of tips, tricks, life hacks, and best practices to put you and your team on the fastest and easiest possible track to begin writing powerful, reliable, and beautiful web apps with ReactJS.

What you'll learn-and how you can apply it

By the end of this live, hands-on, online course, you’ll understand:

  • The reasons React has become the world’s most popular web app framework
  • The previously hidden architecture of a React app
  • How the virtual DOM makes React so fast
  • Ease of development through the component model
  • Best practices for state management

And you’ll be able to:

  • Create a React app from scratch
  • Write new React components using composition and decomposition
  • Beautify your React components by styling them both globally and locally
  • Pass data throughout your entire app
  • Get information from a user and back out to a user
  • Leverage the useState() hook to manage data state in your app
  • Read and write a database through a RESTful API interface by making HTTP Ajax calls.

This training course is for you because...

  • You’re an experienced developer who wants to be equipped to handle large-scale web applications.
  • You’re a manager or architect who wants to evaluate React as a potential tool for their team.

Prerequisites

  • To be able to develop a React app by the end of the course, you should attend as an experienced JavaScript developer. Non-developers can still attend the course to get an understanding of the capabilities and best uses of React.

Recommended preparation

Recommended follow-up

About your instructor

  • Rap Payne is a consultant, trainer, author, and entrepreneur who has written apps, mentored developers, and taught software development classes for Fortune 500 companies like Boeing, Walmart, Coca-Cola, Wells Fargo, Honda, CVS, GE, Chase, HP, Lockheed, Lowe's, Nike, JCPenney, USAA, and Walgreens and government agencies like the NSA, the US Air Force, Navy, and Army, NASA, Britain's GCHQ, Canada's postal service, and several provincial governments, to name a few. He’s focused on mobile development since he started mobile app development company Agile Gadgets in 2003. As a professional mentor and trainer, Rap has developed a talent for communicating highly complex ideas in easy-to-understand ways. And as a real-world developer, he understands the need to teach these topics using practical and realistic examples and exercises.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Introduction to React (20 minutes)

  • Presentation: What React does. Why someone would choose React
  • Discussion: How will your organization be using React? What were the reasons you’ve decided to pick up React? What’s the number one thing you want to be sure to learn today?
  • Presentation: The secrets of React. How it does what it does. Why developers need to know how it works
  • Poll: What do you think the major benefit of React is? Speed of execution? Speed of development? Ability to easily change code when requirements change? Satisfaction of the development team?
  • Q&A

Create-react-app (25 minutes)

  • Presentation: Why we need create-react-app. The toolchain, transpiling, linting, bundling, minifying
  • Demonstration: Creating an app with create-react-app
  • Pulse check: Do you think you’ll keep your project under CRA or eject it?
  • Q&A
  • Exercise: Creating a React application from scratch

Break (5 mins)

Stateless functional components (40 minutes)

  • Presentation: The three steps to creating a component
  • Presentation: A gentle introduction to JSX
  • Demonstration: Creating a component
  • Presentation: Component composition and decomposition
  • Demonstration: Composition
  • Discussion: Are you seeing the benefits of React yet? How do you think the abstraction will benefit your team?
  • Exercise: Create and compose components

Props (35 minutes)

  • Presentation: Passing values from a host to an inner component
  • Demonstration: Passing data down through levels
  • Discussion: What do you like and dislike about props?
  • Exercise: Pass data from higher components to lower ones
  • Break (5 mins)

Styling React components (25 minutes)

  • Presentation: The two mechanisms to style components, style sheets and objects
  • Demonstration: Applying style sheets to React for sitewide styles
  • Demonstration: Using objects to style React components
  • Q&A
  • Discussion: Pros and cons of each method. Which do you prefer and why?
  • Exercise: Style all the components!

Events (30 minutes)

  • Presentation: Handling React’s synthetic events
  • Demonstration: Wiring up a button click, a mouseover, and a mouseout
  • Q&A
  • Exercise: Button clicks and form submits
  • Break (5 mins)

State (45 minutes)

  • Presentation: Introducing the useState hook
  • Presentation: Consuming a RESTful API service
  • Demonstration: Retrieving data from a database using an HTTP GET request
  • Pulse check: Do you think we can update this data?
  • Discussion: How do you think we’ll update data? SQL into the database? Why would that not work?
  • Demonstration: Updating data in a database using an HTTP PATCH request
  • Q&A
  • Exercise: Add state hooks and allow maintaining state

Wrapup (15 minutes)

  • Discussion: Now that you’ve gotten a new look at React, how do you feel about adopting it in your organization? How might it relieve some of the pain points you currently have?
  • Presentation: Recommended resources for future learning
  • Next steps: Redux, React navigation
  • Final Q&A