user100DaysOfCode
CommunityDevTermsResources|Login

Loading

Reactjs Roadmap

Join the 100 day Reactjs coding challenge. Master Reactjs with daily challenges, projects, and expert guidance.
Start coding today!

Day 1: Simple React App
Day 2: JSX Basics
Day 3: Functional Components
Day 4: Props
Day 5: State Basics
Day 6: Event Handling
Day 7: Conditional Rendering
Day 8: Lists and Keys
Day 9: Forms
Day 10: Lifting State Up
Day 11: Component Lifecycle
Day 12: React Fragments
Day 13: Styling in React
Day 14: React Router Basics
Day 15: Class Components
Day 16: Event Propagation
Day 17: Handling Forms
Day 18: React Hooks (useState)
Day 19: React Hooks (useEffect)
Day 20: Context API
Day 21: Higher-Order Components (HOC)
Day 22: Error Boundaries
Day 23: React Portals
Day 24: Optimizing Performance
Day 25: PropTypes
Day 26: Refs in React
Day 27: React Testing Library
Day 28: Axios and API Calls
Day 29: React and Forms Validation
Day 30: Local State vs Redux
Day 31: Redux Basics
Day 32: Redux Actions
Day 33: Redux Reducers
Day 34: Redux Store
Day 35: Connecting React and Redux
Day 36: Async Operations in Redux
Day 37: Immutable Data in Redux
Day 38: Redux DevTools
Day 39: Routing with React Router
Day 40: Code Splitting
Day 41: Higher-Order Components (HOC) Patterns
Day 42: Render Props
Day 43: React Hooks (useContext)
Day 44: Custom Hooks
Day 45: Error Handling in Redux
Day 46: GraphQL Basics
Day 47: Apollo Client in React
Day 48: React and D3 Integration
Day 49: React and WebSocket
Day 50: Progressive Web Apps (PWA)
Day 51: React and Firebase
Day 52: React and TypeScript
Day 53: React Hooks (useReducer)
Day 54: React Suspense and Lazy
Day 55: React Performance Optimization
Day 56: React Testing Library Advanced
Day 57: Storybook for React
Day 58: Jest Snapshot Testing
Day 59: CSS-in-JS Libraries
Day 60: Progressive Enhancement in React
Day 61: Web Accessibility (A11y)
Day 62: Server-Side Rendering (SSR)
Day 63: React and Redux Middleware
Day 64: React and Electron
Day 65: React and Webpack
Day 66: React Suspense with Concurrent Mode
Day 67: Internationalization (i18n) in React
Day 68: React and Material-UI
Day 69: Serverless Functions with React
Day 70: React and Headless CMS
Day 71: Micro Frontends
Day 72: State Management Patterns
Day 73: React Custom Renderer
Day 74: React Hooks Internals
Day 75: Full-Stack Development with React
Day 76: Real-Time Collaborative Editing
Day 77: React and WebAssembly (Wasm)
Day 78: React Performance Profiling
Day 79: React Router Navigation Guards
Day 80: Advanced Styling Techniques

Join the 100 day Reactjs coding challenge. Master Reactjs with daily challenges, projects, and expert guidance.
Start coding today!

Day 1 - Simple React App

Goals

  • Understand the basics of React and its core concepts
  • Create a simple React App

Tasks

1. Introduction to React

  • Learn what React is and why it's used
  • Understand the concept of component-based architecture
  • Learn about React's virtual DOM and its benefits

2. Set Up the Environment

  • Install Node.js: Node.JS Download and Installation
  • Install Create React App tool globally using the command npm install -g create-react-app

3. Create a Simple React App

  • Create a New React Application using the command npx create-react-app my-first-react-app
  • Start the Development Server using the command npm start
  • Modify the code such that it returns Hello World! as a response
  • View your React application by visiting the url http://localhost:3000

Day 2 - JSX Basics

Understand and use JSX to render elements

Day 3 - Functional Components

Create a functional component and render it

Day 4 - Props

Pass data to a component using props

Day 5 - State Basics

Manage and update component state

Day 6 - Event Handling

Handle events like button clicks in React

Day 7 - Conditional Rendering

Render components conditionally based on state

Day 8 - Lists and Keys

Render a list of items using the map function

Day 9 - Forms

Create a simple form and handle user input

Day 10 - Lifting State Up

Lift state to a common ancestor component

Day 11 - Component Lifecycle

This content is locked. Please login to view it

Day 12 - React Fragments

This content is locked. Please login to view it

Day 13 - Styling in React

This content is locked. Please login to view it

Day 14 - React Router Basics

This content is locked. Please login to view it

Day 15 - Class Components

This content is locked. Please login to view it

Day 16 - Event Propagation

This content is locked. Please login to view it

Day 17 - Handling Forms

This content is locked. Please login to view it

