1 of 40

Reactjs

2 of 40

Who am I?

3 of 40

NEHA SHARMA

UI Tech Lead | JSLovers Organizer & Speaker

Contact me : twiiter.com/hellonehha | neha@jslovers.com

4 of 40

JSLovers.com | meetup.com/jslovers | @jslovers_del

5 of 40

How you made your

App/Website?

6 of 40

NOW

7 of 40

Fancy Frameworks

8 of 40

Reactjs

9 of 40

BUT, What about Angularjs, backbonejs,..?

10 of 40

One more library/Framework?

11 of 40

2011

First deploy FB News-feed

2012

Instagram

2013

Open-source in JSconf US

12 of 40

As of 2017 React is the 4th most starred project of all time on GitHub

13 of 40

14 of 40

MVC

15 of 40

I want my View please

Reactjs is javascript library to build UI.It is V in your MV*

16 of 40

No controller please!!

17 of 40

I <3 Components

18 of 40

Why Reactjs

19 of 40

  • Virtual DOM
  • Unidirectional Data Binding
  • Big Minds are behind Reactjs
  • Server side as well as client side templated - No extra plugin required
  • Reuseable and Interactive components
  • Coding is simpler because of JSX
  • Reactjs own debugger

20 of 40

Dig into Reactjs

21 of 40

Components

1.

Data Flow

Virtual DOM

3.

4.

2.

JSX

22 of 40

Components

23 of 40

JSX

Javascript Extension Syntax

24 of 40

Virtual Dom

25 of 40

Unidirectional Data Flow

26 of 40

Props

27 of 40

States

28 of 40

Stateless components

29 of 40

Let’s start

30 of 40

Browser Support

31 of 40

All latest browser, also IE9+

32 of 40

Who is Using?

33 of 40

34 of 40

https://github.com/facebook/react/wiki/Sites-Using-React

35 of 40

What’s next...

36 of 40

​

Angular

backbone.js

Reactjs

Type

MV*

MVC

V

Technology

HTML/CSS/JS/Angular

HTML/CSS/JS/backbonejs

JSX

Core

MVC

MVC

Components

View

HTML

HTML

Virtual DOM

Data-flowing

2-way

unidirectional

unidirectional

Creator

Google

-

FB

Architecture

-

-

React Native, Flux...

SEO Support

Phantomjs

-

You can use server components

37 of 40

Source : google.com

Demo

38 of 40

Q/A

39 of 40

Feedback

40 of 40

Thank You