

Epävarma mistä
alkaa?
Track
Todistus
Become a React Developer
4.9+
★★★★★
★★★★★
7 arvostelut
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. Näytä lisää
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?Esikatselu
- Comparing SPAs and MPAs in Web DevelopmentEsikatselu
- How React Works with the Virtual DOMEsikatselu
- Introducing JSX for Writing HTML in JavaScriptEsikatselu
- Building Complex UI with JSXEsikatselu
- Rendering Elements in ReactEsikatselu
- Challenge: Render an Element in ReactEsikatselu
- Understanding React ComponentsEsikatselu
- Passing Data with Props in ReactEsikatselu
- Challenge: Create Functional ComponentsEsikatselu
- Conditional Rendering in ReactEsikatselu
- Challenge: Implement Conditional Rendering – Chat NotificationEsikatselu
- Challenge: Implement Conditional Rendering – Bank AlertEsikatselu
- Rendering Collections of Data in ReactEsikatselu
- Challenge: Display Data Collections in ReactEsikatselu
- React Fundamentals Wrap-UpEsikatselu
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 ReactEsikatselu
- Using Inline Styles in ReactEsikatselu
- Applying Inline Styles in PracticeEsikatselu
- Challenge: Use Inline Styles in a React ComponentEsikatselu
- Styling React Components with External CSSEsikatselu
- Applying External CSS in PracticeEsikatselu
- Challenge: Apply External CSS to a React AppEsikatselu
- Using CSS Modules for Scoped Styling in ReactEsikatselu
- Organizing File and Folder Structures for StylesEsikatselu
- Challenge: Use CSS Modules in ReactEsikatselu
- Styling Techniques in React Wrap-UpEsikatselu
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 ContextEsikatselu
- Managing State with the useState HookEsikatselu
- Challenge: Toggle Visibility with useStateEsikatselu
- Working with References Using the useRef HookEsikatselu
- Challenge: Build a Controlled Form ComponentEsikatselu
- Handling Side Effects with the useEffect HookEsikatselu
- Challenge: Fetch and Display Data with useEffectEsikatselu
- Optimizing Performance with the useMemo HookEsikatselu
- Challenge: Implement a Car List Filter with useMemoEsikatselu
- Sharing State Across Components with ContextEsikatselu
- Using Context in a Real-World ScenarioEsikatselu
- Challenge: Build a World of Astronomy App with ContextEsikatselu
- React Hooks and Context Wrap-UpEsikatselu
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 WebsiteEsikatselu
- Installing React RouterEsikatselu
- Enabling Routing in a React AppEsikatselu
- Defining Routes for NavigationEsikatselu
- Recap: First Steps in React RouterEsikatselu
- Optimizing Imports with Lazy LoadingEsikatselu
- Implementing a Fallback ComponentEsikatselu
- Recap: Second Steps in React RouterEsikatselu
- Creating and Managing NavigationEsikatselu
- Exploring React Router's Complete LogicEsikatselu
- Recap of React Router FundamentalsEsikatselu
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 AwaitsEsikatselu
- Understanding the Project Code and File StructureEsikatselu
- Creating the Redux StoreEsikatselu
- Integrating the Redux Store Into the React AppEsikatselu
- Inspecting the Store in the React AppEsikatselu
- Understanding Actions and Action CreatorsEsikatselu
- Understanding the Role of ReducersEsikatselu
- Inspecting Actions and Reducers in ReduxEsikatselu
- Connecting Redux with React ComponentsEsikatselu
- Completing the AppEsikatselu
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 ProjectEsikatselu
- Understanding the Project File and Folder StructureEsikatselu
- Styling Approaches in Next.jsEsikatselu
- Adding the Global CSS FileEsikatselu
- Using Tailwind CSS for StylingEsikatselu
- Working with CSS ModulesEsikatselu
- Applying Styles ConditionallyEsikatselu
- Adding Custom Google FontsEsikatselu
- Challenge: Implementing a Custom Google FontEsikatselu
- Handling Images in Next.jsEsikatselu
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.jsEsikatselu
- Working with the Dashboard PageEsikatselu
- Challenge: Retrieving and Displaying DataEsikatselu
- Dynamic vs. Static Rendering in Next.jsEsikatselu
- Understanding LoadersEsikatselu
- Implementing Specific Part LoadersEsikatselu
- Challenge: Create a Skeleton LoaderEsikatselu
- Optimizing Loaders with Component GroupingEsikatselu
Discover how to implement modern web features such as pagination, CRUD operations, global search, form validation, and more.
- Building the Invoices PageEsikatselu
- Developing the Search FunctionalityEsikatselu
- Adding Pagination to a Next.js AppEsikatselu
- Using Server Actions in Next.jsEsikatselu
- Creating a New Item in the DatabaseEsikatselu
- Updating an Item in the DatabaseEsikatselu
- Deleting an Item in the DatabaseEsikatselu
- Challenge: Implementing Form ValidationEsikatselu
Authentication implementation in Next.js.
- Understanding AuthenticationEsikatselu
- Setting Up the Login RouteEsikatselu
- Using NextAuth.js for AuthenticationEsikatselu
- Configuring Authentication and Protecting RoutesEsikatselu
- Hashing Passwords and Managing CredentialsEsikatselu
- Implementing Sign-In FunctionalityEsikatselu
- Connecting the UI with Authentication LogicEsikatselu
- Implementing Logout FunctionalityEsikatselu
- Final Thoughts and Next StepsEsikatselu
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 ProjectEsikatselu
- Understanding React Native ComponentsEsikatselu
- Working with View and Text ComponentsEsikatselu
- Using the Image ComponentEsikatselu
- Styling in React NativeEsikatselu
- Challenge: Apply Styles to ComponentsEsikatselu
- Working with TouchableOpacity for User InteractionEsikatselu
- Implementing ScrollView for Scrolling ContentEsikatselu
- Rendering Lists in React NativeEsikatselu
- Challenge: Build an Interactive Resort ListEsikatselu
- Quiz: React Native BasicsEsikatselu
Learn efficient management of dynamic states, props, navigation, and hooks to create polished React Native applications.
- Managing State in React NativeEsikatselu
- Using Props for Component CustomizationEsikatselu
- Challenge: Mastering Props and StateEsikatselu
- Navigation in React NativeEsikatselu
- Implementing Stack NavigationEsikatselu
- Implementing Tab NavigationEsikatselu
- Using React Hooks in React NativeEsikatselu
- Quiz: React Native State, Props, and NavigationEsikatselu
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 TogglesEsikatselu
- Managing Loading States with ActivityIndicatorEsikatselu
- Working with the Modal ComponentEsikatselu
- Handling User Input with TextInputEsikatselu
- Challenge: Dark/Light Mode Toggler with Activity IndicatorEsikatselu
- Quiz: Advanced React Native ComponentsEsikatselu
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
Tärkeintä on oppia eikä luovuttaa
Materiaali on hyvä, opittavaa riittää – kaikki parantuaksesi ja tärkeintä on oppia sitä, mitä haluat....
Matteo Comune
Kiitos heille opin paljon…
Kiitos heille opin paljon nopeammin, koska he auttavat ymmärtämään kaiken alusta alkaen. Tämä on paras sivusto, joka tukee IT-taustattomia...
Yuliana Cadavid
Loistava kurssi aloittelijoille
Loistava kurssi aloittelijoille, joka testaa tietosi jokaisella oppitunnilla...
Elpunzon
Nautin Codefinity-kokemuksestani…
Nautin Codefinity-kokemuksesta Pythonin oppimiseen. Itseohjautuva oppimismenetelmä on erinomainen, sillä se mahtuu aikatauluuni...
Alexandru Alexandru
On mukava oppia Codefinityltä
On mukava oppia Codefinityltä. Se on helppoa ja tarjoaa hyviä esimerkkejä opitusta...
jacob Templet
Easy to follow along with and provides…
Helppo seurata ja se tuo haastetta arkeeni. Haaste saa minut haluamaan oppia päivä toisensa jälkeen...
Elan
Codefinity on kattava oppimisväline…
Codefinity on kattava oppimisväline, joka auttaa kehittämään taitojasi ohjelmistoinsinöörinä tai datatieteilijänä. Harjoitukset ovat hauskoja ja erinomainen tapa hioa taitojasi...
Thibault
Ensimmäistä kertaa koodaamista opiskellen
Ensimmäistä kertaa koodaamista opiskellen ja onnistuneesti Codefinityn avulla – kiitos...
Adrien Morel
Hyvin suunniteltu täysin aloittelijoille
Hyvin suunniteltu täysin aloittelijoille, sisältää asteittaista edistystä ja saa minut tuntemaan oloni varmaksi....
_Gracy
se on yksinkertaisesti täydellisesti selitetty
se on yksinkertaisesti täydellisesti selitetty! Tähän mennessä en ole kohdannut vaikeuksia, koska kaikki on niin hyvin järjestetty....
Ruslan Kravchuk
Tärkeintä on oppia eikä luovuttaa
Materiaali on hyvä, opittavaa riittää – kaikki parantuaksesi ja tärkeintä on oppia sitä, mitä haluat....
Matteo Comune
Kiitos heille opin paljon…
Kiitos heille opin paljon nopeammin, koska he auttavat ymmärtämään kaiken alusta alkaen. Tämä on paras sivusto, joka tukee IT-taustattomia...
Yuliana Cadavid
Loistava kurssi aloittelijoille
Loistava kurssi aloittelijoille, joka testaa tietosi jokaisella oppitunnilla...
Elpunzon
Nautin Codefinity-kokemuksestani…
Nautin Codefinity-kokemuksesta Pythonin oppimiseen. Itseohjautuva oppimismenetelmä on erinomainen, sillä se mahtuu aikatauluuni...
Alexandru Alexandru
On mukava oppia Codefinityltä
On mukava oppia Codefinityltä. Se on helppoa ja tarjoaa hyviä esimerkkejä opitusta...
jacob Templet
Easy to follow along with and provides…
Helppo seurata ja se tuo haastetta arkeeni. Haaste saa minut haluamaan oppia päivä toisensa jälkeen...
Elan
Codefinity on kattava oppimisväline…
Codefinity on kattava oppimisväline, joka auttaa kehittämään taitojasi ohjelmistoinsinöörinä tai datatieteilijänä. Harjoitukset ovat hauskoja ja erinomainen tapa hioa taitojasi...
Thibault
Ensimmäistä kertaa koodaamista opiskellen
Ensimmäistä kertaa koodaamista opiskellen ja onnistuneesti Codefinityn avulla – kiitos...
Adrien Morel
Hyvin suunniteltu täysin aloittelijoille
Hyvin suunniteltu täysin aloittelijoille, sisältää asteittaista edistystä ja saa minut tuntemaan oloni varmaksi....
_Gracy
se on yksinkertaisesti täydellisesti selitetty
se on yksinkertaisesti täydellisesti selitetty! Tähän mennessä en ole kohdannut vaikeuksia, koska kaikki on niin hyvin järjestetty....
Data Engineer
Suoritustodistus
Näytä äskettäin hankitut taitosi. Olet ansainnut sen
Discover more
Learning tracks
Vain Ultimate
1 Kurssi
1 Projekti
0 Task
Vain Ultimate
7 Kurssit
345 Tehtävät
Vain Ultimate
5 Kurssit
146 Tehtävät
Vain Ultimate
4 Kurssit
115 Tehtävät
Vain Ultimate
6 Kurssit
101 Tehtävät
Vain Ultimate
6 Kurssit
168 Tehtävät
Vain Ultimate
5 Kurssit
135 Tehtävät
Vain Ultimate
2 Kurssit
1 Projekti
57 Tehtävät
Vain Ultimate
7 Kurssit
376 Tehtävät
Vain Ultimate
4 Kurssit
143 Tehtävät
Vain Ultimate
5 Kurssit
180 Tehtävät
Vain Ultimate
5 Kurssit
165 Tehtävät
Vain Ultimate
6 Kurssit
308 Tehtävät
Vain Ultimate
6 Kurssit
252 Tehtävät
Vain Ultimate
8 Kurssit
2 Projektit
176 Tehtävät
Vain Ultimate
2 Kurssit
80 Tehtävät
Vain Ultimate
7 Kurssit
293 Tehtävät
Vain Ultimate
1 Projekti
0 Task
Vain Ultimate
2 Kurssit
21 Tehtävät
Vain Ultimate
5 Kurssit
111 Tehtävät
Vain Ultimate
2 Kurssit
0 Task
Vain Ultimate
3 Kurssit
39 Tehtävät
Vain Ultimate
13 Kurssit
555 Tehtävät
Vain Ultimate
13 Kurssit
555 Tehtävät
Vain Ultimate
1 Kurssi
0 Task
Vain Ultimate
0 Task
Vain Ultimate
5 Kurssit
139 Tehtävät
Vain Ultimate
3 Kurssit
71 Tehtävät
Vain Ultimate
7 Kurssit
282 Tehtävät
Vain Ultimate
5 Kurssit
239 Tehtävät
Vain Ultimate
4 Kurssit
125 Tehtävät
Vain Ultimate
2 Kurssit
33 Tehtävät
Vain Ultimate
3 Kurssit
119 Tehtävät
Vain Ultimate
1 Kurssi
15 Tehtävät
Vain Ultimate
3 Kurssit
75 Tehtävät
Vain Ultimate
3 Kurssit
31 Tehtävät
Vain Ultimate
2 Kurssit
151 Tehtävät
Vain Ultimate
3 Kurssit
56 Tehtävät
Vain Ultimate
2 Kurssit
1 Projekti
38 Tehtävät
Vain Ultimate
3 Kurssit
36 Tehtävät
Vain Ultimate
2 Kurssit
1 Projekti
38 Tehtävät
Vain Ultimate
5 Kurssit
134 Tehtävät
Learning tracks
polku
TEST TRACK 12
Aloittelija
4.0
(7146)
polku
Full Stack Web Development
Aloittelija
4.5
(58)
polku
Mastering Data Visualization
Keskitaso
4.6
(7)
polku
SQL from Zero to Hero
Aloittelija
4.7
(93)
polku
С++ Essentials
Aloittelija
4.4
(17)
polku
Python from Zero to Hero
Aloittelija
4.7
(284)
polku
Supervised Machine Learning
Keskitaso
4.9
(7)
polku
Python Beyond Intermediate
Aloittelija
5.0
(1)
polku
Java Essentials
Aloittelija
4.3
(9)
polku
Game Development with Unity
Aloittelija
4.6
(7)
polku
Become a Django Developer
Edistynyt
4.4
(27)
polku
Flask for Dummies
Keskitaso
4.5
(31)
polku
Frontend Development Foundations
Aloittelija
4.6
(52)
polku
Web Developer from Zero to Hero
Aloittelija
4.6
(56)
polku
Preparation for Data Science
Keskitaso
4.5
(11)
polku
Deep Learning Odyssey
Edistynyt
5.0
(3)
polku
Web Development with C#
Aloittelija
4.8
(98)
polku
TEST E2E TRACK BEGINNER
Aloittelija
polku
Test Track
Begginer
4.7
(3)
polku
Skilled Python BackEnd Developer
Edistynyt
4.7
(261)
polku
Test Recalculate
Aloittelija
polku
Excel Essentials
Aloittelija
4.5
(33)
polku
Full-Stack .NET Developer Journey
Keskitaso
4.8
(129)
polku
Full-Stack .NET Developer Journey
Keskitaso
4.8
(129)
polku
Test track with rating
Edistynyt
4.0
(4)
polku
TEST TEST TRACK
Aloittelija
polku
Data Analyst Foundation
Aloittelija
4.7
(111)
polku
C++ Mastery
Edistynyt
polku
Java Web
Edistynyt
4.5
(30)
polku
Become a QA Engineer
Aloittelija
4.5
(43)
polku
Video Production with Adobe
Aloittelija
polku
Digital Marketing Essentials
Aloittelija
polku
UI/UX Design Tools
Aloittelija
polku
Test image upload track
Aloittelija
polku
Essential Office Skills
Aloittelija
4.6
(24)
polku
GitHub from Zero to Hero
Aloittelija
polku
No-Code Website Development
Aloittelija
polku
C Programming & Low-Level Development
Aloittelija
polku
testes
Aloittelija
4.7
(3)
polku
Test translation track
Keskitaso
polku
Test CMS Track
Aloittelija
4.7
(3)
polku
Python for Data Analysis
Keskitaso
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