

Osäker på var
börja?
Track
Certifikat
Become a React Developer
4.6+
★★★★★
★★★★★
65 omdömen
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. Visa 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?Förhandsgranska
- Comparing SPAs and MPAs in Web DevelopmentFörhandsgranska
- How React Works with the Virtual DOMFörhandsgranska
- Introducing JSX for Writing HTML in JavaScriptFörhandsgranska
- Building Complex UI with JSXFörhandsgranska
- Rendering Elements in ReactFörhandsgranska
- Challenge: Render an Element in ReactFörhandsgranska
- Understanding React ComponentsFörhandsgranska
- Passing Data with Props in ReactFörhandsgranska
- Challenge: Create Functional ComponentsFörhandsgranska
- Conditional Rendering in ReactFörhandsgranska
- Challenge: Implement Conditional Rendering – Chat NotificationFörhandsgranska
- Challenge: Implement Conditional Rendering – Bank AlertFörhandsgranska
- Rendering Collections of Data in ReactFörhandsgranska
- Challenge: Display Data Collections in ReactFörhandsgranska
- React Fundamentals Wrap-UpFörhandsgranska
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 ReactFörhandsgranska
- Using Inline Styles in ReactFörhandsgranska
- Applying Inline Styles in PracticeFörhandsgranska
- Challenge: Use Inline Styles in a React ComponentFörhandsgranska
- Styling React Components with External CSSFörhandsgranska
- Applying External CSS in PracticeFörhandsgranska
- Challenge: Apply External CSS to a React AppFörhandsgranska
- Using CSS Modules for Scoped Styling in ReactFörhandsgranska
- Organizing File and Folder Structures for StylesFörhandsgranska
- Challenge: Use CSS Modules in ReactFörhandsgranska
- Styling Techniques in React Wrap-UpFörhandsgranska
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 ContextFörhandsgranska
- Managing State with the useState HookFörhandsgranska
- Challenge: Toggle Visibility with useStateFörhandsgranska
- Working with References Using the useRef HookFörhandsgranska
- Challenge: Build a Controlled Form ComponentFörhandsgranska
- Handling Side Effects with the useEffect HookFörhandsgranska
- Challenge: Fetch and Display Data with useEffectFörhandsgranska
- Optimizing Performance with the useMemo HookFörhandsgranska
- Challenge: Implement a Car List Filter with useMemoFörhandsgranska
- Sharing State Across Components with ContextFörhandsgranska
- Using Context in a Real-World ScenarioFörhandsgranska
- Challenge: Build a World of Astronomy App with ContextFörhandsgranska
- React Hooks and Context Wrap-UpFörhandsgranska
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 EnvironmentFörhandsgranska
- Choosing a Code Editor for React DevelopmentFörhandsgranska
- Organizing the Project Folder StructureFörhandsgranska
- Working with the Terminal in React DevelopmentFörhandsgranska
- Starting and Running a React ProjectFörhandsgranska
- React Project Setup Wrap-UpFörhandsgranska
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 WebsiteFörhandsgranska
- Installing React RouterFörhandsgranska
- Enabling Routing in a React AppFörhandsgranska
- Defining Routes for NavigationFörhandsgranska
- Recap: First Steps in React RouterFörhandsgranska
- Optimizing Imports with Lazy LoadingFörhandsgranska
- Implementing a Fallback ComponentFörhandsgranska
- Recap: Second Steps in React RouterFörhandsgranska
- Creating and Managing NavigationFörhandsgranska
- Exploring React Router's Complete LogicFörhandsgranska
- Recap of React Router FundamentalsFörhandsgranska
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.
- OverviewFörhandsgranska
- Understanding Query Strings in URLsFörhandsgranska
- Setting Up a React ComponentFörhandsgranska
- Inspecting Recent ChangesFörhandsgranska
- Working with Query ParametersFörhandsgranska
- Integrating useSearchParams HookFörhandsgranska
- Final AppFörhandsgranska
- React Router Course SummaryFörhandsgranska
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 CourseFörhandsgranska
- Introduction to State ManagementFörhandsgranska
- Understanding Redux ToolkitFörhandsgranska
- Installing Redux ToolkitFörhandsgranska
- Creating Your First React Redux Toolkit ProjectFörhandsgranska
- Challenge: Installing Redux ToolkitFörhandsgranska
- Additional SoftwareFörhandsgranska
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 AwaitsFörhandsgranska
- Understanding the Project Code and File StructureFörhandsgranska
- Creating the Redux StoreFörhandsgranska
- Integrating the Redux Store Into the React AppFörhandsgranska
- Inspecting the Store in the React AppFörhandsgranska
- Understanding Actions and Action CreatorsFörhandsgranska
- Understanding the Role of ReducersFörhandsgranska
- Inspecting Actions and Reducers in ReduxFörhandsgranska
- Connecting Redux with React ComponentsFörhandsgranska
- Completing the AppFörhandsgranska
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 ChallengeFörhandsgranska
- Challenge Guidelines and RulesFörhandsgranska
- Challenge: Setting Up the Redux StoreFörhandsgranska
- Challenge: Creating Redux ActionsFörhandsgranska
- Challenge: Implementing the ReducerFörhandsgranska
- Challenge: Connecting Redux with ReactFörhandsgranska
- Redux Toolkit SummaryFörhandsgranska
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 ProjectFörhandsgranska
- Understanding the Project File and Folder StructureFörhandsgranska
- Styling Approaches in Next.jsFörhandsgranska
- Adding the Global CSS FileFörhandsgranska
- Using Tailwind CSS for StylingFörhandsgranska
- Working with CSS ModulesFörhandsgranska
- Applying Styles ConditionallyFörhandsgranska
- Adding Custom Google FontsFörhandsgranska
- Challenge: Implementing a Custom Google FontFörhandsgranska
- Handling Images in Next.jsFörhandsgranska
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.jsFörhandsgranska
- Working with the Dashboard PageFörhandsgranska
- Challenge: Retrieving and Displaying DataFörhandsgranska
- Dynamic vs. Static Rendering in Next.jsFörhandsgranska
- Understanding LoadersFörhandsgranska
- Implementing Specific Part LoadersFörhandsgranska
- Challenge: Create a Skeleton LoaderFörhandsgranska
- Optimizing Loaders with Component GroupingFörhandsgranska
Discover how to implement modern web features such as pagination, CRUD operations, global search, form validation, and more.
- Building the Invoices PageFörhandsgranska
- Developing the Search FunctionalityFörhandsgranska
- Adding Pagination to a Next.js AppFörhandsgranska
- Using Server Actions in Next.jsFörhandsgranska
- Creating a New Item in the DatabaseFörhandsgranska
- Updating an Item in the DatabaseFörhandsgranska
- Deleting an Item in the DatabaseFörhandsgranska
- Challenge: Implementing Form ValidationFörhandsgranska
Authentication implementation in Next.js.
- Understanding AuthenticationFörhandsgranska
- Setting Up the Login RouteFörhandsgranska
- Using NextAuth.js for AuthenticationFörhandsgranska
- Configuring Authentication and Protecting RoutesFörhandsgranska
- Hashing Passwords and Managing CredentialsFörhandsgranska
- Implementing Sign-In FunctionalityFörhandsgranska
- Connecting the UI with Authentication LogicFörhandsgranska
- Implementing Logout FunctionalityFörhandsgranska
- Final Thoughts and Next StepsFörhandsgranska
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 ProjectFörhandsgranska
- Understanding React Native ComponentsFörhandsgranska
- Working with View and Text ComponentsFörhandsgranska
- Using the Image ComponentFörhandsgranska
- Styling in React NativeFörhandsgranska
- Challenge: Apply Styles to ComponentsFörhandsgranska
- Working with TouchableOpacity for User InteractionFörhandsgranska
- Implementing ScrollView for Scrolling ContentFörhandsgranska
- Rendering Lists in React NativeFörhandsgranska
- Challenge: Build an Interactive Resort ListFörhandsgranska
- Quiz: React Native BasicsFörhandsgranska
Learn efficient management of dynamic states, props, navigation, and hooks to create polished React Native applications.
- Managing State in React NativeFörhandsgranska
- Using Props for Component CustomizationFörhandsgranska
- Challenge: Mastering Props and StateFörhandsgranska
- Navigation in React NativeFörhandsgranska
- Implementing Stack NavigationFörhandsgranska
- Implementing Tab NavigationFörhandsgranska
- Using React Hooks in React NativeFörhandsgranska
- Quiz: React Native State, Props, and NavigationFörhandsgranska
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 TogglesFörhandsgranska
- Managing Loading States with ActivityIndicatorFörhandsgranska
- Working with the Modal ComponentFörhandsgranska
- Handling User Input with TextInputFörhandsgranska
- Challenge: Dark/Light Mode Toggler with Activity IndicatorFörhandsgranska
- Quiz: Advanced React Native ComponentsFörhandsgranska
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 viktigaste är att lära sig och inte ge upp
Materialet är bra, det finns mycket att lära, allt för att bli bättre och det viktigaste är att lära sig det man vill....
Matteo Comune
Tack vare dem lär jag mig mycket…
Tack vare dem lär jag mig mycket snabbare eftersom de hjälper dig att förstå allt från grunden. Det är den bästa webbplatsen som hjälper personer utan IT-bakgrund...
Yuliana Cadavid
Utmärkt kurs för nybörjare
Utmärkt kurs för nybörjare, de testar dina kunskaper i varje lektion...
Elpunzon
Jag njuter av min Codefinity-upplevelse…
Jag njuter av min Codefinity-upplevelse med att lära mig Python. Det självstyrda lärsättet är fantastiskt eftersom jag kan anpassa det efter mitt schema...
Alexandru Alexandru
Det är trevligt att lära sig från Codefinity
Det är trevligt att lära sig från Codefinity. Det är enkelt och har bra exempel på vad jag lärt mig här...
jacob Templet
Easy to follow along with and provides…
Lätt att följa med i och ger utmaningar i min vardag. Utmaningen får mig att vilja lära mig dag efter dag...
Elan
Codefinity är ett heltäckande lärverktyg…
Codefinity är ett heltäckande lärverktyg som hjälper dig att utveckla dina färdigheter som mjukvaruingenjör eller datavetare. Övningarna är roliga och ett bra sätt att skärpa dina kunskaper...
Thibault
Första gången jag lär mig att koda
Första gången jag lär mig att koda och lyckas med Codefinity - tack...
Adrien Morel
Väl utformad för totala nybörjare
Väl utformad för totala nybörjare, med stegvis utveckling som får mig att känna mig trygg....
_Gracy
det är helt enkelt perfekt förklarat
det är helt enkelt perfekt förklarat! Hittills har jag inte upplevt några svårigheter eftersom allt är så välorganiserat...
Ruslan Kravchuk
Det viktigaste är att lära sig och inte ge upp
Materialet är bra, det finns mycket att lära, allt för att bli bättre och det viktigaste är att lära sig det man vill....
Matteo Comune
Tack vare dem lär jag mig mycket…
Tack vare dem lär jag mig mycket snabbare eftersom de hjälper dig att förstå allt från grunden. Det är den bästa webbplatsen som hjälper personer utan IT-bakgrund...
Yuliana Cadavid
Utmärkt kurs för nybörjare
Utmärkt kurs för nybörjare, de testar dina kunskaper i varje lektion...
Elpunzon
Jag njuter av min Codefinity-upplevelse…
Jag njuter av min Codefinity-upplevelse med att lära mig Python. Det självstyrda lärsättet är fantastiskt eftersom jag kan anpassa det efter mitt schema...
Alexandru Alexandru
Det är trevligt att lära sig från Codefinity
Det är trevligt att lära sig från Codefinity. Det är enkelt och har bra exempel på vad jag lärt mig här...
jacob Templet
Easy to follow along with and provides…
Lätt att följa med i och ger utmaningar i min vardag. Utmaningen får mig att vilja lära mig dag efter dag...
Elan
Codefinity är ett heltäckande lärverktyg…
Codefinity är ett heltäckande lärverktyg som hjälper dig att utveckla dina färdigheter som mjukvaruingenjör eller datavetare. Övningarna är roliga och ett bra sätt att skärpa dina kunskaper...
Thibault
Första gången jag lär mig att koda
Första gången jag lär mig att koda och lyckas med Codefinity - tack...
Adrien Morel
Väl utformad för totala nybörjare
Väl utformad för totala nybörjare, med stegvis utveckling som får mig att känna mig trygg....
_Gracy
det är helt enkelt perfekt förklarat
det är helt enkelt perfekt förklarat! Hittills har jag inte upplevt några svårigheter eftersom allt är så välorganiserat...
Data Engineer
Certifikat för slutförande
Visa dina nyförvärvade färdigheter. Du har förtjänat det
Discover more
Learning tracks
Endast för Ultimate
7 Kurser
293 Uppgifter
Endast för Ultimate
6 Kurser
168 Uppgifter
Endast för Ultimate
4 Kurser
115 Uppgifter
Endast för Ultimate
6 Kurser
101 Uppgifter
Endast för Ultimate
4 Kurser
143 Uppgifter
Endast för Ultimate
3 Kurser
39 Uppgifter
Endast för Ultimate
4 Kurser
96 Uppgifter
Endast för Ultimate
7 Kurser
376 Uppgifter
Endast för Ultimate
2 Kurser
1 Projekt
57 Uppgifter
Endast för Ultimate
7 Kurser
346 Uppgifter
Endast för Ultimate
6 Kurser
309 Uppgifter
Endast för Ultimate
5 Kurser
146 Uppgifter
Endast för Ultimate
5 Kurser
135 Uppgifter
Endast för Ultimate
3 Kurser
71 Uppgifter
Endast för Ultimate
6 Kurser
239 Uppgifter
Endast för Ultimate
5 Kurser
239 Uppgifter
Endast för Ultimate
4 Kurser
125 Uppgifter
Endast för Ultimate
3 Kurser
119 Uppgifter
Endast för Ultimate
3 Kurser
75 Uppgifter
Learning tracks
spår
Web Development with C#
Nybörjare
4.8
(2340)
spår
Python from Zero to Hero
Nybörjare
4.7
(8290)
spår
SQL from Zero to Hero
Nybörjare
4.7
(2577)
spår
С++ Essentials
Nybörjare
4.5
(471)
spår
Game Development with Unity
Nybörjare
4.7
(69)
spår
Excel Essentials
Nybörjare
4.7
(285)
spår
Data Analyst Foundation
Nybörjare
4.8
(2474)
spår
Java Essentials
Nybörjare
4.7
(189)
spår
Python Beyond Intermediate
Nybörjare
4.6
(62)
spår
Full Stack Web Development
Nybörjare
4.7
(844)
spår
Frontend Development Foundations
Nybörjare
4.7
(814)
spår
Mastering Data Visualization
Medelnivå
4.7
(555)
spår
Supervised Machine Learning
Medelnivå
4.6
(123)
spår
C++ Mastery
Avancerad
4.8
(16)
spår
Java Web
Avancerad
4.7
(1151)
spår
Become a QA Engineer
Nybörjare
4.7
(709)
spår
Video Production with Adobe
Nybörjare
5.0
(5)
spår
UI/UX Design Tools
Nybörjare
5.0
(4)
spår
Essential Office Skills
Nybörjare
4.8
(228)
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