Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
Getting started with React
Slide 3
Slide 3 text
I am Muhammad Adnan
Full Stack Developer, WordPress Hacker at
@WPBrigade, WordPress Core Contributor, Google
Summer of Coder, #phpMyAdmin Contributor and Dad.
You can find me at adnan.pk
Hello!
Slide 4
Slide 4 text
What is React?
React is a JavaScript library from Facebook and is
especially used to create the interactive UIs.
React will efficiently Update and render the right
component when the data changes.
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
“
Why you need to learn this??
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Why you need to learn this?
Be visible in WordPress Community
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
Reactjs Features!
◉Super fast!
◉Unidirectional Dataflow!
◉Open source!
◉Declarative
◉Just JavaScript
◉Learn Once, Write Everywhere
Slide 11
Slide 11 text
Components
Slide 12
Slide 12 text
Use of Virtual DOM
Slide 13
Slide 13 text
Unidirectional Dataflow
The data flows throughout your reactjs app in a
single direction and you have better control over it.
Also the application state is contained in specific
components and as a result different components of
your app remain loosely coupled.
Slide 14
Slide 14 text
What is Declarative?
Reactjs is declarative instead of being imperative,
Simple example to understand imperative is Google navigation
system, when we enter address, guide comes and let us know which
steps we have to make to reach from place a to b.
And declarative is that we have to reach from a to b, and it doesn’t
matter how many steps we take to reach from a to b, but at the same
time we know, how to move step by step.
Slide 15
Slide 15 text
What is Declarative?
Slide 16
Slide 16 text
Example
Imperative Declarative
Slide 17
Slide 17 text
Just JavaScript
Slide 18
Slide 18 text
Components
Slide 19
Slide 19 text
JSX
JSX simply allows us to write HTML like syntax which (eventually)
gets transformed to lightweight JavaScript objects.
Slide 20
Slide 20 text
State
State is the place where the data comes from.
Slide 21
Slide 21 text
Props
Props are half of what make React components special.
Slide 22
Slide 22 text
Component Life Cycle
◉ComponentWillMount
◉ComponentDidMount
◉ComponentWillReceiveProps
◉ShouldComponentUpdate
◉ComponentWillUpdate
◉ComponentDidUpdate
◉ComponentWillUnmount
Slide 23
Slide 23 text
Prerequisites for React
◉ JavaScript knowledge
◉ NodeJS
◉ WebPack
◉ Babel
Slide 24
Slide 24 text
Let’s build a Real React App
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
Let’s build a Real React App
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Let’s build a Real React App
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
“
https://github.com/hiddenpearls/wp-plugin-reviews-react
http://adnan.pk/reviews/
Slide 35
Slide 35 text
It sometimes sounds your
mind blown up like this guy
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
Real life examples
calypso
Slide 38
Slide 38 text
Resources
◉React docs by Facebook https://facebook.github.io/react/
◉My React App https://github.com/hiddenpearls/wp-plugin-reviews-react
◉React Fundamentals https://reacttraining.com/online/react-fundamentals
◉https://reactforbeginners.com/ by Wesbos
Slide 39
Slide 39 text
Innovate!
Pivot!
Innovate!
Pivot!
Slide 40
Slide 40 text
Any questions ?
You can find me at
◉ @hiddenpearls
◉ adnan.pk
Thanks!
Slide 41
Slide 41 text
Sometimes things go out of
control
Slide 42
Slide 42 text
No content