This document provides an introduction to ReactJS, including what it is, why people use it, and some basic concepts. It discusses how React is a declarative, efficient JavaScript library for building user interfaces. It also highlights some common use cases for React like building presentations, virtual reality experiences, shopping carts, online editors, and mobile apps. The document then covers prerequisites for learning React and introduces some of the main components that make up the React ecosystem like JSX, Babel, and module bundlers. It concludes with a quick "Hello World" example and outlines further topics to explore like components, state management, and other advanced React patterns.

1. ReactJS basics
An enticing introduction

2. We will talk about
 What is React?
 Why do people use React?
 Pre-requisites to learning React
 A tour of React eco-system
 React “Hello World” in 3 mins
 Some basic concepts
 The path forward

3. What is React?
 A declarative, efficient, and flexible JavaScript library for building user interfaces
 Designed for gradual adoption, and you can use as little or as much React as you
need

4. People use it for a presentation library
https://github.com/FormidableLabs/spectacle

5. Virtual Reality
ReactVR rotating boxes

6. To build a shopping cart
https://github.com/jeffersonRibeiro/react-shopping-cart

7. Online editors
https://codesandbox.io/s/

8. Create physics based animation library
https://github.com/react-spring/react-spring

9. Create word documents
https://github.com/nitin42/redocx

10. Mobile apps and games of course

11. And many more cool things…

12. Why do people use
React?
 Awesome documentation & support
 That has led to a wonderful ecosystem
 Great dev tools
 Efficient DOM management
Source: https://codesandbox.io/search?refinementList%5Btemplate%5D=&page=1

13. More numbers…

14. Don’t believe me on this though…
https://2018.stateofjs.com/front-end-frameworks/overview/

15. But, how is the ReactJS market in India?

16. Ok, but how is it in Ahmedabad?

17. Prerequisites
Basic would suffice
Advanced would help grab faster

18. React eco-system

19. React ecosystem
Lets understand through a discussion between two friends.
Anil asks for suggestions from his friend Biju on technology he should use for fetching
API data and displaying it on his web app.
An animated version of blog How it feels to learn javascript in 2016

20. I was thinking
maybe using
jQuery to fetch
and display the
data?
Oh my god no,
no one uses
jQuery anymore.
You should try
learning React,
it’s 2016
Oh, OK. What’s
React?
A super cool
library made by
some guys at
Facebook, it
brings control &
performance to
your application,
by allowing you to
handle any view
changes very
easily
That sounds neat.
Can I use React to
display data from
the server?
Yeah, but first
you need to add
React and React
DOM as a
library in your
webpage. Why two
libraries?
So one is the
actual library and
the second one is
for manipulating
the DOM, which
now you can
describe in JSX.

21. JSX? What is JSX?
JSX is just a
JavaScript syntax
extension that
looks pretty much
like XML. It’s kind
of another way to
describe the DOM,
think of it as a
better HTML.
If I add these two
libraries then I can
use React?
Not quite. You
need to add
Babel, and then
you are able to
use React.
Another library?
What’s Babel?
Babel is a
transpiler that
allows you to
target specific
versions of
JavaScript, while
you code in any
version of
JavaScript. Babel
allows you to
code in
ES2016+ rather
than ES5
ES5, ES2016+? I’m
getting lost over
here.
ES5 stands for
ECMAScript 5. It’s
the edition that
has most people
target since it has
been
implemented by
most browsers
nowadays.

22. ECMAScript?
Its the scripting
standard
JavaScript was
based on in 1999
after its initial
release in 1995.
We have, like, 7
editions of this
implementation.
7 editions. For
real. And ES5 and
ES2016+ are?
The fifth and
seventh edition
respectively.
Wait, what
happened with
the sixth?
Each edition is a
superset of the
previous one, so
if you are using
ES2016+, you
are using all the
features of the
previous
versions.
And why use
ES2016+ over ES6
then?
You could use ES6,
but to use cool
features like async
and await, you need
to use ES2016+.
Otherwise you are
stuck with ES6
generators with
coroutines to block
asynchronous calls
for proper control
flow.

23. All these names
are confusing.
Look, I’m just
loading a bunch
of data from a
server, I used to
be able to just
include jQuery
from a CDN and
just get the data
with AJAX calls,
why can’t I just do
that?
It’s 2016 man,
no one uses
jQuery anymore,
it ends up in a
bunch of
spaghetti code.
Everyone knows
that.

24. Right. So my
alternative is to
load three libraries
to fetch data and
display a HTML
table.
Well, you
include those
three libraries
but bundle
them up with a
module
manager to load
only one file.
And what’s a
module manager?
The definition
depends on the
environment, but in
the web we usually
mean anything that
supports AMD or
CommonJS modules
And AMD and
CommonJS are…
Ways to describe
how multiple
JavaScript libraries
should interact. You
know, import and
requires? You can
write multiple
JavaScript files using
AMD or CommonJS
API & you can use
something like
Browserify to
bundle them up
OK, that makes
sense… What is
Browserify?
A tool that allows
you to bundle
dependencies to files
that can be run in
the browser. It was
created because
most people publish
those dependencies
in the npm registry.

25. So I need to
download the
libraries from npm
then?
Yes. so if you
want to use
React , you
download the
React module
and import it in
your code. You
can do that for
almost every
popular
JavaScript
library.
Oh, like Angular!
Angular is so 2015.
But yes. Angular
would be there,
alongside VueJS or
RxJS and other cool
2016 libraries. Want
to learn about
those?
npm registry?
It’s a very big
public repository
where smart
people put code
and dependencies
as modules

26. Is the learning curve so steep?
 https://github.com/kamranahmedse/developer-roadmap

27. Do not feel so overwhelming. Not yet.
https://www.youtube.com/watch?v=mbiryVTIJ4Q

28. React “Hello World” in 3 minutes

29. Some basic concepts
 React components – Describe how a section of UI will appear based on the props
passed. Eg: Label, ShoppingCard, CreateUser
- Component is just a function/class. props are arguments.
 Class in javascript are actually Functions
 And Functions in javascript are actually Objects
- And so Class & Functions both can be stateful

30. Sample ReactJS component tree

31. Some basic concepts
Function to add 2 nos
add(2, 5)
What if I want total of 3 & 7
add(3,7)
React button component
<Button>Submit</Button>
What if I want to display a spinner on click?
<Button spinner=true>Submit</Button>

32. The path forward
 JSX semantics
 Stateful & Stateless components
 State & how to change it
 React advanced patterns
 React life cycle
 Context & Ref
 React Hooks
 Using developer tools
 Redux (External library for state management)
 React Router
And learning never stops…