React, Relay, and GraphQL Training Course
In the years following 2010, the switch from native web platforms to their mobile counterpart required a more efficient data request system. At the time, companies relied on RESTful services that proved to be faulty due to their inability to adapt to convoluted requests in React applications, resulting in slow response times. In order to overcome this obstacle, Facebook engineers created services known as GraphQL and Relay. GraphQL simplifies the client to API relationship by automating requests while the JavaScript framework, Relay, manages data in React applications. Both Relay and GraphQL are used to optimize a React application's UI.
This instructor-led, live training (online or onsite) is aimed at developers who wish to use GraphQL and Relay to manage data in 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.
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.
Course Outline
Introduction
Overview of the Web Development Cycle
- Version control, coding, building, testing, and deploying
- Automating the process
The Fundamentals of APIs and Their Functionality
- Web Architecture Patterns: the composite pattern, proxy pattern, and facade pattern
- Operations: queries and mutations
Preparing the Development Environment
- Preparing the code repository (GitHub, GitLab, etc.)
- Installing NPM
- Preparing file dependencies
Developing an Application
- Creating a data-store that loads data folder content
- Creating a server file and configuring GraphQL
- Run React with Relay as the JavaScript framework
- Automating work with pre-fetching
- Using differed queries, define properties to find critical data
- Code-splitting data using Relay
Testing the Application
- Finding code errors with JSHint
- Testing optimization with web.dev
Securing the Application
- Authenticating users
Troubleshooting
Summary and Conclusion
Requirements
- An understanding of APIs
Audience
- Developers
Need help picking the right course?
china@nobleprog.com or 400 6116 540
React, Relay, and GraphQL Training Course - Enquiry
React, Relay, and GraphQL - Consultancy Enquiry
Consultancy Enquiry
Testimonials (5)
The situation was atypical because an intensive training for developers was to be conducted with non-developers. Lukasz took up this challenge with empathy and a lot of humour. Through his intelligent and flexible manner, he was able to ensure that a concrete learning gain was achieved for everyone. I enjoyed this very much and would gladly take a seminar with Lukasz again.
Christoph - Honda Bank GmbH
Course - MERN Fullstack Development
He is very patient and understanding towards the participants. Always there to provide us with valuable insights and advice to adopting micro-frontend in our own organisation. He also taught us how to implement micro frontend without utilising any boilerplate codes.
Alvin Chin - Ministry of Defence
Course - Building Micro Frontends with React
No powerpoint
Raymond Chan - Hospital Authority
Course - Advanced React
The training has good content and easy to follow
David Phetole Leshabela - Vodacom SA
Course - React with Next.js
I liked Osorios openness and kindness - and that it wasn't so dry but fun!
Jannis Hell - Planet Labs
Course - GraphQL Basics
Upcoming Courses
Related Courses
Advanced React
14 HoursThis instructor-led, live training in China (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 China (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.
FARM (FastAPI, React, and MongoDB) Full Stack Development
14 HoursThis instructor-led, live training in (online or onsite) is aimed at developers who wish to use the FARM (FastAPI, React, and MongoDB) stack to build dynamic, high-performance, and scalable web applications.
By the end of this training, participants will be able to:
- Set up the necessary development environment that integrates FastAPI, React, and MongoDB.
- Understand the key concepts, features, and benefits of the FARM stack.
- Learn how to build REST APIs with FastAPI.
- Learn how to design interactive applications with React.
- Develop, test, and deploy applications (front end and back end) using the FARM stack.
GraphQL Basics
7 HoursIn this instructor-led, live training in China, 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 China (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 China (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.
JavaScript, Node JS and React Bootcamp (Beginner to Intermediate Level)
35 HoursThis instructor-led, live training in China (online or onsite) is aimed at beginner-level .NET developers who wish to gain proficiency in JavaScript, Node.js, and React to actively develop and migrate systems/platforms.
By the end of this training, participants will be able to:
- Write and debug JavaScript code effectively.
- Build and deploy server-side applications using Node.js.
- Develop dynamic and responsive user interfaces with React.
- Integrate front-end and back-end components to create full-stack applications.
- Understand best practices for migrating legacy systems to modern JavaScript-based platforms.
Testing React Apps with Jest
14 HoursThis instructor-led, live training in China (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.
MERN Fullstack Development
14 HoursThis instructor-led, live training in China (online or onsite) is aimed at web developers who wish to use the MERN Stack for fullstack development.
By the end of this training, participants will be able to:
- Integrate React with MongoDB, Express, and Node.js.
- Build a fullstack web application from scratch.
- Implement application security through authorization and authentication.
Building Micro Frontends with React
21 HoursThis instructor-led, live training in China (online or onsite) is aimed at developers who wish to use React to develop, test, and deploy micro-frontends for large web applications, making them highly-scalable, technology agnostic, and easier to maintain.
By the end of this training, participants will be able to:
- Set up the necessary development environment to start developing micro-frontends with React.
- Understand the architecture, core concepts, and advantages of micro-frontends.
- Learn how to build, integrate, test, and deploy micro-frontends with React.
- Implement micro-frontends with module federation.
- Apply the CI/CD pipeline production-grade workflow.
- Know the common issues with CSS in micro-frontends and how to fix them.
- Get insights on how to implement other frontend frameworks with React.
Next.js 14 Advanced Development
21 HoursThis instructor-led, live training in China (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 China (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.
Building Interactive Applications with React, Redux and GraphQL
28 HoursIn this instructor-led, live training in China, 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.
React with Next.js
14 HoursThis instructor-led, live training in China (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.