HackYourFuture - React

Note

Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a pull request.

React is free an open-source frontend JavaScript library for building user interfaces based on UI components. We will learn React to empower us to build even more complex applications faster.

Next.js is a popular framework which further enhances the development process and performance of our web applications. Next.js builds on top of React by adding several features and optimizations that are often required in modern web applications.

Important

The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it 😊

Module goals

This course is divided in 2 modules

React 1 (3 weeks)

Here we will focus on:

• Why we learn React
• How to write React components in JSX
• How to use props and state in components
• How to react to events using hooks

React 2 (3 weeks)

In React 2 we will further expand our skills and learn:

• How to use component libraries
• How to connect to your Node.js API from the Node.js course
• How to build scalable web applications using Context, Reducer, and Routing

Individual Project (Meal Sharing App)

Additionally, you will also implement the UI for your Meal Sharing App using the skills you learn in this course. 🚀

Read up before we get started

1. Watch the React introductory video
2. Read the React landing page
3. Read the Next.js landing page

Beyond Next.js

Unfortunately, we won't be able to cover all areas of React in this course, but only the essentials. There are a lot of powerful tools out there for you to learn after you finish this course such as:

• TypeScript - a way to annotate ES6 with types
• Redux - predictable (application) state container, a Flux implementation
• Tailwind CSS - Open-source CSS framework