Getting Started with React.js
- 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?
Editor's Notes
- #5: NodeJs Link: https://nodejs.org/en/download/
- #8: There are two kinds of Components: Functional Components Class Components Material for reference: https://www.freecodecamp.org/news/functional-components-vs-class-components-in-react/#:~:text=Functional%20components%20are%20basic%20JavaScript,mainly%20responsible%20for%20rendering%20UI. https://reactjs.org/docs/components-and-props.html
- #11: Reading Material Reading Material: https://www.sitepoint.com/react-vs-angular/
- #16: Tell about Creating your own Projects there,
- #17: 1) Link to Video: : https://www.youtube.com/watch?v=YJPSR9dEQV8&t=399s 2) https://reactjs.org/docs/getting-started.html
- #18: If you still have any issue Ping me on LinkedIn or mail me at [email protected]