Building your first web app with React JS, Webpack and Babel

Slides for "Building your first web app with React JS, Webpack and Babel" workshop.

Transcript

1. Building your first web app with React JS, Webpack and Babel
2. bit.ly/react-delhincr
3. Speakers/Mentors Arun Michael Dsouza
 @amdsouza92 Kartik Agarwal
 @kartikag01 Amandeep Singh @learn_n_share
4. Agenda • React JS basics • Problems faced in the front-end space • Intro to React JS • How React JS tackles these problems • Basic React JS concepts • React JS toolchain introduction • Introduction to Babel and Webpack • Setting up the React JS toolchain • React JS application development • Intro to lifecycle methods • Making an HTTP call in React JS • Building a React JS application which displays trending
 repos from GitHub
5. Lets start with Basics Lets add dynamic html using JS.
 Lets code
6. Application State/Data Mutation
8. Multi-directional data flow can cause problems!
9. Reusability and Testability
10. • Code becomes repetitive • Error prone • Unmanageable • Difficult to test • There’s lots of boilerplate code to deal with As your project scales,
11. Performance
13. Continuous DOM operations are expensive!
14. Introducing React JS!
15. Uni-directional data flow
16. <Page /> { state } <Form /> { state } <Input /> { state } Props Props
17. Component Architecture
18. <Login /> <Signup /> <Subscribe /> <Input /> <Button /> <Input /> <Button /> <Input /> <Button />
19. Virtual DOM
20. Source: perfplanet.com
21. Basic React JS Concepts
22. Components, Props and State
23. Header Sidebar Slider News News
24. Source: hawaii.edu
25. Props React element Data is passed to React JS components via props
26. JSX bit.ly/2ttPzcV
27. Functional components
28. Class components
29. Props are read-only!
30. Props are read-only!
31. All React components must act like pure functions with respect to their props! bit.ly/2ywNi6n Use state to update a component!
33. Lets start coding! codesandbox.io
34. codesandbox.io/s/4ww115p56x
35. Toolchain
36. A Transpiler A build System
37. What they do ? Why they are need ? How can we use them ?
38. Babel is a JavaScript compiler, to change next generation code (ES+) to ES5.
41. Transpiling Demo Transpiling React Classes Transpiling Classes
42. Webpack is a module bundler, that packages your assets together.
44. npm is the package manager for the JavaScript platform, it have cli capabilities.
45. Setup Project
46. Add Webpack
47. Add webpack.config.js
48. Add build script
49. Run Build File
50. Babel installation
51. add .babelrc to add plugins
52. Install @babel/preset-env
53. Set Up React
54. Modify .babelrc
55. Create index.js
56. Modify webpack.config.js
57. Create index.html
58. Thank you!