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.
- Understand basic JavaScript concepts, such as variables, functions, and objects
- Review the following resources:
- JavaScript tutorial: https://www.w3schools.com/js/default.asp
- 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
- 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
- Download and install Node.js: https://nodejs.org/en/download/
- Use Node.js to set up a local development environment for React projects
- 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
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
-
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
-
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
-
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
-
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
-
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
-
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
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
-
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
-
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
-
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
-
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
-
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
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
-
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
-
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/).
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!