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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

bit.ly/react-delhincr

Slide 3

Slide 3 text

Speakers/Mentors Arun Michael Dsouza  @amdsouza92 Kartik Agarwal  @kartikag01 Amandeep Singh @learn_n_share

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Application State/Data Mutation

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Multi-directional data flow can cause problems!

Slide 9

Slide 9 text

Reusability and Testability

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Performance

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Continuous DOM operations are expensive!

Slide 14

Slide 14 text

Introducing React JS!

Slide 15

Slide 15 text

Uni-directional data flow

Slide 16

Slide 16 text

{ state } { state } { state } Props Props

Slide 17

Slide 17 text

Component Architecture

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Virtual DOM

Slide 20

Slide 20 text

Source: perfplanet.com

Slide 21

Slide 21 text

Basic React JS Concepts

Slide 22

Slide 22 text

Components, Props and State

Slide 23

Slide 23 text

Header Sidebar Slider News News

Slide 24

Slide 24 text

Source: hawaii.edu

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

JSX bit.ly/2ttPzcV

Slide 27

Slide 27 text

Functional components

Slide 28

Slide 28 text

Class components

Slide 29

Slide 29 text

Props are read-only!

Slide 30

Slide 30 text

Props are read-only!

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Lets start coding! codesandbox.io

Slide 34

Slide 34 text

codesandbox.io/s/4ww115p56x

Slide 35

Slide 35 text

Toolchain

Slide 36

Slide 36 text

A Transpiler A build System

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

Transpiling Demo Transpiling React Classes Transpiling Classes

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Setup Project

Slide 46

Slide 46 text

Add Webpack

Slide 47

Slide 47 text

Add webpack.conﬁg.js

Slide 48

Slide 48 text

Add build script

Slide 49

Slide 49 text

Run Build File

Slide 50

Slide 50 text

Babel installation

Slide 51

Slide 51 text

add .babelrc to add plugins

Slide 52

Slide 52 text

Install @babel/preset-env

Slide 53

Slide 53 text

Set Up React

Slide 54

Slide 54 text

Modify .babelrc

Slide 55

Slide 55 text

Create index.js

Slide 56

Slide 56 text

Modify webpack.conﬁg.js

Slide 57

Slide 57 text

Create index.html

Slide 58

Slide 58 text

Thank you!