Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a pull request.
HackYourFuture - React.js
Welcome to the React.js (from this point on: React) module. In these 5 weeks we will go back to the frontend and learn how to make faster, more modern user interfaces.
Learning goals
In order to successfully complete this module you will need to master the following:
- Understand the React way of thinking about user interfaces
- Know the importance and place of state and how to pass it down
- Be able to work with different lifecycle hooks
- Recognize the utility of modularization
- Putting emphasis on writing reusable code (components)
- Knowing how to connect a Node backend with a React frontend
Must-reads before starting
Before learning React, you need to understand a couple of things first.
- React makes use of the latest JavaScript features, like classes, destructuring and higher order functions.
It's important to become familiar with these concepts, as they will drastically help to differentiate what is React-specific and what is regular JavaScript code. In this way you'll much quicker be able to see what exactly the role of React is.
- You need to become familiar with the idea of SPA: Single Page Application. As opposed to MPA (Multi Page Application), a SPA works with a single HTML file that switches in the content it shows the user. This is all for the sake of performance, speed and better user experience.
React makes use of this SPA structure, bundling all your JavaScript code and injecting that into your singular HTML file. When the browser loads this file React then takes care of what content to show when in an efficient way.
- You should know the difference between static and dynamic websites. While the former deals with content that doesn't change, the latter customizes content depending on the user (and their actions).
There is nothing inherently bad about having static frontends. However, as websites increasingly became more interactive there arose a need to display customized content. Content that is dependent upon the user and user input. This is what React aims to do.
- Learn about the how and why of JavaScript frameworks. Whenever building software you can build on top of what others have already done; this is why we use a framework. It not only allows us to structure our application, but also gives us tools on how to achieve certain requirements (like faster loading, and showing customized information to the user)
With that out of the way, let's get started with React!
Planning
| Week | Topic | Reading Materials | In Class | Homework |
|---|---|---|---|---|
| 1. | Thinking in React | React Philosophy, Components, JSX, Props | W1 Lesson Plan | W1 Homework |
| 2. | Data flow in React | State, State vs. props, Unidirectional data flow, Forms | W2 Lesson Plan | W2 Homework |
| 3. | Advanced React | Lifecycle hooks, API calls, Connecting Node with React, Connecting Node with React II | W3 Lesson Plan | W3 Homework |
| 4. | Client-side routing | Client-side routing, Server-side vs. client-side routing, React-Router | W4 Lesson Plan | W4 Homework |
| 5. | Test | Summary of core concepts | Test |
Handing in homework
Take a look at this video made by Daan, he explains how your homework needs to be handed in.
Also review the Git workflow material from the JavaScript3 module, use this as a reference.
Please read this doc for information on how to where to put your homework for this particular module.
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 :)