Slides from a beginner friendly ReachJS workshop that I delivered to Women Who Code - East Bay

1. React.JS
A Beginner Centric Intro
Pearl McPhee

2. A What, 3 Why’s and 2 How’s

3. WHAT

4. REACT IS
“A JAVASCRIPT
LIBRARY FOR BUILDING
USER INTERFACES”
- Facebook

5. WHY

6. ● Popular
● Cutting Edge
● Easy to Adopt
Why Should You Learn React?

7. HOW (high level)

8. Components
Building blocks of code that are ideally each
responsible for doing one thing. Together they
make up the user interface of a React app.

9. User Interface
Bookmark
Yani is ready for the office! :))
#ootd
Components

10. Yani is ready for the office! :))
#ootd
Bookmark

11. Component Name Responsibility UI
BookmarkButton Render a blue button that
says “Bookmark”.
FramedPhoto Render an image styled
with a thin border
PhotoCaption Render a purple block that
contains the text caption
Card Render a green block that
contains the
BookmarkButton,
FramedPhoto and
PhotoCaption Components
Bookmark
Text for a photo
caption
Text for a photo
caption

12. Component Name What Data Does It Need? UI
BookmarkButton Whether button was clicked
or not
FramedPhoto Image source
PhotoCaption Caption text
Card None
Bookmark
Text for a photo
caption
Text for a photo
caption

13. Functional Components Class Syntax

14. HOW (nitty gritty)

15. Additional Resources
● React Docs
● Egghead.io (videos)
● Additional Practice Code
● Extra references found throughout this doc
in the note sections
● pearlmcphee@gmail.com

16. Thank You!