Building Interactive Applications with React, Redux and GraphQL Training Course
React is a Javascript library for building fast and smooth interactive web pages. Together with the Flux architecture and the GraphQL query language, extremely powerful and efficient web applications can be built.
In this instructor-led, live training, participants will learn how to build React applications using Flux and GraphQL. The course covers installation, setup, integration, testing, deployment and best practices as it walks participants through the creation of a series of sample applications that demonstrate how to add additional levels of complexity and "coolness" to an application using the most advanced toolkits and techniques.
Developing applications with React requires a different kind of thinking, compared to what some developers are accustomed to, especially when coming from the mindset of other MVC frameworks such as AngularJS and Bootstrap.
This training covers the fundamentals behind of the technologies used each step of the way so that participants are not only able to build a functional application, but also understand why a particular approach is used. This lays the groundwork for thinking independently and creatively about the design and the desired results for building their own applications in the future.
Format of the course
- Part lecture, part discussion, exercises and heavy hands-on practice
Course Outline
Introduction
- React vs Angular and other Frameworks
Understanding React
- JSX, Components and Props, the Component Life Cycle, etc.
- Managing application state vs data state
Writing React Applications with ES6
- Syntax and ES6+ features to watch out for
Setting up the Development Environment
Overview of Node.js
Installing and Configuring Node.js
Overview of Webpack and Babel
- Understanding "transformation" (translating JSX into JavaScript)
Installing and Configuring Webpack
Installing and Configuring Babel
Installing React and ReactDOM
Writing Your First React Application
Configuring WebPack to Watch for Changes to Source Files
Configuring npm as a Tool Runner
Extending the React Application with New Components
Implement the Flux and Redux Architecture into a React Application
Understanding Flux and Redux
- Stateless Components, Actions, Reducers, Dispatchers, Middleware, Containers, etc.
Building Multiple Views into the React Application
Installing and Configuring Redux
Creating a Simple To-do List with Flux/Redux (with mock server API)
Integrating a Backend with your React Application: GraphQL and Apollo
Overview of GraphQL
- Data Types, Schemas, Graph Structure, and Integration with React
- Limitations of Restful Routing
- GraphQL vs SQL
Writing a GraphQL Query
Authenticating Users
Integrating React Router with GraphQL
Building a Simple Blog with React and GraphQL
Testing your React Application
Processing React Applications with npm Command-line Scripts
Troubleshooting
Structuring the App Repository
Best Practices for Writing React Code
Deploying Your React Application
A Word on Mobile Applications with React Native
Summary and Conclusion
Requirements
- Web application development experience
- Javascript programming experience
- Familiarity with React
Audience
- Developers
Open Training Courses require 5+ participants.
Building Interactive Applications with React, Redux and GraphQL Training Course - Booking
Building Interactive Applications with React, Redux and GraphQL Training Course - Enquiry
Building Interactive Applications with React, Redux and GraphQL - Consultancy Enquiry
Consultancy Enquiry
Testimonials (2)
* The hands-on approach, which helped us understand the subject matter better. * The teacher's flexibility in covering topics that are relevant to our use cases.
Juan Rial - Cegeka NV
Course - Building Interactive Applications with React, Redux and GraphQL
Although I had a pretty good knowledge of the subject already, I found out a lot useful stuff during the course.
Stefan-Lucian Bucur - Cegeka NV
Course - Building Interactive Applications with React, Redux and GraphQL
Upcoming Courses
Related Courses
Advanced React
14 HoursThis instructor-led, live training in the Philippines (online or onsite) is aimed at developers who wish to build React components and design complex applications.
By the end of this training, participants will be able to:
- Understand React's advanced concepts, including context APIs, HOCs, external state, asynchronous APIs, etc.
- Build composable components with React.
- Enable server side and client side authentication.
- Implement React and Redux libraries to manage complex stateful applications.
- Reduce code and optimize an application's performance.
- Test and deploy an application.
Ant Design
7 HoursThis instructor-led, live training in the Philippines (online or onsite) is aimed at developers who wish to use Ant Design to enhance the User Experience for their React application.
By the end of this training, participants will be able to implement Ant Design's React components to develop beautiful enterprise-class web applications.
GraphQL Basics
7 HoursIn this instructor-led, live training in the Philippines, participants will learn the fundamentals of GraphQL as they step through the creation of a simple API with GraphQL.
By the end of this training, participants will be able to:
- Understand what GraphQL is and what distinguishes it from REST.
- Understand top-level GraphQL terms.
- Set up a GraphQL coding environment.
- Build and improve a GraphQL API.
Hasura GraphQL Engine
14 HoursThis instructor-led, live training in the Philippines (online or onsite) is aimed at database administrators and developers who wish to use Hasura to build, access, and manage databases and applications efficiently with GraphQL.
By the end of this training, participants will be able to:
- Set up the necessary development environment to start building databases with Hasura.
- Build, run, manage data access and queries on Hasura using GraphQL models.
- Secure data access by setting up authentication with JSON Web Tokens and Firebase.
- Extend database functions by integrating business logic.
- Manage database migrations and metadata effectively on Hasura to prevent data loss.
Choosing the Right JavaScript Framework
14 HoursThis instructor-led, live training in the Philippines (onsite or remote) is aimed at developers who need to decide which JavaScript framework to use to develop front-end applications.
By the end of this training, participants will be able to:
- Set up an optimal development environment to start developing front-end applications.
- Implement demo applications to test the limitations and benefits of a JavaScript framework.
- Decide on which JavaScript framework is the best fit.
Testing React Apps with Jest
14 HoursThis instructor-led, live training in the Philippines (onsite or remote) is aimed at engineers who wish to use Jest to test React applications and components.
By the end of this training, participants will be able to:
- Install and configure a proper testing environment.
- Write asynchronous tests for React apps and components.
- Run Jest advanced tests that include mocking, spies and stubs.
Next.js 14 Advanced Development
21 HoursThis instructor-led, live training in the Philippines (online or onsite) is aimed at intermediate-level to advanced-level web developers and technical architects who wish to explore the advancements of Next.js 14 and gain the knowledge to build cutting-edge web applications.
By the end of this training, participants will be able to:
- Leverage the full potential of Next.js 14 for building complex applications.
- Utilize the latest features such as Middleware, React Server Components, and Edge Functions.
- Implement best practices for performance, scalability, and SEO.
- Troubleshoot common issues in Next.js applications effectively.
Next.js 14 - Advanced
21 HoursThis instructor-led, live training in the Philippines (online or onsite) is aimed at advanced-level developers who wish to master the latest features in Next.js 14, optimize performance, and implement modern React techniques.
By the end of this training, participants will be able to:
- Implement advanced React hooks and concurrent features.
- Understand and utilize Next.js routing strategies effectively.
- Leverage Server Components, Server Actions, and hybrid rendering approaches.
- Optimize data fetching, caching, and incremental static regeneration.
- Use Next.js as a backend solution with Edge Functions and Edge Runtime.
- Manage state using React Context, Redux, and atomic state libraries.
- Optimize application performance for Web Core Vitals.
- Test, monitor, and deploy Next.js applications efficiently.
React: Build Highly Interactive Web Applications
21 HoursIn this instructor-led, live training in the Philippines, we demonstrate React's power and flexibility, compare it to alternative frameworks, and walk participants step-by-step through the creation of their own React application.
By the end of this course, participants will be able to:
- Understand React's design philosophy.
- Decide when and where it makes sense to use React, and when to rethink the conventional MVC model.
- Understand React concepts such as components, props, state, and lifecycle.
- Implement related technologies such as Babel, Webpack, and JSX.
- Build, test and deploy an interactive web application.
React with Next.js
14 HoursThis instructor-led, live training in the Philippines (online or onsite) is aimed at web developers who wish to use Next.js to create React applications.
By the end of this training, participants will be able to:
- Develop server-side web applications and static sites in Next.js.
- Handle and store data with MongoDB.
- Secure a web application with AuthO authentication.
React Patterns
14 HoursThis instructor-led, live training (online or onsite) is aimed at developers with React skills who wish to optimize and improve their creation of React applications by understanding and applying React's component patterns.
By the end of this training, participants will be able to:
- Understand the different types of React Patterns
- Use React Context API for web applications
Format of the Course
- Interactive lecture and discussion.
- Lots of exercises and practice.
- Hands-on implementation in a live-lab environment.
Course Customization Options
- To request a customized training for this course, please contact us to arrange.
- To learn more about React, please visit: https://reactjs.org
React, Redux and TypeScript
21 HoursReact is a widely-used library for creating single page applications in JavaScript and HTML. It is used by companies such as Facebook, Instagram, Netflix or the New York Times.
This course will introduce the foundations on which React and other libraries (like Angular and Vue.js) are based on and highlight the sepecifics of React. It will also cover technologies that are commonly used with React, like Redux and React-Router.
By the end of this course participants will be able to build applications of various complexity with React while adhering to best practices.
React, Relay, and GraphQL
14 HoursThis instructor-led, live training in the Philippines (onsite or remote) is aimed at developers who wish to use GraphQL and Relay to manage data on React applications.
By the end of this training, participants will be able to:
- Set up the necessary development environment to start data control for React applications.
- Deliver instant UI-response interactions.
- Aggregate data from multiple libraries into one convenient API.
- Pre-fetch using GraphQL and Relay.
Spring Boot, React, and Redux
14 HoursThis instructor-led, live training in the Philippines (online or onsite) is aimed at web developers who wish to build functional front-end and back-end web applications with Spring Boot, React, and Redux.
By the end of this training, participants will be able to:
- Build a front-end application with React and Redux.
- Create RESTful APIs with Spring Boot.
- Secure web services with Spring security and JWT web tokens.