ReactJS / Redux intro for API engineers
mfakiolas@omilia.com - @fakiolinho - medium.com/@fakiolinho
Overview
- What is ReactJS and why we use it
- ReactJS glossary
- What is Redux and why we use it
- Redux glossary
What is ReactJS?
https://reactjs.org/
Why ReactJS rocks?
- Great application architecture
- Top to bottom data flow
- Reusability
- Functional composition
- Fast development
- Fast debugging
- Great performance because of Virtual DOM and internal re-rendering mechanism
- Easily unit-tested
- Great ecosystem
Why ReactJS rocks?
Components
Components lifecycle
Components communication
Components communication
Data flow (input / output)
Data flow (input / output)
Components PropTypes (interface)
https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes
Components PropTypes (interface)
https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes
Components PropTypes (interface)
https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes
Glossary of React Terms
https://reactjs.org/docs/glossary.html
Glossary of React Terms
https://reactjs.org/docs/glossary.html
Glossary of React Terms
https://reactjs.org/docs/glossary.html
Glossary of React Terms
https://reactjs.org/docs/glossary.html
Glossary of React Terms
https://reactjs.org/docs/glossary.html
Glossary of React Terms
https://reactjs.org/docs/glossary.html
Glossary of React Terms
https://reactjs.org/docs/glossary.html
Glossary of React Terms
https://reactjs.org/docs/glossary.html
Glossary of React Terms
https://reactjs.org/docs/glossary.html
What is Redux?
https://redux.js.org/
Why Redux rocks?
- Global state
- Immutability - avoid side-effects
- Share common info across different places of an app because of it
- Update common info globally with ease
- Drop great volumes of logic from our components
- Reduces distributed blocks of spaghetti code here and there
- Easily unit-tested
Why Redux rocks?
How it looks like? (global state)
How it looks like? (files structure)
How it looks like? (session state)
How it looks like? (session initial state)
How it looks like? (session actions)
How it looks like? (action creator)
How it looks like? (session reducer)
How it looks like? (session reducer)
How it looks like? (session reducer)
How it looks like? (session selector)
How Redux works?
How Redux works?
Update avatar (example 1-1)
Update avatar (example 1-2)
GET projects (example 2-1)
GET projects (example 2-1)
GET projects (example 2-1)
GET projects (example 2-1)
GET projects (example 2-1)
GET projects (example 2-1)
GET projects (example 2-2)
GET projects (example 2-2)
GET projects (example 2-2)
GET projects (example 2-2)
GET projects (example 2-3)
How ReactJS works with Redux?
How can i debug Redux?
https://github.com/zalmoxisus/redux-devtools-extension
Glossary of Redux
https://redux.js.org/glossary
Glossary of Redux
https://redux.js.org/glossary
Glossary of Redux
https://redux.js.org/glossary
Glossary of Redux
https://redux.js.org/glossary
Glossary of Redux
https://redux.js.org/glossary
Questions
