Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Arun Michael Dsouza

March 30, 2019
Tweet

More Decks by Arun Michael Dsouza

Other Decks in Programming

Transcript

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

    View full-size slide

  2. bit.ly/react-delhincr

    View full-size slide

  3. Speakers/Mentors
    Arun Michael Dsouza

    @amdsouza92
    Kartik Agarwal

    @kartikag01
    Amandeep Singh
    @learn_n_share

    View full-size slide

  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

    View full-size slide

  5. Lets start with Basics
    Lets add dynamic html using JS.

    Lets code

    View full-size slide

  6. Application State/Data Mutation

    View full-size slide

  7. Multi-directional data flow can cause problems!

    View full-size slide

  8. Reusability and Testability

    View full-size slide

  9. • Code becomes repetitive
    • Error prone
    • Unmanageable
    • Difficult to test
    • There’s lots of boilerplate code to deal with
    As your project scales,

    View full-size slide

  10. Continuous DOM operations are expensive!

    View full-size slide

  11. Introducing React JS!

    View full-size slide

  12. Uni-directional data flow

    View full-size slide


  13. { state }

    { state }

    { state }
    Props
    Props

    View full-size slide

  14. Component Architecture

    View full-size slide

  15. Source: perfplanet.com

    View full-size slide

  16. Basic React JS Concepts

    View full-size slide

  17. Components, Props and State

    View full-size slide

  18. Header
    Sidebar
    Slider
    News News

    View full-size slide

  19. Source: hawaii.edu

    View full-size slide

  20. Props
    React
    element
    Data is passed to React JS components via props

    View full-size slide

  21. JSX
    bit.ly/2ttPzcV

    View full-size slide

  22. Functional components

    View full-size slide

  23. Class components

    View full-size slide

  24. Props are read-only!

    View full-size slide

  25. Props are read-only!

    View full-size slide

  26. All React components must act like pure functions
    with respect to their props!
    bit.ly/2ywNi6n
    Use state to update a component!

    View full-size slide

  27. Lets start coding!
    codesandbox.io

    View full-size slide

  28. codesandbox.io/s/4ww115p56x

    View full-size slide

  29. A Transpiler
    A build System

    View full-size slide

  30. What they do ?
    Why they are need ?
    How can we use them ?

    View full-size slide

  31. Babel is a JavaScript compiler, to change next generation code (ES+) to ES5.

    View full-size slide

  32. Transpiling Demo
    Transpiling React Classes
    Transpiling Classes

    View full-size slide

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

    View full-size slide

  34. npm is the package manager for the JavaScript platform, it have cli capabilities.

    View full-size slide

  35. Setup Project

    View full-size slide

  36. Add webpack.config.js

    View full-size slide

  37. Add build script

    View full-size slide

  38. Run Build File

    View full-size slide

  39. Babel installation

    View full-size slide

  40. add .babelrc to add plugins

    View full-size slide

  41. Install @babel/preset-env

    View full-size slide

  42. Set Up React

    View full-size slide

  43. Modify .babelrc

    View full-size slide

  44. Create index.js

    View full-size slide

  45. Modify webpack.config.js

    View full-size slide

  46. Create index.html

    View full-size slide