A small presentation on basics of ReactJS.

1. Introduction to React
Murtaza Zaid
Noman Ali Khan

2. WHAT IS REACT?
▶ A library for creating user interfaces
▶ V in MVC model

3. “Hello ReactJS”

4. “Hello World”
“Ugly”

5. “Hello World”
“Separation of concern”

6. “Hello World”
“React is a templating language”

7. “Hello World”
● Don’t sweat it
● JSX
● It’s actually just JS
● It’s not a templating language
● If you don’t like it, don’t use it

8. #1
Everything is a component

9. Thinking in React

10. Thinking in React
▶ FilterableProductTable (orange): contains the entirety of
the example
▶ SearchBar (blue): receives all user input
▶ ProductTable (green): displays and filters the data
collection based on user input
▶ ProductCategoryRow (turquoise): displays a heading for
each category
▶ ProductRow (red): displays a row for each product

11. ▶ Composable
▶ Reusable
▶ Maintainable
▶ Testable
*IF* Components are truly self-contained
Separation of Concerns Components

12. #2
Single Source of Truth

13. Data handed from parent to
child
Check
Props

14. Props access on this.props

15. Props are immutable

16. Props are immutable
Don’t touch my stuff!

17. State is mutable

18. #3
Data flows are one way

19. Shopping Cart Component

20. Data flows up?

21. Data flows down with handlers

22. Data flows down with handlers

23. Data flows down with handlers

24. Data flows down with handlers

25. Events flow up, data flows down

26. #4
Virtual DOM

27. ▶ Inconsistent
▶ Hard to test
▶ DOM Manipulation is EXPENSIVE!
▶ Re-render all parts of DOM make your app slow.
Touching the DOM is evil

28. Only diff changes from the two V-DOMs are applied to real DOM

29. #5
JSX

30. JSX

31. JSX Compiled

32. #6
Life Cycle

33. componentWillMount
▶ Invoked once, before the initial render.
▶ Good place to make connection to your db
service (ex: firebase,...)
▶ Do not call setState method here.

34. componentDidMount
▶ Invoked once.
▶ Immediately after the initial rendering occurs.
▶ It is good place for you to make AJAX request to fetch
data for first used.

35. componentWillReceiveProps
▶ Invoked when a component is receiving new props.
▶ This method is not called for the initial render.
▶ Use this method as a way to react to a prop change before
render() is called by updating the state with setState.

36. componentWillUnmount
▶ Invoked immediately before a component is
unmounted from the DOM.
▶ Perform any necessary cleanup in this method(Ex:
invalidating timers, clear up DOM elements were
created at componentDidMount)

37. Demo Application
https://github.com/nomanalikhan/react-todo.git

38. References
▶ https://facebook.github.io/react/docs/getting-started.html
▶ https://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-
building-apps-with-react/
▶ http://alt.js.org/guide/
▶ https://hackernoon.com/10-react-mini-patterns-c1da92f068c5#.x102i59st

39. Thank You!
Murtaza Zaidi
@murtazazaidi_
murtaza.zaidi@venturedive.com
Noman Ali Khan
@4nauman
noman.ali@venturedive.com