Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Intro to React Workshop

495 visualizaciones

Publicado el

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:

Publicado en: Ingeniería
  • Inicia sesión para ver los comentarios

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?