hackyourfuturebelgium / react-module

Specifications React Module

HackYourFuture Belgium

Frontend Frameworks

check the wiki for class materials an supporting resources

---

Weekly Projects

Each week there will be 2 projects:

Pass the tests in this repo:

The structure of a weekly projects is that of a create-react-app. This is boilerplate, a set of tools and a predefined structure to start writing React fast. The first project (week-1-project) will teach you all about how it works.

Follow a tutorial and submit a new repo:

Week 1 Tutorial: a weather app

Getting Started

Dependencies

Node

Make sure you have Node installed. If not https://nodejs.org/en/download/.

Yarn

Yarn is a package manager. Similar to npm. As this package manager is recommended by create-react-app we will use it throughout the exercises.

• Install yarn https://yarnpkg.com/en/docs/install
• After yarn is installed navigate to the root of this project and run yarn install

Yarn will install the dependencies defined in package.json.

Let's start

• Navigate to the a week directory (e.g. week-1-project) in your document explorer.
• Open the README.md file.

Status

react-module's Issues

week1 create-react-app.test.js

In test 'Babel', there is an unfinished sentence (see **):

test('Babel', () => {
  // Within create react app Babel is included
  // https://babeljs.io/
  // Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript

  // The config in create-react-app allows you for instance to already use optional chaining
  const result = optionalChaining({});

  // The implementation op the function above use optional chaining
  // Currently this is still a proposal https://github.com/tc39/proposal-optional-chaining

  **// Babel makes sure we can already use it by transpiling the

  // This test is purely informative
  expect(result).toEqual(undefined);
});

Props Exercice suggestions

1. It might be interesting to ask as a bonus to get rid of the warning : Warning: Each child in a list should have a unique "key" prop.

2. I am not sure I understand the purpose of Passing functions as props and Passing functions as props: part 2. I understand that it demonstrates that we can also pass functions as arguments but I'm not too sure what is expected from the student.