Into the

with Vignesh M

React

setState

components

Portals

higher order

rebase

render

prop stars

whereAreMyProps

whyDidYouUpdate

V = F(D)

jsx

Full Stack Developer

Python ❤ JavaScript

Mentor, Trainer and Hacker

Vignesh M

@vigzmv

Backend Dev

Previously

 

others

Open Source Maintainer

React

A JavaScript library for building user interfaces

  • Declarative

  • Component-Based

  • Learn Once, write anywhere

 

Declarative

Your UI is a function of your Data.

Your View is a function of your State.

V = F(d)

JQuery

React

Write code to manipulate DOM

Write code to manipulate DATA

$myBtn = $("<button>");
$myBtn.addClass("button");
$myBtn.html("...");

if (toggled) {
  $myBtn.addClass("toggled");
}
$myBtn.appendTo(...);

// later, when `toggled` changes.

$myBtn.toggleClass("toggled", toggled);
render() {
  const classes = state.toggled ? "myButton toggled": "toggled";
  return <button className={classes}>
          ....
       </button>;
}

JQuery

React

Imperative: How to do?

Declarative: What to do?

JQuery is okay, but not good for modern JavaScript Applications.

What is a component?

Components ≈ High functioning HTML Tags

Component Based

Components encapsulate their View and State

Components are reusable

Components are Composable

Learn Once, Write Anywhere

Same API for WEB, Mobile, VR and more.

Why React?

React makes you a better JavaScript Developer

It is Fast, Declarative, has components architecture, multiplatform etc.

Today's Goals

  • Learn and Use Basic React APIs        

 

  • Explore different Development Patterns and Component Patterns in React

Let's write some <Code/>

01-Hello World

02-JSX

03-Functional Components

04-PropTypes

05-Conditional Render

06-Re render

Virtual DOM

  • Whenever anything may have changed, re-render everything to a virtual DOM.

 

  • Diff the previous representation with the next one.

 

  • Only update the real DOM with what actually changes.

Virtual DOM

07-Basic Styling

More Styling Options

Components

class App extends React.Component {
    render() {
        return (
            <div>I am a Component</div>
        )
    }
}

08-Component Lifecycle

09-Event Handling

  • React optimizes Events using Event Delegation.

 

  • Only one EventListner of each type on the entire Document

 

  • Catches Event at top of the DOM and propagates (bubbling) to the target.

10-Todo App

11-Component Patterns

12-Create React App

Create React apps with no build configuration

13-Firebase

Firebase is a Backend-as-a-Service

14-ParcelJs

Blazing fast, zero configuration web application bundler

15-Fetching

Component Composition Patterns

16-Higher Order Component

A Function that takes in a Component and returns a Component​ 

const Add = (x,y) => x + y;

Add(2,3); // 5

const AddTwo = (x) => Add(x,2);  

AddTwo(3); // 5

Higher order Function

A Function that takes in a function and returns a function

const EnhancedComponent = 
higherOrderComponent(WrappedComponent);
  • Code reuse, logic and bootstrap abstraction
  • Render Highjacking
  • State abstraction and manipulation
  • Props manipulation

 

What can I do with HOCs?

 

17-React.Children

18-Toggler

19-Toggler Composed

20-Toggler Composed

A component at top and shares its state implicitly with its children

21-Context

To provide structural flexibilty in Compound Components

22-Render Props

23-HOC vs Render Props

Have any questions?

Working on something cool?

 Reach me at @vigzmv

Vignesh M

@vigzmv

Into the React

By Vignesh M

Made with Slides.com

Into the React

My Slides for my Session/Workshop on ReactJs at Facebook Dev Circle.

  • 2,335

More from Vignesh M