

Incerto da dove
iniziare?
Track
Certificato
Diventa uno Sviluppatore React
4.7+
★★★★★
★★★★★
67 recensioni
Intermediate
Diventa un esperto nella creazione di interfacce utente dinamiche e interattive per applicazioni web come sviluppatore React qualificato. Se hai una buona comprensione di JavaScript, concentrarti sul padroneggiare React è una scelta saggia. 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
- 142 chapters
- 22 hours
- 98 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.
- Setting Up Your React Development EnvironmentAnteprima
- Choosing a Code Editor for React DevelopmentAnteprima
- Organizing the Project Folder StructureAnteprima
- Working with the Terminal in React DevelopmentAnteprima
- Starting and Running a React Project with ViteAnteprima
- React Project Setup Wrap-UpAnteprima
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
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
7 Corsi
293 Compiti
Solo per Ultimate
6 Corsi
196 Compiti
Solo per Ultimate
4 Corsi
115 Compiti
Solo per Ultimate
6 Corsi
101 Compiti
Solo per Ultimate
4 Corsi
143 Compiti
Solo per Ultimate
3 Corsi
38 Compiti
Solo per Ultimate
7 Corsi
376 Compiti
Solo per Ultimate
2 Corsi
1 Progetto
57 Compiti
Solo per Ultimate
7 Corsi
346 Compiti
Solo per Ultimate
6 Corsi
309 Compiti
Solo per Ultimate
5 Corsi
146 Compiti
Solo per Ultimate
5 Corsi
135 Compiti
Solo per Ultimate
3 Corsi
71 Compiti
Solo per Ultimate
7 Corsi
280 Compiti
Solo per Ultimate
5 Corsi
239 Compiti
Solo per Ultimate
4 Corsi
125 Compiti
Solo per Ultimate
3 Corsi
119 Compiti
Solo per Ultimate
3 Corsi
75 Compiti
Solo per Ultimate
4 Corsi
159 Compiti
Solo per Ultimate
4 Corsi
154 Compiti
Learning tracks
traccia
Sviluppo Web con C#
Principiante
4.8
(2435)
traccia
Python da Zero a Eroe
Principiante
4.7
(8871)
traccia
SQL da Zero a Eroe
Principiante
4.7
(2668)
traccia
Fondamenti di C++
Principiante
4.4
(499)
traccia
Sviluppo di Giochi con Unity
Principiante
4.7
(80)
traccia
Fondamenti di Excel
Principiante
4.7
(333)
traccia
Fondamenti di Java
Principiante
4.7
(203)
traccia
Python Oltre l'Intermedio
Principiante
4.7
(71)
traccia
Sviluppo Web Full Stack
Principiante
4.7
(867)
traccia
Fondamenti Dello Sviluppo Frontend
Principiante
4.7
(839)
traccia
Padroneggiare la Visualizzazione dei Dati
Intermedio
4.7
(577)
traccia
Apprendimento Supervisionato delle Macchine
Intermedio
4.6
(129)
traccia
Padronanza di C++
Avanzato
4.8
(16)
traccia
Java Web
Avanzato
4.7
(2937)
traccia
Diventa un Ingegnere QA
Principiante
4.7
(730)
traccia
Produzione Video con Adobe
Principiante
5.0
(5)
traccia
Strumenti di Design UI/UX
Principiante
4.8
(5)
traccia
Competenze Essenziali per l'Ufficio
Principiante
4.8
(269)
traccia
Digital Marketing Essentials
Principiante
5.0
(3)
traccia
Complete Social Media Management
Principiante
5.0
(1)
Become a 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