veliataseven/react

Specifications React Module

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.

1. 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.

2. 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.

3. 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.

4. 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 :)