Day 18 - React Hooks (useState)

This content is locked. Please login to view it

Day 19 - React Hooks (useEffect)

This content is locked. Please login to view it

Day 20 - Context API

This content is locked. Please login to view it

Day 21 - Higher-Order Components (HOC)

This content is locked. Please login to view it

Day 22 - Error Boundaries

This content is locked. Please login to view it

Day 23 - React Portals

This content is locked. Please login to view it

Day 24 - Optimizing Performance

This content is locked. Please login to view it

Day 25 - PropTypes

This content is locked. Please login to view it

Day 26 - Refs in React

This content is locked. Please login to view it

Day 27 - React Testing Library

This content is locked. Please login to view it

Day 28 - Axios and API Calls

This content is locked. Please login to view it

Day 29 - React and Forms Validation

This content is locked. Please login to view it

Day 30 - Local State vs Redux

This content is locked. Please login to view it

Day 31 - Redux Basics

This content is locked. Please login to view it

Day 32 - Redux Actions

This content is locked. Please login to view it

Day 33 - Redux Reducers

This content is locked. Please login to view it

Day 34 - Redux Store

This content is locked. Please login to view it

Day 35 - Connecting React and Redux

This content is locked. Please login to view it

Day 36 - Async Operations in Redux

This content is locked. Please login to view it

Day 37 - Immutable Data in Redux

This content is locked. Please login to view it

Day 38 - Redux DevTools

This content is locked. Please login to view it

Day 39 - Routing with React Router

This content is locked. Please login to view it

Day 40 - Code Splitting

This content is locked. Please login to view it

Day 41 - Higher-Order Components (HOC) Patterns

This content is locked. Please login to view it

Day 42 - Render Props

This content is locked. Please login to view it

Day 43 - React Hooks (useContext)

This content is locked. Please login to view it

Day 44 - Custom Hooks

This content is locked. Please login to view it

Day 45 - Error Handling in Redux

This content is locked. Please login to view it

Day 46 - GraphQL Basics

This content is locked. Please login to view it

Day 47 - Apollo Client in React

This content is locked. Please login to view it

Day 48 - React and D3 Integration

This content is locked. Please login to view it

Day 49 - React and WebSocket

This content is locked. Please login to view it

Day 50 - Progressive Web Apps (PWA)

This content is locked. Please login to view it

Day 51 - React and Firebase

This content is locked. Please login to view it

Day 52 - React and TypeScript

This content is locked. Please login to view it

Day 53 - React Hooks (useReducer)

This content is locked. Please login to view it

Day 54 - React Suspense and Lazy

This content is locked. Please login to view it

Day 55 - React Performance Optimization

This content is locked. Please login to view it

Day 56 - React Testing Library Advanced

This content is locked. Please login to view it

Day 57 - Storybook for React

This content is locked. Please login to view it

Day 58 - Jest Snapshot Testing

This content is locked. Please login to view it

Day 59 - CSS-in-JS Libraries

This content is locked. Please login to view it

Day 60 - Progressive Enhancement in React

This content is locked. Please login to view it

Day 61 - Web Accessibility (A11y)

This content is locked. Please login to view it

Day 62 - Server-Side Rendering (SSR)

This content is locked. Please login to view it

Day 63 - React and Redux Middleware

This content is locked. Please login to view it

Day 64 - React and Electron

This content is locked. Please login to view it

Day 65 - React and Webpack

This content is locked. Please login to view it

Day 66 - React Suspense with Concurrent Mode

This content is locked. Please login to view it

Day 67 - Internationalization (i18n) in React

This content is locked. Please login to view it

Day 68 - React and Material-UI

This content is locked. Please login to view it

Day 69 - Serverless Functions with React

This content is locked. Please login to view it

Day 70 - React and Headless CMS

This content is locked. Please login to view it

Day 71 - Micro Frontends

This content is locked. Please login to view it

Day 72 - State Management Patterns

This content is locked. Please login to view it

Day 73 - React Custom Renderer

This content is locked. Please login to view it

Day 74 - React Hooks Internals

This content is locked. Please login to view it

Day 75 - Full-Stack Development with React

This content is locked. Please login to view it

Day 76 - Real-Time Collaborative Editing

This content is locked. Please login to view it

Day 77 - React and WebAssembly (Wasm)

This content is locked. Please login to view it

Day 78 - React Performance Profiling

This content is locked. Please login to view it

Day 79 - React Router Navigation Guards

This content is locked. Please login to view it

Day 80 - Advanced Styling Techniques

This content is locked. Please login to view it

      Sponsor Us|Community|Blog|YoutubeCareersContact UsDisclaimerPrivacy PolicyTerms of Service
      Have Feedback or want to contribute? Email: hello[@]100DaysOfCode.io
      100DaysOfCode@2024