Duration
13.0 hours
Regular fee
$250
Objectives of the training
React is a framework for developing front-end web applications based on the JavaScript language. The proposed set of resources is aimed at developers who want to remove the apparent complexity of the framework in order to build well-architected and easy to maintain web and mobile applications.Targeted audience
DevelopersPrerequisite
None.Trainers
Upcoming information
Course architecture
React - The JavaScript framework for front-end web application development
Introduction to React
• Presentation of React
• Installation of the development environment
• Structure of a React project
• Presentation of the project to be realized
• Presentation of React
• Installation of the development environment
• Structure of a React project
• Presentation of the project to be realized
Principles and functioning of React
• The components
• How JSX works
• The Props
• The State
• Summary on Props and State
• The components
• How JSX works
• The Props
• The State
• Summary on Props and State
Realization of a directory of public services
• Creation of the project
• Creation of the search component
• Connecting the search component to the external API of the directory
• Creation of the result component (stateless)
• Displaying the results
• Summary of the project
• Creation of the project
• Creation of the search component
• Connecting the search component to the external API of the directory
• Creation of the result component (stateless)
• Displaying the results
• Summary of the project
To go further
• Introduction to Lifecycle methods
• Introduction to Routing principles
• Conclusion
React - Develop the Front End of your web and mobile applications with JavaScript
• Discovering React
• Adding behavior to components
• Designing an application with Redux
• Managing side effects with Redux-Saga
• Developing for mobile with React Native
• Advanced features with React Native
• Forms and routing management
• Security and persistence with Firebase
• Connecting React to a GraphQL API
• Writing reusable components
• Testing a React application
• Conclusion
React - Manage the navigation of your web application with react-router
• Introduction to Lifecycle methods
• Introduction to Routing principles
• Conclusion
React - Develop the Front End of your web and mobile applications with JavaScript
• Discovering React
• Adding behavior to components
• Designing an application with Redux
• Managing side effects with Redux-Saga
• Developing for mobile with React Native
• Advanced features with React Native
• Forms and routing management
• Security and persistence with Firebase
• Connecting React to a GraphQL API
• Writing reusable components
• Testing a React application
• Conclusion
React - Manage the navigation of your web application with react-router
Introduction
• Difference between server-side routing and client-side routing
• Presentation of the react-router library
• Presentation of the project to be realized
• Preparing the environment for the project
• Difference between server-side routing and client-side routing
• Presentation of the react-router library
• Presentation of the project to be realized
• Preparing the environment for the project
Getting started with react-router
• Create a first browser and a first route
• Setting up several routes
• Create a menu system and links
• Transforming a menu into a NavLink
• Creating a 404 error page
• Create a redirection with the Redirect component
• Understand the properties related to the Route component
• Understanding the HoC (High Order Component) withRouter
• Create a first browser and a first route
• Setting up several routes
• Create a menu system and links
• Transforming a menu into a NavLink
• Creating a 404 error page
• Create a redirection with the Redirect component
• Understand the properties related to the Route component
• Understanding the HoC (High Order Component) withRouter
Application: creation of a country guide
• Reorganization of the code into different components
• Creation of the search component with a call to the restcountries.eu API
• Creation of the results of the country filter
• Creation of the country specific page and its links
• Conversion of a link into a dynamic link
• Conclusion on the whole project
React - Advanced features of the Front End development framework
• Reorganization of the code into different components
• Creation of the search component with a call to the restcountries.eu API
• Creation of the results of the country filter
• Creation of the country specific page and its links
• Conversion of a link into a dynamic link
• Conclusion on the whole project
React - Advanced features of the Front End development framework
Introduction
• Understanding how React modifies the DOM
• Setting up the development environment
• Understanding how React modifies the DOM
• Setting up the development environment
Component lifecycle
• The life cycle of a class component
• Practical - Lifecycle methods when creating a component
• Getting Started - The lifecycle methods for updating a component
• Practical Guide - Lifecycle Methods for Deleting a Component
• The life cycle of a class component
• Practical - Lifecycle methods when creating a component
• Getting Started - The lifecycle methods for updating a component
• Practical Guide - Lifecycle Methods for Deleting a Component
Refs, Fragments and propTypes
• Practical Guide - References (Refs)
• Practical exercises - Fragments
• Practical exercises - propTypes
• Practical - HOC (Higher Order Component)
• Practical Guide - References (Refs)
• Practical exercises - Fragments
• Practical exercises - propTypes
• Practical - HOC (Higher Order Component)
React Hooks
• Understanding React Hooks
• Practical - The useState Hook
• Hands-on - Using multiple states at the same time
• Tutorial - The useEffect HookTutorial - The useRef Hook
• Practical Guide - Creating a custom Hook
• To go further
Learning to develop with JavaScript (3rd edition)
• Presentation of the JavaScript language
• Development using algorithms
• Basics of the JavaScript language
• Conditioning of processes
• Iterative processing (loops)
• Arrays
• Procedures and functions
• Object" approach in JavaScript
• Basic objects in JavaScript
• What's new in EcmaScript
• Data entry via forms
• DOM model
• Exploring XML streams via DOM
• Cookie management in JavaScript
• Local data storage
• Remote storage (Ajax - PHP - MySQL - XML)
• Remote storage (Ajax - PHP - MySQL - JSON)
• Geolocation
• Drawing (HTML5 CANVAS)
• Management graphics
• AngularJS Framework
• Node.js Framework
• Hybrid development in JavaScript
• Ionic 3, JavaScript in hybrid mode
• Hardware management under Ionic
• Basic components under Ionic
• Basic applications under Ionic
• Persistence management in Ionic
• List management in Ionic
• Ionic management graphics
• Understanding React Hooks
• Practical - The useState Hook
• Hands-on - Using multiple states at the same time
• Tutorial - The useEffect HookTutorial - The useRef Hook
• Practical Guide - Creating a custom Hook
• To go further
Learning to develop with JavaScript (3rd edition)
• Presentation of the JavaScript language
• Development using algorithms
• Basics of the JavaScript language
• Conditioning of processes
• Iterative processing (loops)
• Arrays
• Procedures and functions
• Object" approach in JavaScript
• Basic objects in JavaScript
• What's new in EcmaScript
• Data entry via forms
• DOM model
• Exploring XML streams via DOM
• Cookie management in JavaScript
• Local data storage
• Remote storage (Ajax - PHP - MySQL - XML)
• Remote storage (Ajax - PHP - MySQL - JSON)
• Geolocation
• Drawing (HTML5 CANVAS)
• Management graphics
• AngularJS Framework
• Node.js Framework
• Hybrid development in JavaScript
• Ionic 3, JavaScript in hybrid mode
• Hardware management under Ionic
• Basic components under Ionic
• Basic applications under Ionic
• Persistence management in Ionic
• List management in Ionic
• Ionic management graphics
Private or personalized training
If you have more than 8 people to sign up for a particular course, it can be delivered as a private session right at your offices. Contact us for more details.
Request a quoteDuration
13.0 hours
Regular fee
$250
Private or personalized training
If you have more than 8 people to sign up for a particular course, it can be delivered as a private session right at your offices. Contact us for more details.
Request a quote