Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to React Workshop


Published on

This workshop covers the basics of React, Facebook's popular JavaScript library for building user interfaces. In particular, we'll be introducing these concepts:

-React Components
-Lifecycle methods

Basic knowledge of HTML and JS is recommended.

The version with presenter notes, which goes into more detail on each topic, is available here:

Published in: Engineering

Intro to React Workshop

  1. 1. Intro to React Grace Kwan
  2. 2. What is React? • A JavaScript library for building user interfaces. • Component-based. • Declarative, efficient, and flexible.
  3. 3. You want to understand how React works at a high level. You have some HTML and JavaScript experience. You work primarily on web applications. This workshop will be best if…
  4. 4. What We’ll Learn • JSX, by rendering some text • Props, by building a button • State, by building a counter • Lifecycle methods, by building a stopwatch
  5. 5. Output A Simple Example JavaScript
  6. 6. Output What is JSX? JavaScript
  7. 7. Output Variable Substitution JavaScript
  8. 8. Output Your First React Component JavaScript Click me!
  9. 9. Output Adding Interactivity JavaScript Click me!
  10. 10. Output Reusing Components JavaScript Click me!Click me! Click me!
  11. 11. Output Props JavaScript Me too!Click me! I’m a button
  12. 12. Output Default Props JavaScript Click me!Click me! I’m a button
  13. 13. Output State JavaScript 1
  14. 14. Output Setting State JavaScript 1 Count Number should increase by 1 every time the button is clicked
  15. 15. Output Lifecycle methods JavaScript 1 Number should increase by 1 every second
  16. 16. What about styling? React isn’t prescriptive about how you style your views, which is one of the traits that makes it easy to integrate with your existing stack. The most common option is CSS and its many variants, though inline styling in React is also gaining popularity. Let’s look at a simple example using CSS.
  17. 17. Output Adding CSS JavaScript CSS 1 Number should increase by 1 every second
  18. 18. What’s Next? • Practice with the official tic-tac-toe tutorial • Start tinkering with create-react-app • Learn more: • Loading and passing data • Routing • ES6+ syntax
  19. 19. Questions?