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

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.

C00289a7b57c00bb0ab55d5e04cc3345?s=128

Arun Michael Dsouza

March 30, 2019
Tweet

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

  7. None
  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

  12. None
  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!
  32. None
  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.
  39. None
  40. None
  41. Transpiling Demo Transpiling React Classes Transpiling Classes

  42. Webpack is a module bundler, that packages your assets together.

  43. None
  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!