React revolves around the creation of dynamic, interactive, and efficient web applications. By understanding the fundamental principles of React, you’ll be armed with the knowledge to craft visually appealing web interfaces and practical user experiences. This is perfect for developers eager to push their web development capabilities further and enhance their existing digital platforms or craft new web projects from scratch.
Geared for experienced web developers, our Mastering React Boot Camp is a five-day, comprehensive hands-on program that explores the latest features, skills and benefits React has to offer. Throughout the course you’ll learn the practical “real-world” foundational and core React skills required to solve the usual challenges you might face when developing modern web applications.
The lab intensive course includes plenty of hands-on lab work designed to immerse you in the skills required to get you up and running with React right away.
Throughout the course, you’ll cover a wide range of essential topics from understanding the architecture of class and functional components to mastering JSX and the Virtual DOM. You’ll also learn to leverage modern development tools, diving into the power and efficiency of Vite for creating TypeScript React applications and the robustness of Vitest for high-quality testing methodologies. Practical application is a key focus, allowing you to work hands-on with Vite to create and run a TypeScript React application, integrate secure authentication using Okta, and conduct performance assessments between different React tools.
By the course’s end, you’ll have completed a variety of projects, including a time-logging app and a dynamic blog application, and gained deep familiarity with React’s state management, event handling, and hooks. You’ll be fully equipped with the confidence and skills required to efficiently design and implement responsive web applications using React.
- Price: $2,595.00
- Duration: 1 day
- Delivery Methods: Virtual
| Date | Time | Price | Option |
|---|---|---|---|
| Please contact us at info@toptalentlearning.com or 469-721-6100 for this course schedule. |
For questions call: (469) 721-6100
Why choose
TOPTALENT?
- Get assistance every step of the way from our Texas-based team, ensuring your training experience is hassle-free and aligned with your goals.
- Access an expansive range of over 3,000 training courses with a strong focus on Information Technology, Business Applications, and Leadership Development.
- Have confidence in an exceptional 95% approval rating from our students, reflecting outstanding satisfaction with our course content, program support, and overall customer service.
- Benefit from being taught by Professionally Certified Instructors with expertise in their fields and a strong commitment to making sure you learn and succeed.
Course Topics / Agenda
Please note that this list of topics is based on our standard course offering, evolved from typical industry uses and trends. We will work with you to tune this course and level of coverage to target the skills you need most. Course agenda, topics and labs are subject to adjust during live delivery in response to student skill level, interests and participation.
1. Class and Functional Components
- What’s a component?
- Class components
- Functional components – Motivation behind Hooks
- How Hooks Map to Component Classes
- Our first component
- Building the App
- Props – Making the App data-driven
- Props – this.props vs props
- Events – Your app’s first interaction
- useEffect() Hook Example
- State – Updating state
- useState() Hook Example
2. JSX and the Virtual DOM (Overview)
- React Uses a Virtual DOM
- Why Not Modify the Actual DOM?
- What is a Virtual DOM?
- Virtual DOM Pieces
- ReactElement
3. JSX
- JSX Creates Elements
- JSX Attribute Expressions
- JSX Conditional Child Expressions
- JSX Boolean Attributes
- JSX Comments
- JSX Spread Syntax
- JSX Gotchas
4. Using Vite
- Using Vite to create the TypeScript React application
- Start it up and watch it run
- Adding authentication with Okta to the application
- Unique features of Vite
- Why combine TypeScript and Vite?
- Benefits of using React with Vite
- Creating a Vite project
- Project structure
- Running the application
- Building a blog application
- Creating the blog data
- Creating a blog component
- Performance comparison: CRA vs. Vite
5. Forms
- Forms 101
- Text Input
- Multiple fields
- Validation
6. Routing
- What’s in a URL?
- React Router’s core components
- Building the components of react-router
7. Components: With both class and functional examples
- A time-logging app
- Getting started
- Breaking the app into components
- The steps for building React apps from scratch
- Step 2: Build a static version of the app
- Step 3: Determine what should be stateful
- Step 4: Determine in which component each piece of state should live
- Step 5: Hard-code initial states
- Step 6: Add inverse data flow
- Updating timers
- Deleting timers
- Adding timing functionality
- Add start and stop functionality
- Methodology review
8. Advanced Component Configuration with props, state, and children (Overview)
- Context
- useContext() Hook Example
- More on state
- Talking to Children Components with props.children
9. Using Vitest
- What Is Vitest?
- Requirements
- Project Setup
- Installing & Configure Vitest
- Writing Our First Test
- Adding React Support
- Testing Events
- Extending Vitest With Jest Dom
- Vitest with React Testing Library
10. Debugging React
- Using React Developer Tools
- Using Visual Studio Code
- OPTIONAL – Using the Chrome Debugger
11. React Hooks
- Writing and Using Custom Hooks
12. REST
- REST Basics
- Using fetch
- Using axios
Learning Objectives
The course is rich with hands-on activities, challenge labs, knowledge checks, valuable discussions and focused projects. Working in a hands-on learning environment, guided by our expert team, attendees will learn about and explore:
- React’s core principles to craft dynamic, user-centric web interfaces that respond efficiently to user interactions.
- How to tools like Vite and Vitest to streamline the development process, optimize application performance, and conduct comprehensive testing to ensure application robustness.
- How to seamlessly incorporate advanced React functionalities such as state management, routing, and complex component structures into their projects, elevating the overall user experience of their applications.
- How to implement and manipulate Props to create applications that efficiently handle and present data, enhancing user interaction and information flow.
- How to integrate secure authentication solutions, like Okta, ensuring user data protection and tailored user experiences within their applications.
- Leveraging the benefits of the Virtual DOM, enabling faster rendering and efficient updates, resulting in smoother user experiences and reduced page load times.
If your team requires different topics or tools, additional skills or custom approach, this course may be further adjusted to accommodate. We offer additional full stack development, React, React Native, web development, design and security courses which may be blended with this course for a track that best suits your development objectives.
This fast-paced course is for intermediate skilled web developers new to React who are proficient in HTML5, CSS3 and JavaScript. This course is not for beginners.
This fast-paced course is for intermediate skilled web developers new to React who are proficient in HTML5, CSS3 and JavaScript. This course is not for beginners.
Take Before: Attendees should have experience with the topics in the following courses, or should have recently attended these as a pre-requisite:
- Introduction to HTML5 / CSS3 & JavaScript Essentials
