Learn React in 15 Days

This repository contains a series of tutorials and exercises to help you learn React in 15 days. Each day covers a new topic, building upon the knowledge and skills you have acquired so far. By the end of the 15 days, you will have a solid understanding of React and be able to build interactive web applications using this powerful library.

Prerequisites

Stage 1: Basic understanding of JavaScript

• Understand basic JavaScript concepts, such as variables, functions, and objects
• Review the following resources:
• JavaScript tutorial: https://www.w3schools.com/js/default.asp

Stage 2: Familiarity with HTML and CSS

• Understand basic HTML and CSS concepts
• Review the following resources:
• HTML tutorial: https://www.w3schools.com/html/default.asp
• CSS tutorial: https://www.w3schools.com/css/default.asp

Stage 3: Set up a code editor

• Choose a code editor (such as Visual Studio Code, Sublime Text, or Atom)
• Download and install the code editor
• Review the following resource for code editor recommendations: https://www.slant.co/topics/67/~best-text-editors-for-developers

Stage 4: Install Node.js

• Download and install Node.js: https://nodejs.org/en/download/
• Use Node.js to set up a local development environment for React projects

Stage 5: Install Git

• Download and install Git: https://git-scm.com/downloads
• Use Git to track changes to your code and collaborate with other developers
• Review the Git documentation: https://git-scm.com/docs

Getting Started

Day 1: Introduction to React

Resources:

• React documentation: https://reactjs.org/docs/getting-started.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html

  • Topics:

    • What is React and why is it useful?
    • Setting up a development environment for React
    • Understanding JSX and the virtual DOM
    • Building your first React component

Day 2: Props and State

Resources:

• React documentation: https://reactjs.org/docs/components-and-props.html, https://reactjs.org/docs/state-and-lifecycle.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

  • Topics:

    • Understanding props and state in React
    • Passing props to a component
    • Updating component state
    • Managing state with the useState hook

Day 3: Handling Events

Resources:

• React documentation: https://reactjs.org/docs/handling-events.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

  • Topics:

    • Understanding event handlers in React
    • Binding event handlers to components
    • Working with event objects
    • Using the useEffect hook to handle side effects

Day 4: Conditional Rendering

Resources:

• React documentation: https://reactjs.org/docs/conditional-rendering.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

  • Topics:

    • Understanding conditional rendering in React
    • Using if-else statements and ternary operators for conditional rendering
    • Using the && operator for conditional rendering
    • Using the ternary operator in JSX

Day 5: Lists and Keys

Resources:

• React documentation: https://reactjs.org/docs/lists-and-keys.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

  • Topics:

    • Understanding lists and keys in React
    • Rendering lists with map()
    • Using keys to identify list items
    • Handling list updates with the key attribute

Day 6: Forms

Resources:

• React documentation: https://reactjs.org/docs/forms.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

  • Topics:

    • Understanding forms in React
    • Building a form component
    • Handling form input and change events
    • Validating form data

Day 7: Components and Props

Resources:

• React documentation: https://reactjs.org/docs/components-and-props.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

• Topics:

  • Understanding components and props in React
  • Building reusable components with props
  • Validating prop types with PropTypes
  • Using default props

Day 8: State and Lifecycle

Resources:

• React documentation: https://reactjs.org/docs/state-and-lifecycle.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

  • Topics:

    • Understanding state and lifecycle in React
    • Using the componentDidMount lifecycle method
    • Updating state with the componentDidUpdate lifecycle method
    • Using the componentWillUnmount lifecycle method
    • Handling state changes with the shouldComponentUpdate lifecycle method

Day 9: Handling Errors

Resources:

• React documentation: https://reactjs.org/docs/error-boundaries.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

  • Topics:

    • Understanding error boundaries in React
    • Creating an error boundary component
    • Handling errors with the componentDidCatch lifecycle method
    • Using the ErrorBoundary component to protect the rest of your application

Day 10: Context

Resources:

• React documentation: https://reactjs.org/docs/context.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

  • Topics:

    • Understanding context in React
    • Creating a context provider and consumer
    • Updating context with the useContext hook
    • Nesting context providers and consumers

Day 11: Portals

Resources:

• React documentation: https://reactjs.org/docs/portals.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

  • Topics:

    • Understanding portals in React
    • Using the createPortal function to render components to different DOM elements
    • Nesting portals
    • Using portals to render modals and other overlays

Day 12: Refs and the DOM

Resources:

• React documentation: https://reactjs.org/docs/refs-and-the-dom.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

  • Topics:

    • Understanding refs in React
    • Creating refs with the createRef function
    • Accessing DOM elements with refs
    • Using refs to manage focus, selection, and media playback

Day 13: HOCs and Render Props

Resources:

• React documentation: https://reactjs.org/docs/higher-order-components.html, https://reactjs.org/docs/render-props.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

• Topics:

  • Understanding higher-order components (HOCs) in React
  • Creating HOCs to reuse code and abstract logic
  • Understanding render props in React
  • Using render props to share state and behavior between components

Day 14: Hooks

Resources:

• React documentation: https://reactjs.org/docs/hooks-intro.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

  • Topics:

  • Understanding hooks in React

  • Using the useState hook to manage state in functional components

Day 15: Next Steps

Resources:

• React documentation: https://reactjs.org/docs/getting-started.html

• React tutorial: https://reactjs.org/tutorial/tutorial.html (continued)

  • Topics:

    • Reviewing the key concepts covered in the course
    • Continuing to learn and practice with React
    • Building more complex React applications
    • Exploring additional features and libraries in the React ecosystem

Resources

In addition to the tutorials and exercises provided in this repository, there are many other resources available to help you learn React. Here are a few recommendations:

• The official React documentation (https://reactjs.org/docs) is a great resource for learning about the core concepts and features of React.
• The Reactjs.org website (https://reactjs.org/) has a wealth of tutorials and resources for learning React.
• The React community is very active and has a large number of online forums, blogs, and meetups where you can ask questions and learn from other developers. Some popular options include the Reactiflux Discord server (https://www.reactiflux.com/), the React subreddit (https://www.reddit.com/r/reactjs/), and the ReactJS Meetup group (https://www.meetup.com/topics/reactjs/).

Support

If you need help or have any questions while working through this tutorial series, you can reach out to the maintainers of this repository or seek help from the community. We are always happy to help and support your learning journey.

Good luck and happy coding!