PowerPoint for session on Reactjs Basics Topics Covered: npm vs npx create-react-app 5 ways of thinking in react tips to ace react like pro vs code extensions to ease development with react hands on react by making a hangman game

2. Introduction to
Web Development with React
Smile Gupta
Frontend Engineer
Konfhub Technologies
@smilegupta

3. Disclaimer!
I am NOT different from you guys! 😓
I am not the sole owner of the
contents of this slide!

4. Before we start...
Nodejs Installed
Basic of JavaScript
Your favorite editor

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

6. Workshop Flow
react-basics : What is React?
my first react-app: creating a basic app
react explore: Explore react by practicing
open sourcing: Uploading code to GitHub
and Hosting it on Vercel

7. What is React?
“React is a JavaScript library for
building user interfaces”
>>> Heart of React lies in Components
>>> React word itself says React to State Change

8. So, What is Component?
Components let you split the UI into independent,
reusable pieces, and think about each piece in
isolation.

9. How things work In React

10. Angular
vs React!
Wonder what makes
react standout and
popular!

11. npx create-react-app my-app
My First react-app!

12. Tips from My side to ace React!
>>> Single Responsibility Principle
>>> Build a Static Version
>>> Minimal Representaion of a State

13. Recommended
VS Code
Extensions
ES7 - React / Redux / GraphQL
/ React-Native snippets
Prettier - Code formatter

14. Time for some hands on!
https://www.shortto.com/react-game

15. Just Remember
1) Even a trained monkey
can write a code, Aim to
write a good code.
2) Practice Practice and
Practice

16. Recommended
Reading Material
1) 5 Steps of Thinking in React
(Video)
2) React Officials Docs

17. Questions?