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

1. Intro to React
Grace Kwan

2. What is React?
• A JavaScript library for building user interfaces.
• Component-based.
• Declarative, efficient, and flexible.

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. 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. Output
A Simple Example
https://codepen.io/gckwan/pen/zwbXgz
JavaScript

6. Output
What is JSX?
https://codepen.io/gckwan/pen/zwbXgz
JavaScript

7. Output
Variable Substitution
https://codepen.io/gckwan/pen/zwbXgz
JavaScript

8. Output
Your First React Component
https://codepen.io/gckwan/pen/xdBoGB
JavaScript
Click me!

9. Output
Adding Interactivity
https://codepen.io/gckwan/pen/xdBoGB
JavaScript
Click me!

10. Output
Reusing Components
https://codepen.io/gckwan/pen/xdBoGB
JavaScript
Click me!Click me! Click me!

11. Output
Props
https://codepen.io/gckwan/pen/xdBoGB
JavaScript
Me too!Click me! I’m a button

12. Output
Default Props
https://codepen.io/gckwan/pen/xdBoGB
JavaScript
Click me!Click me! I’m a button

13. Output
State
https://codepen.io/gckwan/pen/YVomwX
JavaScript
1

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. Output
Lifecycle methods
https://codepen.io/gckwan/pen/EXyyYo
JavaScript
1
Number should increase by 1 every second

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. Output
Adding CSS
https://codepen.io/gckwan/pen/YVomwX
JavaScript CSS
1
Number should increase by 1 every second

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. Questions?