

Usikker på hvor
starte?
Track
Sertifikat
Become a React Developer
4.9+
★★★★★
★★★★★
7 omtaler
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. Vis mer
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?Forhåndsvisning
- Comparing SPAs and MPAs in Web DevelopmentForhåndsvisning
- How React Works with the Virtual DOMForhåndsvisning
- Introducing JSX for Writing HTML in JavaScriptForhåndsvisning
- Building Complex UI with JSXForhåndsvisning
- Rendering Elements in ReactForhåndsvisning
- Challenge: Render an Element in ReactForhåndsvisning
- Understanding React ComponentsForhåndsvisning
- Passing Data with Props in ReactForhåndsvisning
- Challenge: Create Functional ComponentsForhåndsvisning
- Conditional Rendering in ReactForhåndsvisning
- Challenge: Implement Conditional Rendering – Chat NotificationForhåndsvisning
- Challenge: Implement Conditional Rendering – Bank AlertForhåndsvisning
- Rendering Collections of Data in ReactForhåndsvisning
- Challenge: Display Data Collections in ReactForhåndsvisning
- React Fundamentals Wrap-UpForhåndsvisning
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 ReactForhåndsvisning
- Using Inline Styles in ReactForhåndsvisning
- Applying Inline Styles in PracticeForhåndsvisning
- Challenge: Use Inline Styles in a React ComponentForhåndsvisning
- Styling React Components with External CSSForhåndsvisning
- Applying External CSS in PracticeForhåndsvisning
- Challenge: Apply External CSS to a React AppForhåndsvisning
- Using CSS Modules for Scoped Styling in ReactForhåndsvisning
- Organizing File and Folder Structures for StylesForhåndsvisning
- Challenge: Use CSS Modules in ReactForhåndsvisning
- Styling Techniques in React Wrap-UpForhåndsvisning
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 ContextForhåndsvisning
- Managing State with the useState HookForhåndsvisning
- Challenge: Toggle Visibility with useStateForhåndsvisning
- Working with References Using the useRef HookForhåndsvisning
- Challenge: Build a Controlled Form ComponentForhåndsvisning
- Handling Side Effects with the useEffect HookForhåndsvisning
- Challenge: Fetch and Display Data with useEffectForhåndsvisning
- Optimizing Performance with the useMemo HookForhåndsvisning
- Challenge: Implement a Car List Filter with useMemoForhåndsvisning
- Sharing State Across Components with ContextForhåndsvisning
- Using Context in a Real-World ScenarioForhåndsvisning
- Challenge: Build a World of Astronomy App with ContextForhåndsvisning
- React Hooks and Context Wrap-UpForhåndsvisning
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.
- Setting Up Your React Development EnvironmentForhåndsvisning
- Choosing a Code Editor for React DevelopmentForhåndsvisning
- Organizing the Project Folder StructureForhåndsvisning
- Working with the Terminal in React DevelopmentForhåndsvisning
- Starting and Running a React ProjectForhåndsvisning
- React Project Setup Wrap-UpForhåndsvisning
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 WebsiteForhåndsvisning
- Installing React RouterForhåndsvisning
- Enabling Routing in a React AppForhåndsvisning
- Defining Routes for NavigationForhåndsvisning
- Recap: First Steps in React RouterForhåndsvisning
- Optimizing Imports with Lazy LoadingForhåndsvisning
- Implementing a Fallback ComponentForhåndsvisning
- Recap: Second Steps in React RouterForhåndsvisning
- Creating and Managing NavigationForhåndsvisning
- Exploring React Router's Complete LogicForhåndsvisning
- Recap of React Router FundamentalsForhåndsvisning
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.
- OverviewForhåndsvisning
- Understanding Query Strings in URLsForhåndsvisning
- Setting Up a React ComponentForhåndsvisning
- Inspecting Recent ChangesForhåndsvisning
- Working with Query ParametersForhåndsvisning
- Integrating useSearchParams HookForhåndsvisning
- Final AppForhåndsvisning
- React Router Course SummaryForhåndsvisning
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.
- What You Will Learn in This CourseForhåndsvisning
- Introduction to State ManagementForhåndsvisning
- Understanding Redux ToolkitForhåndsvisning
- Installing Redux ToolkitForhåndsvisning
- Creating Your First React Redux Toolkit ProjectForhåndsvisning
- Challenge: Installing Redux ToolkitForhåndsvisning
- Additional SoftwareForhåndsvisning
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 AwaitsForhåndsvisning
- Understanding the Project Code and File StructureForhåndsvisning
- Creating the Redux StoreForhåndsvisning
- Integrating the Redux Store Into the React AppForhåndsvisning
- Inspecting the Store in the React AppForhåndsvisning
- Understanding Actions and Action CreatorsForhåndsvisning
- Understanding the Role of ReducersForhåndsvisning
- Inspecting Actions and Reducers in ReduxForhåndsvisning
- Connecting Redux with React ComponentsForhåndsvisning
- Completing the AppForhåndsvisning
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.
- Overview of the ChallengeForhåndsvisning
- Challenge Guidelines and RulesForhåndsvisning
- Challenge: Setting Up the Redux StoreForhåndsvisning
- Challenge: Creating Redux ActionsForhåndsvisning
- Challenge: Implementing the ReducerForhåndsvisning
- Challenge: Connecting Redux with ReactForhåndsvisning
- Redux Toolkit SummaryForhåndsvisning
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 ProjectForhåndsvisning
- Understanding the Project File and Folder StructureForhåndsvisning
- Styling Approaches in Next.jsForhåndsvisning
- Adding the Global CSS FileForhåndsvisning
- Using Tailwind CSS for StylingForhåndsvisning
- Working with CSS ModulesForhåndsvisning
- Applying Styles ConditionallyForhåndsvisning
- Adding Custom Google FontsForhåndsvisning
- Challenge: Implementing a Custom Google FontForhåndsvisning
- Handling Images in Next.jsForhåndsvisning
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.jsForhåndsvisning
- Working with the Dashboard PageForhåndsvisning
- Challenge: Retrieving and Displaying DataForhåndsvisning
- Dynamic vs. Static Rendering in Next.jsForhåndsvisning
- Understanding LoadersForhåndsvisning
- Implementing Specific Part LoadersForhåndsvisning
- Challenge: Create a Skeleton LoaderForhåndsvisning
- Optimizing Loaders with Component GroupingForhåndsvisning
Discover how to implement modern web features such as pagination, CRUD operations, global search, form validation, and more.
- Building the Invoices PageForhåndsvisning
- Developing the Search FunctionalityForhåndsvisning
- Adding Pagination to a Next.js AppForhåndsvisning
- Using Server Actions in Next.jsForhåndsvisning
- Creating a New Item in the DatabaseForhåndsvisning
- Updating an Item in the DatabaseForhåndsvisning
- Deleting an Item in the DatabaseForhåndsvisning
- Challenge: Implementing Form ValidationForhåndsvisning
Authentication implementation in Next.js.
- Understanding AuthenticationForhåndsvisning
- Setting Up the Login RouteForhåndsvisning
- Using NextAuth.js for AuthenticationForhåndsvisning
- Configuring Authentication and Protecting RoutesForhåndsvisning
- Hashing Passwords and Managing CredentialsForhåndsvisning
- Implementing Sign-In FunctionalityForhåndsvisning
- Connecting the UI with Authentication LogicForhåndsvisning
- Implementing Logout FunctionalityForhåndsvisning
- Final Thoughts and Next StepsForhåndsvisning
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 ProjectForhåndsvisning
- Understanding React Native ComponentsForhåndsvisning
- Working with View and Text ComponentsForhåndsvisning
- Using the Image ComponentForhåndsvisning
- Styling in React NativeForhåndsvisning
- Challenge: Apply Styles to ComponentsForhåndsvisning
- Working with TouchableOpacity for User InteractionForhåndsvisning
- Implementing ScrollView for Scrolling ContentForhåndsvisning
- Rendering Lists in React NativeForhåndsvisning
- Challenge: Build an Interactive Resort ListForhåndsvisning
- Quiz: React Native BasicsForhåndsvisning
Learn efficient management of dynamic states, props, navigation, and hooks to create polished React Native applications.
- Managing State in React NativeForhåndsvisning
- Using Props for Component CustomizationForhåndsvisning
- Challenge: Mastering Props and StateForhåndsvisning
- Navigation in React NativeForhåndsvisning
- Implementing Stack NavigationForhåndsvisning
- Implementing Tab NavigationForhåndsvisning
- Using React Hooks in React NativeForhåndsvisning
- Quiz: React Native State, Props, and NavigationForhåndsvisning
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 TogglesForhåndsvisning
- Managing Loading States with ActivityIndicatorForhåndsvisning
- Working with the Modal ComponentForhåndsvisning
- Handling User Input with TextInputForhåndsvisning
- Challenge: Dark/Light Mode Toggler with Activity IndicatorForhåndsvisning
- Quiz: Advanced React Native ComponentsForhåndsvisning
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
Det viktigste er å lære og ikke gi opp
Materialet er bra, det er mye å lære, alt for å bli bedre, og det viktigste er å lære det du ønsker....
Matteo Comune
Takket være dem lærer jeg mye…
Takket være dem lærer jeg mye raskere fordi de hjelper deg med å forstå alt fra grunnen av. Det er den beste nettsiden for folk uten IT-bakgrunn...
Yuliana Cadavid
Flott kurs for nybegynnere
Flott kurs for nybegynnere, de tester kunnskapen din i hver leksjon....
Elpunzon
Jeg nyter min Codefinity-opplevelse…
Jeg nyter min Codefinity-opplevelse med å lære Python. Den selvstyrte læringsmåten er flott fordi jeg kan tilpasse den til timeplanen min...
Alexandru Alexandru
Det er hyggelig å lære fra Codefinity
Det er hyggelig å lære fra Codefinity. Det er enkelt og har gode eksempler på det jeg lærte her...
jacob Templet
Easy to follow along with and provides…
Lett å følge med på og gir utfordring i hverdagen min. Utfordringen får meg til å ville lære dag etter dag...
Elan
Codefinity er et omfattende læringsverktøy…
Codefinity er et omfattende læringsverktøy som hjelper deg med å utvikle ferdighetene dine som programvareingeniør eller datavitenskapsmann. Øvelsene er morsomme og en god måte å skjerpe ferdighetene dine på...
Thibault
Første gang jeg lærer å programmere
Første gang jeg lærer å programmere og lykkes med det takket være Codefinity – Takk!...
Adrien Morel
Godt designet for totale nybegynnere
Godt designet for totale nybegynnere, med inkrementell fremgang som gir meg selvtillit....
_Gracy
det er rett og slett perfekt forklart.
Det er rett og slett perfekt forklart! Så langt har jeg ikke opplevd noen vanskeligheter fordi alt er så godt organisert....
Ruslan Kravchuk
Det viktigste er å lære og ikke gi opp
Materialet er bra, det er mye å lære, alt for å bli bedre, og det viktigste er å lære det du ønsker....
Matteo Comune
Takket være dem lærer jeg mye…
Takket være dem lærer jeg mye raskere fordi de hjelper deg med å forstå alt fra grunnen av. Det er den beste nettsiden for folk uten IT-bakgrunn...
Yuliana Cadavid
Flott kurs for nybegynnere
Flott kurs for nybegynnere, de tester kunnskapen din i hver leksjon....
Elpunzon
Jeg nyter min Codefinity-opplevelse…
Jeg nyter min Codefinity-opplevelse med å lære Python. Den selvstyrte læringsmåten er flott fordi jeg kan tilpasse den til timeplanen min...
Alexandru Alexandru
Det er hyggelig å lære fra Codefinity
Det er hyggelig å lære fra Codefinity. Det er enkelt og har gode eksempler på det jeg lærte her...
jacob Templet
Easy to follow along with and provides…
Lett å følge med på og gir utfordring i hverdagen min. Utfordringen får meg til å ville lære dag etter dag...
Elan
Codefinity er et omfattende læringsverktøy…
Codefinity er et omfattende læringsverktøy som hjelper deg med å utvikle ferdighetene dine som programvareingeniør eller datavitenskapsmann. Øvelsene er morsomme og en god måte å skjerpe ferdighetene dine på...
Thibault
Første gang jeg lærer å programmere
Første gang jeg lærer å programmere og lykkes med det takket være Codefinity – Takk!...
Adrien Morel
Godt designet for totale nybegynnere
Godt designet for totale nybegynnere, med inkrementell fremgang som gir meg selvtillit....
_Gracy
det er rett og slett perfekt forklart.
Det er rett og slett perfekt forklart! Så langt har jeg ikke opplevd noen vanskeligheter fordi alt er så godt organisert....
Data Engineer
Sertifikat for fullføring
Vis frem dine nyervervede ferdigheter. Du har fortjent det
Discover more
Learning tracks
Kun for Ultimate
1 Kurs
1 Prosjekt
0 Task
Kun for Ultimate
7 Kurs
345 Oppgaver
Kun for Ultimate
5 Kurs
146 Oppgaver
Kun for Ultimate
4 Kurs
115 Oppgaver
Kun for Ultimate
6 Kurs
101 Oppgaver
Kun for Ultimate
6 Kurs
168 Oppgaver
Kun for Ultimate
5 Kurs
135 Oppgaver
Kun for Ultimate
2 Kurs
1 Prosjekt
57 Oppgaver
Kun for Ultimate
7 Kurs
376 Oppgaver
Kun for Ultimate
4 Kurs
143 Oppgaver
Kun for Ultimate
5 Kurs
180 Oppgaver
Kun for Ultimate
5 Kurs
165 Oppgaver
Kun for Ultimate
6 Kurs
308 Oppgaver
Kun for Ultimate
6 Kurs
252 Oppgaver
Kun for Ultimate
8 Kurs
2 Prosjekter
176 Oppgaver
Kun for Ultimate
2 Kurs
80 Oppgaver
Kun for Ultimate
7 Kurs
293 Oppgaver
Kun for Ultimate
1 Prosjekt
0 Task
Kun for Ultimate
2 Kurs
21 Oppgaver
Kun for Ultimate
5 Kurs
111 Oppgaver
Kun for Ultimate
2 Kurs
0 Task
Kun for Ultimate
3 Kurs
39 Oppgaver
Kun for Ultimate
13 Kurs
555 Oppgaver
Kun for Ultimate
13 Kurs
555 Oppgaver
Kun for Ultimate
1 Kurs
0 Task
Kun for Ultimate
0 Task
Kun for Ultimate
5 Kurs
139 Oppgaver
Kun for Ultimate
3 Kurs
71 Oppgaver
Kun for Ultimate
7 Kurs
282 Oppgaver
Kun for Ultimate
5 Kurs
239 Oppgaver
Kun for Ultimate
4 Kurs
125 Oppgaver
Kun for Ultimate
2 Kurs
33 Oppgaver
Kun for Ultimate
3 Kurs
119 Oppgaver
Kun for Ultimate
1 Kurs
15 Oppgaver
Kun for Ultimate
3 Kurs
75 Oppgaver
Kun for Ultimate
3 Kurs
31 Oppgaver
Kun for Ultimate
2 Kurs
151 Oppgaver
Kun for Ultimate
3 Kurs
56 Oppgaver
Kun for Ultimate
2 Kurs
1 Prosjekt
38 Oppgaver
Kun for Ultimate
3 Kurs
36 Oppgaver
Kun for Ultimate
2 Kurs
1 Prosjekt
38 Oppgaver
Kun for Ultimate
5 Kurs
134 Oppgaver
Learning tracks
spor
TEST TRACK 12
Nybegynner
4.0
(7146)
spor
Full Stack Web Development
Nybegynner
4.5
(58)
spor
Mastering Data Visualization
Middelsnivå
4.6
(7)
spor
SQL from Zero to Hero
Nybegynner
4.7
(93)
spor
С++ Essentials
Nybegynner
4.4
(17)
spor
Python from Zero to Hero
Nybegynner
4.7
(284)
spor
Supervised Machine Learning
Middelsnivå
4.9
(7)
spor
Python Beyond Intermediate
Nybegynner
5.0
(1)
spor
Java Essentials
Nybegynner
4.3
(9)
spor
Game Development with Unity
Nybegynner
4.6
(7)
spor
Become a Django Developer
Avansert
4.4
(27)
spor
Flask for Dummies
Middelsnivå
4.5
(31)
spor
Frontend Development Foundations
Nybegynner
4.6
(52)
spor
Web Developer from Zero to Hero
Nybegynner
4.6
(56)
spor
Preparation for Data Science
Middelsnivå
4.5
(11)
spor
Deep Learning Odyssey
Avansert
5.0
(3)
spor
Web Development with C#
Nybegynner
4.8
(98)
spor
TEST E2E TRACK BEGINNER
Nybegynner
spor
Test Track
Begginer
4.7
(3)
spor
Skilled Python BackEnd Developer
Avansert
4.7
(261)
spor
Test Recalculate
Nybegynner
spor
Excel Essentials
Nybegynner
4.5
(33)
spor
Full-Stack .NET Developer Journey
Middelsnivå
4.8
(129)
spor
Full-Stack .NET Developer Journey
Middelsnivå
4.8
(129)
spor
Test track with rating
Avansert
4.0
(4)
spor
TEST TEST TRACK
Nybegynner
spor
Data Analyst Foundation
Nybegynner
4.7
(111)
spor
C++ Mastery
Avansert
spor
Java Web
Avansert
4.5
(30)
spor
Become a QA Engineer
Nybegynner
4.5
(43)
spor
Video Production with Adobe
Nybegynner
spor
Digital Marketing Essentials
Nybegynner
spor
UI/UX Design Tools
Nybegynner
spor
Test image upload track
Nybegynner
spor
Essential Office Skills
Nybegynner
4.6
(24)
spor
GitHub from Zero to Hero
Nybegynner
spor
No-Code Website Development
Nybegynner
spor
C Programming & Low-Level Development
Nybegynner
spor
testes
Nybegynner
4.7
(3)
spor
Test translation track
Middelsnivå
spor
Test CMS Track
Nybegynner
4.7
(3)
spor
Python for Data Analysis
Middelsnivå
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