O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Intro to React Workshop

491 visualizações

Publicada em

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

Publicada em: Engenharia
  • Entre para ver os comentários

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?