

Weet je niet waar
starten?
Track
Certificaat
Become a React Developer
4.9+
★★★★★
★★★★★
7 recensies
Intermediate
Master the art of building dynamic and interactive user interfaces for web applications as a skilled React Developer. If you understand JavaScript well, focusing on mastering React is a wise choice. Bekijk meer
React
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity TeamsWhat you will learn
- Build modern web applications using React, including components, props, and state management
- Navigate between pages seamlessly with React Router and implement dynamic routing
- Manage global state efficiently using Redux Toolkit for scalable applications
- Develop full-stack applications with Next.js 14, including server-side rendering and API routes
- Explore the basics of React Native to build cross-platform mobile applications
- 171 chapters
- 27 hours
- 119 tasks
Trusted by employees of leading companies
Learning track content
Module 1 / React Mastery
Gain an understanding of the core principles of React. You'll learn about JSX (JavaScript XML), building reusable UI components, and rendering elements. Additionally, you'll explore the importance of data collection and conditional rendering in React applications. By the end of this section, you'll have a solid foundation of React's essential concepts, setting you up for success in the more advanced topics covered in the following sections.
- What Is React and Why Use It?Voorbeeld
- Comparing SPAs and MPAs in Web DevelopmentVoorbeeld
- How React Works with the Virtual DOMVoorbeeld
- Introducing JSX for Writing HTML in JavaScriptVoorbeeld
- Building Complex UI with JSXVoorbeeld
- Rendering Elements in ReactVoorbeeld
- Challenge: Render an Element in ReactVoorbeeld
- Understanding React ComponentsVoorbeeld
- Passing Data with Props in ReactVoorbeeld
- Challenge: Create Functional ComponentsVoorbeeld
- Conditional Rendering in ReactVoorbeeld
- Challenge: Implement Conditional Rendering – Chat NotificationVoorbeeld
- Challenge: Implement Conditional Rendering – Bank AlertVoorbeeld
- Rendering Collections of Data in ReactVoorbeeld
- Challenge: Display Data Collections in ReactVoorbeeld
- React Fundamentals Wrap-UpVoorbeeld
Explore the various methods of adding styles to the React applications. You will learn how to apply styles to individual components, use dynamic styles, and maintain a scalable and maintainable styling approach in your projects.
- Introduction to Styling in ReactVoorbeeld
- Using Inline Styles in ReactVoorbeeld
- Applying Inline Styles in PracticeVoorbeeld
- Challenge: Use Inline Styles in a React ComponentVoorbeeld
- Styling React Components with External CSSVoorbeeld
- Applying External CSS in PracticeVoorbeeld
- Challenge: Apply External CSS to a React AppVoorbeeld
- Using CSS Modules for Scoped Styling in ReactVoorbeeld
- Organizing File and Folder Structures for StylesVoorbeeld
- Challenge: Use CSS Modules in ReactVoorbeeld
- Styling Techniques in React Wrap-UpVoorbeeld
Powerful features in modern React development. Hooks revolutionize how we write functional components, providing a concise and intuitive way to manage state and perform side effects. Conversely, Context allows us to share data through the component tree without prop drilling. Combining hooks and Context enables efficient state management and simplified data sharing in React applications.
- Introduction to React Hooks and ContextVoorbeeld
- Managing State with the useState HookVoorbeeld
- Challenge: Toggle Visibility with useStateVoorbeeld
- Working with References Using the useRef HookVoorbeeld
- Challenge: Build a Controlled Form ComponentVoorbeeld
- Handling Side Effects with the useEffect HookVoorbeeld
- Challenge: Fetch and Display Data with useEffectVoorbeeld
- Optimizing Performance with the useMemo HookVoorbeeld
- Challenge: Implement a Car List Filter with useMemoVoorbeeld
- Sharing State Across Components with ContextVoorbeeld
- Using Context in a Real-World ScenarioVoorbeeld
- Challenge: Build a World of Astronomy App with ContextVoorbeeld
- React Hooks and Context Wrap-UpVoorbeeld
Step-by-step guide on how to start a real-world React project. From setting up your development environment to understanding project organization and critical tools, you'll gain the knowledge and confidence to embark on your React journey.
Module 2 / React Router Essentials
Learn the theoretical basics of concepts such as URL, domain, protocol, query parameters, and more. Understand the significance of routing in web applications and why we need the React Router library.
Discover how to create an entire React application from scratch, with the ability to display content that adapts based on the URL using React Router functionality.
- Overview of the Multi-Page WebsiteVoorbeeld
- Installing React RouterVoorbeeld
- Enabling Routing in a React AppVoorbeeld
- Defining Routes for NavigationVoorbeeld
- Recap: First Steps in React RouterVoorbeeld
- Optimizing Imports with Lazy LoadingVoorbeeld
- Implementing a Fallback ComponentVoorbeeld
- Recap: Second Steps in React RouterVoorbeeld
- Creating and Managing NavigationVoorbeeld
- Exploring React Router's Complete LogicVoorbeeld
- Recap of React Router FundamentalsVoorbeeld
Explore using query strings for sharing and managing application state via URLs, work with different data types in query parameters, and leverage React Router for navigation and effects based on URL changes.
Module 3 / State Management with Redux Toolkit in React
Explore the fundamental concepts of state management and show you how to leverage the power of the Redux Toolkit. We will guide you through the installation process and help you create your first React Redux Toolkit project. Additionally, meet a challenge to test your understanding and skills.
Investigate Redux integration with React apps, covering core concepts: actions, reducers, and the Redux store. Includes practical examples and code explanations for configuring a store, creating reducers, and connecting React components via hooks like useSelector and useDispatch.
- What AwaitsVoorbeeld
- Understanding the Project Code and File StructureVoorbeeld
- Creating the Redux StoreVoorbeeld
- Integrating the Redux Store Into the React AppVoorbeeld
- Inspecting the Store in the React AppVoorbeeld
- Understanding Actions and Action CreatorsVoorbeeld
- Understanding the Role of ReducersVoorbeeld
- Inspecting Actions and Reducers in ReduxVoorbeeld
- Connecting Redux with React ComponentsVoorbeeld
- Completing the AppVoorbeeld
Supercharge your skills in state management. In this hands-on workshop, you tackle real-world challenges and gain practical experience using the Redux Toolkit for seamless application development.
Module 4 / Next.js 14 Mastery for Building Modern Web Apps
Let's discuss what you need to learn before diving into the Next.js framework, what to expect from this course, and what you'll build.
We will set up the project, inspect ways to add styling to our app and cover visual aspects such as images, fonts, pages, and layouts.
- Setting Up the Next.js ProjectVoorbeeld
- Understanding the Project File and Folder StructureVoorbeeld
- Styling Approaches in Next.jsVoorbeeld
- Adding the Global CSS FileVoorbeeld
- Using Tailwind CSS for StylingVoorbeeld
- Working with CSS ModulesVoorbeeld
- Applying Styles ConditionallyVoorbeeld
- Adding Custom Google FontsVoorbeeld
- Challenge: Implementing a Custom Google FontVoorbeeld
- Handling Images in Next.jsVoorbeeld
Learn how to easily create and manage a new view for your app and navigate through all pages seamlessly with an incorporated routing system.
Deploy the Next.js app using GitHub and Vercel accounts. Additionally, establish a database to supply the app with the necessary data.
Consider how to obtain and show data to the user clearly and efficiently.
- How to Fetch Data in Next.jsVoorbeeld
- Working with the Dashboard PageVoorbeeld
- Challenge: Retrieving and Displaying DataVoorbeeld
- Dynamic vs. Static Rendering in Next.jsVoorbeeld
- Understanding LoadersVoorbeeld
- Implementing Specific Part LoadersVoorbeeld
- Challenge: Create a Skeleton LoaderVoorbeeld
- Optimizing Loaders with Component GroupingVoorbeeld
Discover how to implement modern web features such as pagination, CRUD operations, global search, form validation, and more.
- Building the Invoices PageVoorbeeld
- Developing the Search FunctionalityVoorbeeld
- Adding Pagination to a Next.js AppVoorbeeld
- Using Server Actions in Next.jsVoorbeeld
- Creating a New Item in the DatabaseVoorbeeld
- Updating an Item in the DatabaseVoorbeeld
- Deleting an Item in the DatabaseVoorbeeld
- Challenge: Implementing Form ValidationVoorbeeld
Authentication implementation in Next.js.
- Understanding AuthenticationVoorbeeld
- Setting Up the Login RouteVoorbeeld
- Using NextAuth.js for AuthenticationVoorbeeld
- Configuring Authentication and Protecting RoutesVoorbeeld
- Hashing Passwords and Managing CredentialsVoorbeeld
- Implementing Sign-In FunctionalityVoorbeeld
- Connecting the UI with Authentication LogicVoorbeeld
- Implementing Logout FunctionalityVoorbeeld
- Final Thoughts and Next StepsVoorbeeld
Module 5 / Foundations of React Native
The comprehensive introduction to React Native outlines the prerequisites and course objectives and offers guidance on efficient learning practices. Understand what to expect from the course and how to approach the learning journey effectively.
Explore the foundational concepts of React Native, from setting up the development environment to understanding React Native components. Get hands-on experience building a simple app and laying the groundwork for more complex projects.
- Setting Up the React Native ProjectVoorbeeld
- Understanding React Native ComponentsVoorbeeld
- Working with View and Text ComponentsVoorbeeld
- Using the Image ComponentVoorbeeld
- Styling in React NativeVoorbeeld
- Challenge: Apply Styles to ComponentsVoorbeeld
- Working with TouchableOpacity for User InteractionVoorbeeld
- Implementing ScrollView for Scrolling ContentVoorbeeld
- Rendering Lists in React NativeVoorbeeld
- Challenge: Build an Interactive Resort ListVoorbeeld
- Quiz: React Native BasicsVoorbeeld
Learn efficient management of dynamic states, props, navigation, and hooks to create polished React Native applications.
- Managing State in React NativeVoorbeeld
- Using Props for Component CustomizationVoorbeeld
- Challenge: Mastering Props and StateVoorbeeld
- Navigation in React NativeVoorbeeld
- Implementing Stack NavigationVoorbeeld
- Implementing Tab NavigationVoorbeeld
- Using React Hooks in React NativeVoorbeeld
- Quiz: React Native State, Props, and NavigationVoorbeeld
Explore advanced aspects of React Native development, covering crucial topics such as Input handling, StatusBar, ActivityIndicators, and more. Dive deep into practical techniques for building sophisticated mobile applications.
- Using the Switch Component for TogglesVoorbeeld
- Managing Loading States with ActivityIndicatorVoorbeeld
- Working with the Modal ComponentVoorbeeld
- Handling User Input with TextInputVoorbeeld
- Challenge: Dark/Light Mode Toggler with Activity IndicatorVoorbeeld
- Quiz: Advanced React Native ComponentsVoorbeeld
Requirements
- A computer with a browser - all browsers are supported.
- Your enthusiasm to enhance your tech skills.
- Everything else needed to start learning and practicing is already included in this course.
Over 200,000 5-star ratings and counting
Ruslan Kravchuk
Het belangrijkste is om te leren en niet op te geven
Het materiaal is goed, er valt veel te leren, alles om beter te worden en het belangrijkste is te leren wat je wilt....
Matteo Comune
Dankzij hen leer ik veel…
Dankzij hen leer ik veel sneller omdat ze je vanaf nul alles uitleggen. Het is de beste website voor mensen zonder IT-achtergrond...
Yuliana Cadavid
geweldige cursus voor beginners
geweldige cursus voor beginners, ze toetsen je kennis in elke les...
Elpunzon
Ik geniet van mijn Codefinity-ervaring…
Ik geniet van mijn Codefinity-ervaring met Python. De zelfgestuurde leermethode past perfect in mijn schema...
Alexandru Alexandru
Het is prettig om van Codefinity te leren
Het is prettig om van Codefinity te leren. Het is eenvoudig en heeft goede voorbeelden van wat ik hier geleerd heb...
jacob Templet
Easy to follow along with and provides…
Makkelijk te volgen en biedt uitdaging in mijn dagelijks leven. Die uitdaging motiveert me elke dag weer te leren...
Elan
Codefinity is een uitgebreide leeromgeving…
Codefinity is een uitgebreide leeromgeving die je helpt je vaardigheden als software engineer of datawetenschapper te ontwikkelen. De oefeningen zijn leuk en helpen je je skills aan te scherpen...
Thibault
Voor het eerst leren coderen
Voor het eerst leren coderen en dit succesvol doen met Codefinity - bedankt...
Adrien Morel
Goed ontworpen voor totale beginners
Goed ontworpen voor totale beginners, met stapsgewijze vooruitgang die me vertrouwen geeft....
_Gracy
het is simpelweg perfect uitgelegd
het is simpelweg perfect uitgelegd! Tot nu toe heb ik geen problemen ervaren, want alles is zo goed geregeld....
Ruslan Kravchuk
Het belangrijkste is om te leren en niet op te geven
Het materiaal is goed, er valt veel te leren, alles om beter te worden en het belangrijkste is te leren wat je wilt....
Matteo Comune
Dankzij hen leer ik veel…
Dankzij hen leer ik veel sneller omdat ze je vanaf nul alles uitleggen. Het is de beste website voor mensen zonder IT-achtergrond...
Yuliana Cadavid
geweldige cursus voor beginners
geweldige cursus voor beginners, ze toetsen je kennis in elke les...
Elpunzon
Ik geniet van mijn Codefinity-ervaring…
Ik geniet van mijn Codefinity-ervaring met Python. De zelfgestuurde leermethode past perfect in mijn schema...
Alexandru Alexandru
Het is prettig om van Codefinity te leren
Het is prettig om van Codefinity te leren. Het is eenvoudig en heeft goede voorbeelden van wat ik hier geleerd heb...
jacob Templet
Easy to follow along with and provides…
Makkelijk te volgen en biedt uitdaging in mijn dagelijks leven. Die uitdaging motiveert me elke dag weer te leren...
Elan
Codefinity is een uitgebreide leeromgeving…
Codefinity is een uitgebreide leeromgeving die je helpt je vaardigheden als software engineer of datawetenschapper te ontwikkelen. De oefeningen zijn leuk en helpen je je skills aan te scherpen...
Thibault
Voor het eerst leren coderen
Voor het eerst leren coderen en dit succesvol doen met Codefinity - bedankt...
Adrien Morel
Goed ontworpen voor totale beginners
Goed ontworpen voor totale beginners, met stapsgewijze vooruitgang die me vertrouwen geeft....
_Gracy
het is simpelweg perfect uitgelegd
het is simpelweg perfect uitgelegd! Tot nu toe heb ik geen problemen ervaren, want alles is zo goed geregeld....
Data Engineer
Certificaat van Voltooiing
Toon je pas verworven vaardigheden. Je hebt het verdiend
Discover more
Learning tracks
Alleen voor Ultimate
1 Cursus
1 Project
0 Task
Alleen voor Ultimate
7 Cursussen
345 Taken
Alleen voor Ultimate
5 Cursussen
146 Taken
Alleen voor Ultimate
4 Cursussen
115 Taken
Alleen voor Ultimate
6 Cursussen
101 Taken
Alleen voor Ultimate
6 Cursussen
168 Taken
Alleen voor Ultimate
5 Cursussen
135 Taken
Alleen voor Ultimate
2 Cursussen
1 Project
57 Taken
Alleen voor Ultimate
7 Cursussen
376 Taken
Alleen voor Ultimate
4 Cursussen
143 Taken
Alleen voor Ultimate
5 Cursussen
180 Taken
Alleen voor Ultimate
5 Cursussen
165 Taken
Alleen voor Ultimate
6 Cursussen
308 Taken
Alleen voor Ultimate
6 Cursussen
252 Taken
Alleen voor Ultimate
8 Cursussen
2 Projecten
176 Taken
Alleen voor Ultimate
2 Cursussen
80 Taken
Alleen voor Ultimate
7 Cursussen
293 Taken
Alleen voor Ultimate
1 Project
0 Task
Alleen voor Ultimate
2 Cursussen
21 Taken
Alleen voor Ultimate
5 Cursussen
111 Taken
Alleen voor Ultimate
2 Cursussen
0 Task
Alleen voor Ultimate
3 Cursussen
39 Taken
Alleen voor Ultimate
13 Cursussen
555 Taken
Alleen voor Ultimate
13 Cursussen
555 Taken
Alleen voor Ultimate
1 Cursus
0 Task
Alleen voor Ultimate
0 Task
Alleen voor Ultimate
5 Cursussen
139 Taken
Alleen voor Ultimate
3 Cursussen
71 Taken
Alleen voor Ultimate
7 Cursussen
282 Taken
Alleen voor Ultimate
5 Cursussen
239 Taken
Alleen voor Ultimate
4 Cursussen
125 Taken
Alleen voor Ultimate
2 Cursussen
33 Taken
Alleen voor Ultimate
3 Cursussen
119 Taken
Alleen voor Ultimate
1 Cursus
15 Taken
Alleen voor Ultimate
3 Cursussen
75 Taken
Alleen voor Ultimate
3 Cursussen
31 Taken
Alleen voor Ultimate
2 Cursussen
151 Taken
Alleen voor Ultimate
3 Cursussen
56 Taken
Alleen voor Ultimate
2 Cursussen
1 Project
38 Taken
Alleen voor Ultimate
3 Cursussen
36 Taken
Alleen voor Ultimate
2 Cursussen
1 Project
38 Taken
Alleen voor Ultimate
5 Cursussen
134 Taken
Learning tracks
traject
TEST TRACK 12
Beginner
4.0
(7146)
traject
Full Stack Web Development
Beginner
4.5
(58)
traject
Mastering Data Visualization
Halfgevorderd
4.6
(7)
traject
SQL from Zero to Hero
Beginner
4.7
(93)
traject
С++ Essentials
Beginner
4.4
(17)
traject
Python from Zero to Hero
Beginner
4.7
(284)
traject
Supervised Machine Learning
Halfgevorderd
4.9
(7)
traject
Python Beyond Intermediate
Beginner
5.0
(1)
traject
Java Essentials
Beginner
4.3
(9)
traject
Game Development with Unity
Beginner
4.6
(7)
traject
Become a Django Developer
Gevorderd
4.4
(27)
traject
Flask for Dummies
Halfgevorderd
4.5
(31)
traject
Frontend Development Foundations
Beginner
4.6
(52)
traject
Web Developer from Zero to Hero
Beginner
4.6
(56)
traject
Preparation for Data Science
Halfgevorderd
4.5
(11)
traject
Deep Learning Odyssey
Gevorderd
5.0
(3)
traject
Web Development with C#
Beginner
4.8
(98)
traject
TEST E2E TRACK BEGINNER
Beginner
traject
Test Track
Begginer
4.7
(3)
traject
Skilled Python BackEnd Developer
Gevorderd
4.7
(261)
traject
Test Recalculate
Beginner
traject
Excel Essentials
Beginner
4.5
(33)
traject
Full-Stack .NET Developer Journey
Halfgevorderd
4.8
(129)
traject
Full-Stack .NET Developer Journey
Halfgevorderd
4.8
(129)
traject
Test track with rating
Gevorderd
4.0
(4)
traject
TEST TEST TRACK
Beginner
traject
Data Analyst Foundation
Beginner
4.7
(111)
traject
C++ Mastery
Gevorderd
traject
Java Web
Gevorderd
4.5
(30)
traject
Become a QA Engineer
Beginner
4.5
(43)
traject
Video Production with Adobe
Beginner
traject
Digital Marketing Essentials
Beginner
traject
UI/UX Design Tools
Beginner
traject
Test image upload track
Beginner
traject
Essential Office Skills
Beginner
4.6
(24)
traject
GitHub from Zero to Hero
Beginner
traject
No-Code Website Development
Beginner
traject
C Programming & Low-Level Development
Beginner
traject
testes
Beginner
4.7
(3)
traject
Test translation track
Halfgevorderd
traject
Test CMS Track
Beginner
4.7
(3)
traject
Python for Data Analysis
Halfgevorderd
4.6
(9)
Become a Frontend Development expert
Interactive exercises
Learning videos
AI-assistant on all courses
Workspaces for designing your own projects
Ready to get started?
ProBest intro offer | UltimateA complete experience to kickstart your career | |
---|---|---|
85+ Top-Rated courses | ||
Completion certificates | ||
AI-Assistant in all courses | ||
20+ hands-on Real-world projects | ||
Personalized study tracks | ||
Unlimited workspaces | ||
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity Teams