

Incerto da dove
iniziare?
Track
Certificato
Become a React Developer
4.9+
★★★★★
★★★★★
7 recensioni
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. Mostra di più
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?Anteprima
- Comparing SPAs and MPAs in Web DevelopmentAnteprima
- How React Works with the Virtual DOMAnteprima
- Introducing JSX for Writing HTML in JavaScriptAnteprima
- Building Complex UI with JSXAnteprima
- Rendering Elements in ReactAnteprima
- Challenge: Render an Element in ReactAnteprima
- Understanding React ComponentsAnteprima
- Passing Data with Props in ReactAnteprima
- Challenge: Create Functional ComponentsAnteprima
- Conditional Rendering in ReactAnteprima
- Challenge: Implement Conditional Rendering – Chat NotificationAnteprima
- Challenge: Implement Conditional Rendering – Bank AlertAnteprima
- Rendering Collections of Data in ReactAnteprima
- Challenge: Display Data Collections in ReactAnteprima
- React Fundamentals Wrap-UpAnteprima
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 ReactAnteprima
- Using Inline Styles in ReactAnteprima
- Applying Inline Styles in PracticeAnteprima
- Challenge: Use Inline Styles in a React ComponentAnteprima
- Styling React Components with External CSSAnteprima
- Applying External CSS in PracticeAnteprima
- Challenge: Apply External CSS to a React AppAnteprima
- Using CSS Modules for Scoped Styling in ReactAnteprima
- Organizing File and Folder Structures for StylesAnteprima
- Challenge: Use CSS Modules in ReactAnteprima
- Styling Techniques in React Wrap-UpAnteprima
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 ContextAnteprima
- Managing State with the useState HookAnteprima
- Challenge: Toggle Visibility with useStateAnteprima
- Working with References Using the useRef HookAnteprima
- Challenge: Build a Controlled Form ComponentAnteprima
- Handling Side Effects with the useEffect HookAnteprima
- Challenge: Fetch and Display Data with useEffectAnteprima
- Optimizing Performance with the useMemo HookAnteprima
- Challenge: Implement a Car List Filter with useMemoAnteprima
- Sharing State Across Components with ContextAnteprima
- Using Context in a Real-World ScenarioAnteprima
- Challenge: Build a World of Astronomy App with ContextAnteprima
- React Hooks and Context Wrap-UpAnteprima
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 WebsiteAnteprima
- Installing React RouterAnteprima
- Enabling Routing in a React AppAnteprima
- Defining Routes for NavigationAnteprima
- Recap: First Steps in React RouterAnteprima
- Optimizing Imports with Lazy LoadingAnteprima
- Implementing a Fallback ComponentAnteprima
- Recap: Second Steps in React RouterAnteprima
- Creating and Managing NavigationAnteprima
- Exploring React Router's Complete LogicAnteprima
- Recap of React Router FundamentalsAnteprima
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 AwaitsAnteprima
- Understanding the Project Code and File StructureAnteprima
- Creating the Redux StoreAnteprima
- Integrating the Redux Store Into the React AppAnteprima
- Inspecting the Store in the React AppAnteprima
- Understanding Actions and Action CreatorsAnteprima
- Understanding the Role of ReducersAnteprima
- Inspecting Actions and Reducers in ReduxAnteprima
- Connecting Redux with React ComponentsAnteprima
- Completing the AppAnteprima
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 ProjectAnteprima
- Understanding the Project File and Folder StructureAnteprima
- Styling Approaches in Next.jsAnteprima
- Adding the Global CSS FileAnteprima
- Using Tailwind CSS for StylingAnteprima
- Working with CSS ModulesAnteprima
- Applying Styles ConditionallyAnteprima
- Adding Custom Google FontsAnteprima
- Challenge: Implementing a Custom Google FontAnteprima
- Handling Images in Next.jsAnteprima
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.jsAnteprima
- Working with the Dashboard PageAnteprima
- Challenge: Retrieving and Displaying DataAnteprima
- Dynamic vs. Static Rendering in Next.jsAnteprima
- Understanding LoadersAnteprima
- Implementing Specific Part LoadersAnteprima
- Challenge: Create a Skeleton LoaderAnteprima
- Optimizing Loaders with Component GroupingAnteprima
Discover how to implement modern web features such as pagination, CRUD operations, global search, form validation, and more.
- Building the Invoices PageAnteprima
- Developing the Search FunctionalityAnteprima
- Adding Pagination to a Next.js AppAnteprima
- Using Server Actions in Next.jsAnteprima
- Creating a New Item in the DatabaseAnteprima
- Updating an Item in the DatabaseAnteprima
- Deleting an Item in the DatabaseAnteprima
- Challenge: Implementing Form ValidationAnteprima
Authentication implementation in Next.js.
- Understanding AuthenticationAnteprima
- Setting Up the Login RouteAnteprima
- Using NextAuth.js for AuthenticationAnteprima
- Configuring Authentication and Protecting RoutesAnteprima
- Hashing Passwords and Managing CredentialsAnteprima
- Implementing Sign-In FunctionalityAnteprima
- Connecting the UI with Authentication LogicAnteprima
- Implementing Logout FunctionalityAnteprima
- Final Thoughts and Next StepsAnteprima
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 ProjectAnteprima
- Understanding React Native ComponentsAnteprima
- Working with View and Text ComponentsAnteprima
- Using the Image ComponentAnteprima
- Styling in React NativeAnteprima
- Challenge: Apply Styles to ComponentsAnteprima
- Working with TouchableOpacity for User InteractionAnteprima
- Implementing ScrollView for Scrolling ContentAnteprima
- Rendering Lists in React NativeAnteprima
- Challenge: Build an Interactive Resort ListAnteprima
- Quiz: React Native BasicsAnteprima
Learn efficient management of dynamic states, props, navigation, and hooks to create polished React Native applications.
- Managing State in React NativeAnteprima
- Using Props for Component CustomizationAnteprima
- Challenge: Mastering Props and StateAnteprima
- Navigation in React NativeAnteprima
- Implementing Stack NavigationAnteprima
- Implementing Tab NavigationAnteprima
- Using React Hooks in React NativeAnteprima
- Quiz: React Native State, Props, and NavigationAnteprima
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 TogglesAnteprima
- Managing Loading States with ActivityIndicatorAnteprima
- Working with the Modal ComponentAnteprima
- Handling User Input with TextInputAnteprima
- Challenge: Dark/Light Mode Toggler with Activity IndicatorAnteprima
- Quiz: Advanced React Native ComponentsAnteprima
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
La cosa principale è imparare e non arrendersi
Il materiale è buono, c'è tanto da imparare, tutto per migliorarsi, e la cosa principale è imparare ciò che desideri....
Matteo Comune
Grazie a loro sto imparando molto…
Grazie a loro sto imparando molto più rapidamente perché ti aiutano a comprendere tutto da zero. È il miglior sito web per chi non ha background in IT...
Yuliana Cadavid
ottimo corso per principianti
ottimo corso per principianti, mettono alla prova le tue conoscenze in ogni lezione...
Elpunzon
Sto apprezzando la mia esperienza su Codefinity…
Sto apprezzando la mia esperienza di apprendimento di Python con Codefinity. Il metodo di studio autodidatta è fantastico perché posso adattarlo al mio orario...
Alexandru Alexandru
È piacevole imparare da Codefinity
È piacevole imparare da Codefinity. È facile e offre buoni esempi di quanto appreso qui...
jacob Templet
Easy to follow along with and provides…
Facile da seguire e offre una sfida nella mia vita quotidiana. La sfida mi motiva a imparare giorno dopo giorno...
Elan
Codefinity è uno strumento di apprendimento completo…
Codefinity è uno strumento di apprendimento completo che ti aiuta a sviluppare le tue competenze come ingegnere del software o data scientist. Gli esercizi sono divertenti e un ottimo modo per affinare le tue abilità...
Thibault
Prima volta che impari a programmare
La prima volta che ho imparato a programmare e ci sono riuscito con Codefinity - Grazie...
Adrien Morel
Ben progettato per principianti assoluti
Ben progettato per principianti assoluti, con un progresso incrementale che mi dà fiducia....
_Gracy
è semplicemente perfettamente spiegato
È semplicemente perfettamente spiegato! Finora non ho incontrato alcuna difficoltà perché tutto è così ben organizzato....
Ruslan Kravchuk
La cosa principale è imparare e non arrendersi
Il materiale è buono, c'è tanto da imparare, tutto per migliorarsi, e la cosa principale è imparare ciò che desideri....
Matteo Comune
Grazie a loro sto imparando molto…
Grazie a loro sto imparando molto più rapidamente perché ti aiutano a comprendere tutto da zero. È il miglior sito web per chi non ha background in IT...
Yuliana Cadavid
ottimo corso per principianti
ottimo corso per principianti, mettono alla prova le tue conoscenze in ogni lezione...
Elpunzon
Sto apprezzando la mia esperienza su Codefinity…
Sto apprezzando la mia esperienza di apprendimento di Python con Codefinity. Il metodo di studio autodidatta è fantastico perché posso adattarlo al mio orario...
Alexandru Alexandru
È piacevole imparare da Codefinity
È piacevole imparare da Codefinity. È facile e offre buoni esempi di quanto appreso qui...
jacob Templet
Easy to follow along with and provides…
Facile da seguire e offre una sfida nella mia vita quotidiana. La sfida mi motiva a imparare giorno dopo giorno...
Elan
Codefinity è uno strumento di apprendimento completo…
Codefinity è uno strumento di apprendimento completo che ti aiuta a sviluppare le tue competenze come ingegnere del software o data scientist. Gli esercizi sono divertenti e un ottimo modo per affinare le tue abilità...
Thibault
Prima volta che impari a programmare
La prima volta che ho imparato a programmare e ci sono riuscito con Codefinity - Grazie...
Adrien Morel
Ben progettato per principianti assoluti
Ben progettato per principianti assoluti, con un progresso incrementale che mi dà fiducia....
_Gracy
è semplicemente perfettamente spiegato
È semplicemente perfettamente spiegato! Finora non ho incontrato alcuna difficoltà perché tutto è così ben organizzato....
Data Engineer
Certificato di Completamento
Mostra le abilità che hai acquisite recentemente. Te lo sei guadagnato
Discover more
Learning tracks
Solo per Ultimate
1 Corso
1 Progetto
0 Task
Solo per Ultimate
7 Corsi
345 Compiti
Solo per Ultimate
5 Corsi
146 Compiti
Solo per Ultimate
4 Corsi
115 Compiti
Solo per Ultimate
6 Corsi
101 Compiti
Solo per Ultimate
6 Corsi
168 Compiti
Solo per Ultimate
5 Corsi
135 Compiti
Solo per Ultimate
2 Corsi
1 Progetto
57 Compiti
Solo per Ultimate
7 Corsi
376 Compiti
Solo per Ultimate
4 Corsi
143 Compiti
Solo per Ultimate
5 Corsi
180 Compiti
Solo per Ultimate
5 Corsi
165 Compiti
Solo per Ultimate
6 Corsi
308 Compiti
Solo per Ultimate
6 Corsi
252 Compiti
Solo per Ultimate
8 Corsi
2 Progetti
176 Compiti
Solo per Ultimate
2 Corsi
80 Compiti
Solo per Ultimate
7 Corsi
293 Compiti
Solo per Ultimate
1 Progetto
0 Task
Solo per Ultimate
2 Corsi
21 Compiti
Solo per Ultimate
5 Corsi
111 Compiti
Solo per Ultimate
2 Corsi
0 Task
Solo per Ultimate
3 Corsi
39 Compiti
Solo per Ultimate
13 Corsi
555 Compiti
Solo per Ultimate
13 Corsi
555 Compiti
Solo per Ultimate
1 Corso
0 Task
Solo per Ultimate
0 Task
Solo per Ultimate
5 Corsi
139 Compiti
Solo per Ultimate
3 Corsi
71 Compiti
Solo per Ultimate
7 Corsi
282 Compiti
Solo per Ultimate
5 Corsi
239 Compiti
Solo per Ultimate
4 Corsi
125 Compiti
Solo per Ultimate
2 Corsi
33 Compiti
Solo per Ultimate
3 Corsi
119 Compiti
Solo per Ultimate
1 Corso
15 Compiti
Solo per Ultimate
3 Corsi
75 Compiti
Solo per Ultimate
3 Corsi
31 Compiti
Solo per Ultimate
2 Corsi
151 Compiti
Solo per Ultimate
3 Corsi
56 Compiti
Solo per Ultimate
2 Corsi
1 Progetto
38 Compiti
Solo per Ultimate
3 Corsi
36 Compiti
Solo per Ultimate
2 Corsi
1 Progetto
38 Compiti
Solo per Ultimate
5 Corsi
134 Compiti
Learning tracks
traccia
TEST TRACK 12
Principiante
4.0
(7146)
traccia
Full Stack Web Development
Principiante
4.5
(58)
traccia
Mastering Data Visualization
Intermedio
4.6
(7)
traccia
SQL from Zero to Hero
Principiante
4.7
(93)
traccia
С++ Essentials
Principiante
4.4
(17)
traccia
Python from Zero to Hero
Principiante
4.7
(284)
traccia
Supervised Machine Learning
Intermedio
4.9
(7)
traccia
Python Beyond Intermediate
Principiante
5.0
(1)
traccia
Java Essentials
Principiante
4.3
(9)
traccia
Game Development with Unity
Principiante
4.6
(7)
traccia
Become a Django Developer
Avanzato
4.4
(27)
traccia
Flask for Dummies
Intermedio
4.5
(31)
traccia
Frontend Development Foundations
Principiante
4.6
(52)
traccia
Web Developer from Zero to Hero
Principiante
4.6
(56)
traccia
Preparation for Data Science
Intermedio
4.5
(11)
traccia
Deep Learning Odyssey
Avanzato
5.0
(3)
traccia
Web Development with C#
Principiante
4.8
(98)
traccia
TEST E2E TRACK BEGINNER
Principiante
traccia
Test Track
Begginer
4.7
(3)
traccia
Skilled Python BackEnd Developer
Avanzato
4.7
(261)
traccia
Test Recalculate
Principiante
traccia
Excel Essentials
Principiante
4.5
(33)
traccia
Full-Stack .NET Developer Journey
Intermedio
4.8
(129)
traccia
Full-Stack .NET Developer Journey
Intermedio
4.8
(129)
traccia
Test track with rating
Avanzato
4.0
(4)
traccia
TEST TEST TRACK
Principiante
traccia
Data Analyst Foundation
Principiante
4.7
(111)
traccia
C++ Mastery
Avanzato
traccia
Java Web
Avanzato
4.5
(30)
traccia
Become a QA Engineer
Principiante
4.5
(43)
traccia
Video Production with Adobe
Principiante
traccia
Digital Marketing Essentials
Principiante
traccia
UI/UX Design Tools
Principiante
traccia
Test image upload track
Principiante
traccia
Essential Office Skills
Principiante
4.6
(24)
traccia
GitHub from Zero to Hero
Principiante
traccia
No-Code Website Development
Principiante
traccia
C Programming & Low-Level Development
Principiante
traccia
testes
Principiante
4.7
(3)
traccia
Test translation track
Intermedio
traccia
Test CMS Track
Principiante
4.7
(3)
traccia
Python for Data Analysis
Intermedio
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