why react's awesome!
TRANSCRIPT
“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
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
▶ Inconsistent▶ Hard to test▶ DOM Manipulation is EXPENSIVE!▶ Re-render all parts of DOM make your app slow.
Touching the DOM is evil
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