It is the Day 1 power point presentation for seven days of react learning jam. Session organized by GirlScript Punjab Date of the session 22nd Oct 2020

2. Say Hello to
AWESOMENESS
Lets Learn Nitty Gritty of Reactjs
(Day 1 Content)
October 22, 2020

3. Let’s Know Each Other
- Works at Konfhub Technologies
- Make WebApps using React and Next
- Mentors Beginners to Success
- Love to push code on GitHub
- Active user on Twitter and LinkedIn
- Give me a shout-out on Twitter or LinkedIn,
If got stuck at React Coding!
- Twitter (@smileguptaaa)
- LinkedIn and GitHub (@smilegupta)

4. Table of Contents
Introduction to Reactjs Templating in JSX
State and Props Event Handling
01
03
02
04

5. Prerequisites for Learning Jam
Programming
Basic knowledge of
any programming
Language, javascript
prefered
A zeal to Learn
HTML/CSS
Basic understanding
of HTML and CSS

6. Vue vs React vs Angular
(Can you guess which is which framework’s graph )

8. What is Reactjs
View Library from
Facebook
Used for creating
web apps
Renders the view
based on State of
Application
React Equation
f(state) = view

9. Making your First
Application in CodePen
And Here we go in making our first React App

10. Setting up CodePen

11. My First Reactjs CodePen

12. What is JSX - JavaScript XML
For Example:
Hi Smile -> Hi {username}
It is React’s Templating Engine with
full power of JavaScript

13. Simple Render using JSX

14. Templating With JSX

15. Its all JavaScript

16. Conditional Rendering

17. Conditional Rendering(Continued)

18. Event Handling
Lets Handle Events in React

19. Basic Event Handling I

20. Basic Event Handling II

21. States and Props
Its is yet another concept! Carefully understand it.

22. State and Event Handling

23. Props and Components

24. Props and Components II

25. Props and Components II (Continued)

26. Lets have a Recap!
JSX is Reacts
Templating Engine
with full power of
JavaScript
React word itself
says React to State
Change
React is a
JavaScript LibraryComponents let
you split the UI into
independent,
reusable pieces
Heart of React lies
in Components

27. Tasks for the Day
https://nodejs.org/en/download/
npx create-react-app my-first-app
Installing Nodejs
Running Command
Having Account on GitHub
Installing GitBash
https://git-scm.com/downloads
https://github.com/

28. CREDITS: This presentation template
was created by Slidesgo, including
icons by Flaticon, and infographics &
images by Freepik
Thanks!
Smile Gupta
Konfhub Technologies
Content Inspiration: Tanay Pratap
Do you have any questions?