Slide 1

Slide 1 text

Frontend development with React @kabirbaidhya

Slide 2

Slide 2 text

Before we begin let's be aware of few things

Slide 3

Slide 3 text

Frontend Development

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

It's normal to feel lost here if you're a beginner.

Slide 6

Slide 6 text

Why learning frontend development is hard? Too many frameworks Numerous tools available Don't know which one to choose Not sure from where to start Things change so fast JS language, ecosystem and the web are experiencing tons of changes Need to stay tuned with the changing trends Functional Programming vs OOP and what not.

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

So what to do then? Go step by step Learn Javascript Know what things are: Ecmascript speci cation (2015 & beyond) Package Managers (eg: npm) Frameworks (eg: React, Angular) Bundlers (eg: webpack) NodeJS & Tools (eg: uglify, gulp, grunt)

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

But you don't need to know everything learn to use them to get things done

Slide 11

Slide 11 text

JS Ecosystem

Slide 12

Slide 12 text

Javascript is no longer just a client‐side scrip ng language.

Slide 13

Slide 13 text

Today Javascript powers Server-side applications (NodeJs) Mobile Apps (React Native, Cordova) Desktop applications (Electron) CLI tools and much more (Raspberry Pi, Arduino) let alone Web Apps

Slide 14

Slide 14 text

And Javascript is s ll the de‐facto language of web (as of 2017)

Slide 15

Slide 15 text

And will remain so unless WebAssemly is out and they design even be er language in the future

Slide 16

Slide 16 text

So, it's s ll not too late to Learn Javascript in 2017

Slide 17

Slide 17 text

And there are s ll too many things to learn in Javascript a er Ecmascript spec (2015 & beyond)

Slide 18

Slide 18 text

React

Slide 19

Slide 19 text

What is React?

Slide 20

Slide 20 text

React A Javascript library for building User Interfaces

Slide 21

Slide 21 text

Why React?

Slide 22

Slide 22 text

UIs become painless It makes it painless to create interactive UIs. Simplify views for each state in your application Declarative views make your code more predictable and easier to debug.

Slide 23

Slide 23 text

Component Based Build encapsulated components that manage their own state Write your UIs as a pure functions of your state JSX brings the best of javascript in writing components in a declarative manner No messy spagetti code for DOM manipulation anymore.

Slide 24

Slide 24 text

Learn Once, Write Anywhere You can use React almost everywhere. Even in your existing angular or ember projects for developing new features Could be used for Server-side rendering Could power mobile apps using React Native

Slide 25

Slide 25 text

And what else it's, simplicity at its best you don't have to complicate your code to implement your complex business logic.

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

Let's get started

Slide 28

Slide 28 text

Hello, World! ReactDOM.render(

Hello, world!

, document.getElementById('root') );

Slide 29

Slide 29 text

JSX

Slide 30

Slide 30 text

What is JSX? Check this strange syntax. const element =

Hello, world!

; This funny tag syntax is neither a string nor HTML. It is called JSX. It produces React Elements.

Slide 31

Slide 31 text

Rendering JSX And this is how you render it on the DOM. ReactDOM.render( element, document.getElementById('root') );

Slide 32

Slide 32 text

JSX & Javascript After compilation JSX expressions become regular Javascript objects. You can use JSX inside javascript statements. And you can embed any javascript expressions in JSX

Slide 33

Slide 33 text

Like this function getGreeting(user) { if (user) { return

Hello, {formatName(user)}!

; } return

Hello, Stranger.

; }

Slide 34

Slide 34 text

React Components

Slide 35

Slide 35 text

Components You can rewrite the previous example as function Hello() { return

Hello, world!

; } ReactDOM.render( , document.getElementById('root') ); This is a React Component.

Slide 36

Slide 36 text

Components are the basic building blocks of a React App let you break down the UI into independent, reusable parts Conceptually, they are similar to functions that take some input (props) and return output (UI)

Slide 37

Slide 37 text

Component Types Func onal Components - A simple pure javascript function that takes in props and return react elements or other components. Stateful Components - A component with an ability to contain and maintain it's own private state.

Slide 38

Slide 38 text

Thinking in React Break down UI into small reusable, manageble, independent components Think of your UI as a function of your application state. UI = f(S);

Slide 39

Slide 39 text

State and Lifecycle

Slide 40

Slide 40 text

State One of the hardest part of front-end development is state management. State is all the information about your UI such that it's possible to re-create the same UI given the same state. State could contain any thing from the data, UI current states, routes etc.

Slide 41

Slide 41 text

Stateful Components Stateful components can contain their local state. We can de ne them using ES6 class . class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return (

It is {this.state.date.toLocaleTimeString()}.

Slide 42

Slide 42 text

Lifecycle methods componentWillMount() componentDidMount() shouldComponentUpdate() componentWillUpdate() componentDidUpdate() componentWillUnmount()

Slide 43

Slide 43 text

Unidirec onal Data Flow

Slide 44

Slide 44 text

Data ﬂow is unidirec onal State is local or encapsulated within the component It only could be passed down as props to other components The only to trigger the UI update is to trigger state change Think as if everything re-renders on state change and the Virtual DOM takes care of things behind the scenes

Slide 45

Slide 45 text

These were the things you need to know to learn React let's write some code now

Slide 46

Slide 46 text

Crea ng a simple TodoApp with React

Slide 47

Slide 47 text

Check this github repository h ps://github.com/kabirbaidhya/react‐todo‐app for step‐by‐step instruc ons to create a todo app.

Slide 48

Slide 48 text

Want to read more? https://facebook.github.io/react/ https://egghead.io/technologies/react http://beletsky.net/2016/04/the-functional- approach-to-ui.html https://medium.com/javascript-and- opinions/state-of-the-art-javascript-in-2016- ab67fc68eb0b#.ume3ww8dt https://hackernoon.com/how-it-feels-to-learn- javascript-in-2016-d3a717dd577f#.vltjk7rdv http://jamesknelson.com/5-types-react- application-state/

Slide 49

Slide 49 text

Thank You @kabirbaidhya [email protected] The slides were created using Marp. https://yhatt.github.io/marp/