React

What is React?
React is a JS library for rendering web pages.
That’s it.
The closest equivalent is angular with only directives
without the other features such as services,
controllers etc.

So why use it?
React is fast
Development best practices
React native
Server rendering.
Easy to grasp
Huge ecosystem

The React way - 4 principles of
developing react applications
1. Break the UI to components
2. Keep unidirectional data ow.
3. Identify the UI state.
4. Dispatch actions to change the state.

JSX
JSX is a syntactic sugar for function calls and object
construction
Instead of this:
React.createElement(
a,
{href:"spectory.com"},
'Spectory website’'
)
We can write:
<a href=”spectory.com”>Spectory website</a>

JSX
It is very similar to HTML, and it lets us integrate JS
code inside with curly braces:
class HelloPage extends Component {
render() {
let userName = 'amitai';
return (
<div>
<h1>Hello, {userName}, today is
{(new Date()).toDateString()}
</h1>
</div>
);
}
}

Children in JSX
Children is a unique prop in react
Created automatically when the component has
child elements.
Lets the parent component change the state or the
context of its children
Reminds ng-transclude in angular

Dumb and smart components
Smart Dumb
Inherit react
component
simple function
Describe how things
work
Describe how things look
Provide no DOM
markup or styles
Have no app dependencies
Provide data, do
data fetching
Receive only props,
providing data and callbacks
Call redux actions Rarely have own state
The default type of the component will be “dumb”
unless there is a need to upgrade it.

Redux
Redux is a set of libraries that simpli ed Flux.
Actions - action is a function that the application
uses to send data to the store.
Reducers - The reducers takes the data from the
action and inserts it into the state.
Store - the store has few responsibilities:
- Holds the state of the application, and expose it.
- Dispatches actions.
- Subscribes listeners on state changes events.

Redux rules:
The reducer is a pure function that receives an
action and a state and returns new state.
Any action has case that manipulate the state.
The state is immutable
De ne "default" that will return the state.
Use default parameter in order to init our state.

The application state structure
It should be designed to serve the application
functionality
Before you add object to the state, stop, and think.
Keep it small and simple as possible.
You can manipulate this state before transferring
it to the props
Do not keep duplications or redundant data.
Treat it like you treat the database tables

Redux state vs local state
As a rule we do not want to use setState
The only exceptions are when the state is local and
is not related to the application

Debugging tools:
React Developer Tools
View the component ands it children.
View the state and props of the component.
View the component’s events.
Redux DevTools:
A must have for developing in redux
View actions
View the application state

Conclusion
React is the most popular framework right now.
It’s easy to learn and master.
IMO every web developer should learn it because
it is here to stay.
It is back by a large company that pushes it and
improve it all the time
It is expanding to supportany type of UX.
It helps the developer to write better software
and become more professional.

References
https://facebook.github.io/react/
http://redux.js.org/
https://www.youtube.com/watch?
v=5oiXG9f6GO0&index=1&list=PLuNEz8XtB51K-
x3bwCC9uNM_cxXaiCcRY - Rem Zolotykh
https://app.pluralsight.com/library/courses/react-
redux-react-router-es6/ - Cory House

React

More Related Content

What's hot (20)

Similar to React (20)

Recently uploaded (20)

React