CoursesAI WorkshopCompaniesPricingBlogNewsletter
  • Courses
  • AI Workshop
  • Companies
  • Pricing
  • Blog
  • Newsletter
Subscribe
  • Courses
  • Companies
  • Communities
  • Blog
  • Gift card
  • Newsletter
  • Help
  • Shop
  • ConfAiBot
  • Contact
  • Legal notice
  • General conditions
  • Privacy policy
  • Cookies policy

Course of React from 0 applying best practices

Standard
Isma NavarroJavier Ferrer

By Isma Navarro y Javier Ferrer – Frontend

Get introduced to React from scratch by creating your personal developer dashboard where you can check the metrics of your favorite repositories.

Go to course

💸 First lesson available without registration!

What will you learn in this course?

The objective of this course is to introduce you to the development of applications in React practically from scratch. To achieve this, we will develop an application called DevDash_ from which you can check the statistics of your favorite repositories.

After this course, you will know how to create React components, test components, client-side navigation, data modeling, hooks, custom hooks, forms, context API, UX improvements, and how to deploy your applications with Vercel and GitHub Pages using GitHub Actions.

Always from a practical, no-nonsense perspective, focusing on applying best practices.

You will also have our example repository and the DevDash_ repository as references.

Videos of the course

  • 🌠 Starting with React today: Vite vs SWC vs esbuild vs Snowpack vs Parcel vs CRA
  • 👨‍🚒 Why React stopped recommending CRA - Research team
  • 🤷‍♀️ Does it make sense NOT to use Next.js? What about Remix?

  • 👀 Define the DevDash_ prototype with Figma and the development strategy
  • 🧰 Set up the repos to create widgets
  • 💻 Implement your first React component: Widget List
  • 🖌️ Styling the widget with Sass and JSX

  • 🌍 Fetch data from an external API: Refactoring to make space
  • 👋 Fetch data from an external API: Applying SOLID
  • 🔗 Using hooks to manage your components' lifecycle: useState and useEffect

  • ✅ Unit test of component to validate behavior automatically
  • 👤 Model the contracts of your domain applying SOLID: Interfaces and types
  • 🪨 Making more solid tests. Object mothers and dependency injection
  • 🏗️ Refactor to a custom component

  • 🍼 Evolution of the lifecycle of React components: From classes to hooks
  • ♻️ Separating component logic. Refactor to custom hooks
  • 🫣 3+1 common mistakes when using Hooks in React

  • 🔀 Client-side navigation. Setting up react-router
  • 🌀 Reuse common layout components
  • 👋 Create the component to show the widget

  • 🔬 Custom renderer from Testing Library: Validate applications using React Contexts
  • 💥 Error handling of components: Exception management with ErrorBoundaries

  • 🧐 Find errors and optimize the performance of your React application with DevTools
  • ↕️ Improve UX during widget loading: Skeleton pattern to avoid layout shift

  • 🪄 Router top bar loader: Show loading progress while navigating between pages
  • 🧞 Lazy Loaded Atomic Components (LLAC): Optimize frontend requests
  • 🛠 Time to practice! Improvements for Top Bar Loader

  • 🪧 Form implementation: SyntheticEvents and TypeScript
  • 🪢 Domain modeling to save the form

  • ✅ Testing the form
  • ⚡ Implement form validations with TDD
  • 🛠 Time to practice! Adding more validations to the form

  • 🌀 Best practices for data management: Global React contexts avoiding coupling
  • 📖 Reading data from the context using local storage
  • 🪩 Synchronizing React Context and local storage: Reactivity and decoupling with DOM CustomEvents

  • 🌍 Acceptance test with Cypress for the widget creation form
  • ✅ Testing strategy: acceptance vs unit tests vs integration

  • 🫢 Hide your application's secrets
  • 🔺 Vercel
  • 🐙 GitHub pages with GitHub actions

  • 🦙 TypeScript SAVES you errors - Goodbye to PropTypes
  • 🚶‍♀️ Conclusion and next steps
Go to course

Related courses

Standard
Tailwind CSS: Architecture and Best Practices

🚤 Tailwind CSS: Architecture and Best Practices

Paco CastellóRafa Gómez

Learn how to structure your Tailwind CSS projects following best practices.

See course
Standard
Job offers

📄 Job offers

Javier FerrerRafa Gómez

Codely verified job offers

See course
Standard
Next.js: Open Graph Images

🖼️ Next.js: Open Graph Images

Javier FerrerRafa Gómez

Generate dynamic images in your Next.js projects for sharing on social media.

See course
See full catalogue

Pay according to your needs

lite (only monthly)

19 €
per month
  • Essential programming courses to build a solid foundation
Popular

standard

24,92 €
Discount vs monthly of 49 €
Annual payment of 299 €
per month
  • Main catalog to master writing maintainable, scalable, and testable code
  • Receive job offers verified by Codely
  • Company invoice
  • Accumulate renewal discounts

premium

41,58 €
Discount vs monthly of 89 €
Annual payment of 499 €
per month
  • Exclusive AI courses to keep you always up to date
  • Early access to new courses
  • Discount on workshops
  • Receive job offers verified by Codely
  • Company invoice
  • Accumulate renewal discounts

We won't increase the price while your subscription is active

SubscribeSign in