Embed Size (px)
Citation preview
Introduction to ReactMurtaza Zaid
Noman Ali Khan
WHAT IS REACT?
▶ A library for creating user interfaces▶ V in MVC model
“Hello ReactJS”
“Hello World”
“Ugly”
“Hello World”
“Separation of concern”
“Hello World”
“React is a templating language”
“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
#1Everything is a
component
Thinking in React
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
▶Composable▶Reusable▶Maintainable▶Testable
*IF* Components are truly self-contained
Separation of Concerns Components
#2Single Source of Truth
Data handed from parent to child
Check
Props
Props access on this.props
Props are immutable
Props are immutable
Don’t touch my stuff!
State is mutable
#3Data flows are one way
Shopping Cart Component
Data flows up?
Data flows down with handlers
Data flows down with handlers
Data flows down with handlers
Data flows down with handlers
Events flow up, data flows down
#4Virtual DOM
▶ Inconsistent▶ Hard to test▶ DOM Manipulation is EXPENSIVE!▶ Re-render all parts of DOM make your app slow.
Touching the DOM is evil
Only diff changes from the two V-DOMs are applied to real DOM
#5JSX
JSX
JSX Compiled
#6Life Cycle
componentWillMount
▶Invoked once, before the initial render. ▶Good place to make connection to your db
service (ex: firebase,...)▶Do not call setState method here.
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.
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.
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)
Demo Applicationhttps://github.com/nomanalikhan/react-todo.git
References
▶ https://facebook.github.io/react/docs/getting-started.html▶ https://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-t
o-building-apps-with-react/▶ http://alt.js.org/guide/▶ https://hackernoon.com/10-react-mini-patterns-c1da92f068c5#.x10
2i59st
