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

392 views

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:

-JSX
-React Components
-Props
-State
-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: https://www.slideshare.net/gckwan/intro-to-react-workshop

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 https://codepen.io/gckwan/pen/zwbXgz JavaScript
  6. 6. Output What is JSX? https://codepen.io/gckwan/pen/zwbXgz JavaScript
  7. 7. Output Variable Substitution https://codepen.io/gckwan/pen/zwbXgz JavaScript
  8. 8. Output Your First React Component https://codepen.io/gckwan/pen/xdBoGB JavaScript Click me!
  9. 9. Output Adding Interactivity https://codepen.io/gckwan/pen/xdBoGB JavaScript Click me!
  10. 10. Output Reusing Components https://codepen.io/gckwan/pen/xdBoGB JavaScript Click me!Click me! Click me!
  11. 11. Output Props https://codepen.io/gckwan/pen/xdBoGB JavaScript Me too!Click me! I’m a button
  12. 12. Output Default Props https://codepen.io/gckwan/pen/xdBoGB JavaScript Click me!Click me! I’m a button
  13. 13. Output State https://codepen.io/gckwan/pen/YVomwX JavaScript 1
  14. 14. Output Setting State https://codepen.io/gckwan/pen/YVomwX JavaScript 1 Count Number should increase by 1 every time the button is clicked
  15. 15. Output Lifecycle methods https://codepen.io/gckwan/pen/EXyyYo 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 https://codepen.io/gckwan/pen/YVomwX 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?

×