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
   

   View Slide

2. bit.ly/react-delhincr
   

   View Slide

3. Speakers/Mentors
   Arun Michael Dsouza

   @amdsouza92
   Kartik Agarwal

   @kartikag01
   Amandeep Singh
   @learn_n_share
   

   View 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 Slide

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

   Lets code
   

   View Slide

6. Application State/Data Mutation
   

   View Slide

7. View Slide

8. Multi-directional data flow can cause problems!
   

   View Slide

9. Reusability and Testability
   

   View Slide

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

    View Slide

11. Performance
    

    View Slide

12. View Slide

13. Continuous DOM operations are expensive!
    

    View Slide

14. Introducing React JS!
    

    View Slide

15. Uni-directional data flow
    

    View Slide

16. 
    { state }
    
    { state }
    
    { state }
    Props
    Props
    

    View Slide

17. Component Architecture
    

    View Slide

18. 
    
    
    
    
    
    
    

    View Slide

19. Virtual DOM
    

    View Slide

20. Source: perfplanet.com
    

    View Slide

21. Basic React JS Concepts
    

    View Slide

22. Components, Props and State
    

    View Slide

23. Header
    Sidebar
    Slider
    News News
    

    View Slide

24. Source: hawaii.edu
    

    View Slide

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

    View Slide

26. JSX
    bit.ly/2ttPzcV
    

    View Slide

27. Functional components
    

    View Slide

28. Class components
    

    View Slide

29. Props are read-only!
    

    View Slide

30. Props are read-only!
    

    View Slide

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

    View Slide

32. View Slide

33. Lets start coding!
    codesandbox.io
    

    View Slide

34. codesandbox.io/s/4ww115p56x
    

    View Slide

35. Toolchain
    

    View Slide

36. A Transpiler
    A build System
    

    View Slide

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

    View Slide

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

    View Slide

39. View Slide

40. View Slide

41. Transpiling Demo
    Transpiling React Classes
    Transpiling Classes
    

    View Slide

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

    View Slide

43. View Slide

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

    View Slide

45. Setup Project
    

    View Slide

46. Add Webpack
    

    View Slide

47. Add webpack.config.js
    

    View Slide

48. Add build script
    

    View Slide

49. Run Build File
    

    View Slide

50. Babel installation
    

    View Slide

51. add .babelrc to add plugins
    

    View Slide

52. Install @babel/preset-env
    

    View Slide

53. Set Up React
    

    View Slide

54. Modify .babelrc
    

    View Slide

55. Create index.js
    

    View Slide

56. Modify webpack.config.js
    

    View Slide

57. Create index.html
    

    View Slide

58. Thank you!
    

    View Slide