1
Refreshers on the components of the RIAs
- Fundamentals. HTML, CSS, Javascript. The DOM.
- Conventional app design patterns. Limitations of JavaScript applications.
- Ecosystem of JavaScript frameworks.
- Data-Binding principles: dirty-checking, observable, virtual-dom.
- ReactJS, positioning and philosophy.
- JSX, presentation. Implementing "Transpilers".
- Development environment. IDE and plug-ins.
Hands-on work
Setting up the development environment. Introduction to JSX. Defining the app's structure.
2
Developing with ReactJS
- Approach: MVC and Virtual Dom, a matter of performance.
- Using JavaScript or JSX.
- Understanding JSX in detail. Pitfalls to avoid.
- Main API methods.
- Creating view components. Lifecycle.
- Initializing properties.
- Render Function: management of component states.
Hands-on work
Defining and producing components according to the determined specifications.
3
Interactivity of components
- Event management. "autobinding" and delegation.
- Design Pattern: strategy for stateful components.
- Composing in sets.
- Component Data Flow: owner, children and dynamic creation.
- Reusable components: control and transfer of properties.
- Control of form components.
- DOM manipulation.
Hands-on work
Creating a structured set of UI components.
4
Single-page app with ReactJS and Flux or Redux
- Flux/Redux: presentation. Data propagation.
- Comparison of architectures.
- Creating views and controllers in Flux.
- Role of the Dispatcher in Flux for actions.
- The Stores, logical state manager in Flux.
- Definition of Functional Programming.
- Approach with Redux. The "Reducer".
- Extension for ReactJS: "hot-loader".
Hands-on work
Incorporate an SPA.
5
Isomorphic application
- Principle and benefits of isomorphic development.
- Server-side JavaScript ecosystem.
- Introduction to NodeJS.
- Configuring NodeJs for ReactJS.
- Organizing routes.
Hands-on work
Server-side pre-render of an application.
6
Introduction to React Native
- Positioning, differences with Cordova.
- From React to native iOS components, a project to follow.
Demonstration
Application using React Native.