View
147
Download
4
Embed Size (px)
Citation preview
About Me
Ali Hussein Al-Sa’o
Senior Front End Engineer @MBC group
10+ years in web development
alsao ali-sao ali_sao
What is ReactReact is a UI library developed at Facebook to facilitate the creation of interactive, stateful & reusable UI components. It is used at Facebook in production, and Instagram.com is written entirely in React.
One of it's unique selling points is that not only does it perform on the client side, but it can also be rendered server side (Isomorphic).
It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.
What does it need to make it work and why
A typical modern React project needs the following to run productively and successfully
Babel : babel is a javascript transpiler that converts code from one syntax to another. Mainly responsible for converting JSX and ES6 into valid ES5 all browsers can understand
Webpack : A javascript bundler and task runner. You can uglify your code, deploy to live server , import assets as modules , lint and test your code , compile css preprocessors and tons of other tasks.
What special about ReactLet’s try to clone Facebook messenger using my React
And your old fatty jQuery
React is all about componentsWith React we can build reusable components that would allow
us to share code all over our project
Components have data containers
Components can receive data via props.
Components has inner state object.
Data flow is unidirectional.
Data containers are separating concern.
Components have Lifecycle HooksDo something at a certain lifecycle time
Mounting hooks :
• componentWillMount() • render() • componentDidMount()
Updating hooks :
• componentDidUpdate()
Unmounting
• componentWillUnmount()
Really , what about this?
React will do the magic for you
With jQuery you have to re-render the whole list
About Me
Omar Abdelhafith
Staff Software Engineer @Zendesk
iOS/Android and Backend
nsomar nsomar @ifnottrue
http://nsomar.com
StructureApp
Component
Messages Component
Chat Component
Header Component
Body Component
Controls Component
Structure - StateApp
Component
Messages Component
Chat Component
Header Component
Body Component
Controls Component
Messages Selected
Main State
Text Field State
Structure - StateApp
Component
Messages Component
Chat Component
Header Component
Body Component
Controls Component
Messages State Chat State
Text Field StateBody State
Header State
SingletonOther Singleton
Structure - ActionsApp
Component
Messages Component
Chat Component
Header Component
Body Component
Controls Component
ScalingApp
Component
Messages Component
Chat Component
Header Component
Body Component
Controls Component
UserInfo Component
Gif Component
Adding more componentsAdding GifChooser and UserInfo - App.js state grows - App.js action handling grows
Updating the state
Chat Web AppUser Typing Uploading
Images
Web Sockets Messages
Web Sockets Status and
updates
Async Http requests
MQTT Searching Gifs
Searching Gifs
Updating the state- Real-life applications receive many events- These events change the state - Leads to incorrect UI updates
Non Redux StructureApp
Component
Messages Component
Chat Component
Header Component
Body Component
Controls Component
Non Redux StructureApp
ComponentMessages
Component
Chat Component
Header Component
Body Component
Controls Component
Redux Store
Actions No ReduxApp
Component
Messages Component
Chat Component
Header Component
Body Component
Controls Component
Actions With ReduxApp
ComponentMessages
Component
Chat Component
Header Component
Body Component
Controls Component
Redux Store
Consistence?- State is only changed when actions are
dispatched - Only the Reducer changes the state
- All connected views are notified