React introduction

What is ReactJs ?
“We build react to solve one problem: building large applications with data that changes over time”

Key Ideas
• Components, not templates
• One-way data flow
• Re-render, Don’t Mutate
• Virtual DOM, simple and fast
• JSX
• React Native

Components CartComponent
CartListComponent
CartItemComponent

What’s good about it?
• Easy to start with
• JSX makes components easily understandable
• Rendering can be done on the server
• SEO
• ES6 support

What’s not so good about it?
• No Event System (other than vanilla DOM events)
• No AJAX capabilities
• No Data Layer
• No Application Framework
• No Promises
• No standard way on how to implement all these

Should I Use React?
• Yes, but take into consideration about following points:
• React will slow you down tremendously at the start. Understanding how props, state, and component
communication works is not straightforward, and the docs are a maze of information. This will be countered,
in theory, by a grand speed up when your whole team is on board.
• React does not support any browser below IE8, and never will.
• If your application / website doesn't have very much dynamic page updating, you will be implementing a lot of
code for a very small benefit.
• You will reinvent a lot of wheels. React is young, and because there's no canonical way to do events /
component communication, you'll have to build large component libraries from scratch.
• Best Idea would be to use best practices which were followed by other users, e.g. Airbnb style guide:
• https://github.com/airbnb/javascript/tree/master/react

App Setup
• npm i react react-dom -S
• create a index.js file
• add this to the file
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return <p> Hello React!</p>;
}

State Management
• Not long time ago… $.ajax
• And now we are increasing the UI complexity with JavaScript
• To solve this... Facebook Devs designed Flux

Flux
• It’s a pattern (Application Architecture)
• It’s a nice way to make components to talk to each others
• It’s a unidirectional data flow
Action Dispatcher Store View
Action

Flux - Actions
• Where data get into the system
• Person interaction or process interaction
• Action type and data
Action

Flux - Dispatcher
• It’s the central hub that manages all data flow
• It’s essentially a registry of callback into the stores
Action

Flux - Store
• It’s where you add you state and logic
• It’s result in an update to the state of the store, via dispatcher
• It’s broadcast an event saying that their state has changed
• They view may query the new state and update themselves
Action

Flux - View
• It’s where we show your results
• When it receive the event from the store, it use setState() or forceUpdate()
to render
Action

References
• https://en.wikipedia.org/wiki/React_(JavaScript_library
)
• https://facebook.github.io/react/
• https://facebook.github.io/flux/
• https://facebook.github.io/react/blog
• http://blog.andrewray.me/reactjs-for-stupid-people/
• http://www.slideshare.net/AndrewHull/react-js-and-

React introduction

More Related Content

What's hot (20)

Similar to React introduction (20)

Recently uploaded (20)

React introduction