Welcome to Phase 2! In the last phase, you learned the fundamentals of JavaScript and how to use it to manipulate the DOM and respond to user events. In this phase, you'll be learning the most popular frontend library in the industry, React, and how it makes it easier to solve some of the same problems you faced in Phase 1 with a new philosophy on how to structure your code.

By the end of the phase, you will be able to:

• Design a React component hierarchy based on a wireframe
• Use React to create components that interact with an API
• Incorporate client-side routing into a single-page application in React

Use the schedule below to make sure you're working through the material at the right pace. The lessons marked with a ⭐️ are milestones that are useful to check your understanding of the material you've learned. If you feel you're falling behind, make sure to communicate with your instructor.

To get started with React, you'll first learn React's core philosophy and some of the modern JavaScript tools needed to get up and running with React. You'll then learn how to use React to create components: small building blocks that can be used to create more complex user interfaces. Finally, you'll learn about state in React, and how it makes it easier to update the DOM.

Total Assignments: (41)

• Welcome to Phase 2 (1)
• Introduction to React (6)
  • ⭐️ Introduction to React Quiz
• Components and Props (16)
  • ⭐️ Putting it All Together: Components and Props
• State and Events (16)
  • ⭐️ Putting it All Together: State and Events
• Applying Your Learning: State and Events (2)

Now that you've learned React's approach to building applications with regards to components and state, it's time to expand on what you know by learning how to fetch data in a React application to bring in data from external sources. After that, you'll have learned all the core fundamentals of what it takes to build a single-page application in React! Use the rest of this time to get more practice putting all those fundamentals together with the Additional Practice labs.

Total Assignments: (27)

• Side Effects and Data Fetching (9)
  • ⭐️ Putting it All Together: React Fetch CRUD Lab
• (Optional) React Under the Hood (4)
• Applying Your Learning (7)
  • ⭐️ Flatiron Stock Exchange
• (Optional) Additional Practice (7)

There's one new concept to learn before starting on projects: client-side routing, which allows you to create multiple "pages" with their own unique URLs in a single-page application 🤯.

You can also check out the two optional sections. Advanced Hooks will cover a few additional hooks like useRef and useContext to add new tools to your React toolkit, and teach how to make your very own custom hooks. Class Components explains how to work with slightly older class-based React code, which you are still very likely to encounter in blog posts, documentation, and at your first React job.

Total Assignments: (19)

• Client-Side Routing (7)
  • ⭐️ Client-Side Routing Quiz
• (Optional) Advanced Hooks (5)
• (Optional) Class Components (7)

You know the deal: it's project time! You'll be building a new React application from scratch using what you've learned up to this point. Projects are a great way to reinforce what you know and force you to encounter new problems, while giving you the opportunity to be creative and explore more tools from the React ecosystem.

Details for the project can be found in the Phase 2 Project module.