|
2 | 2 |
|
3 | 3 | The goal of this exercise is to learn how to think in React. |
4 | 4 |
|
5 | | -## Requirements |
6 | | -You need to be comfortable writing JavaScript (ES6: Module system, class syntax, destructuring assignment). |
| 5 | +## Prerequisites |
| 6 | +You need to be comfortable writing JavaScript and HTML to do this exercise. The exercise uses the following ES6 & ES5 features: |
| 7 | +- Module system ([import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)/ [export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export)) |
| 8 | +- [Class syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) (extends, constructor) |
| 9 | +- [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) |
| 10 | +- [Array.map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [Array.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) |
| 11 | + |
7 | 12 | You need to have `node`and `npm`installed in your computer. |
8 | 13 |
|
| 14 | +### If you find this exercise too difficult |
| 15 | + |
| 16 | +If you find the exercise too difficult we recommend you to do the following basic React course from [freeCodeCamp]( |
| 17 | +https://learn.freecodecamp.org/front-end-libraries/react/) before. |
| 18 | + |
9 | 19 | ## Getting started: |
10 | 20 |
|
11 | 21 | `git clone git@github.com:leanjscom/thinking-in-react.git && cd thinking-in-react && npm install && npm start` |
@@ -36,6 +46,8 @@ Before you start, there are two types of components [Functional Components and C |
36 | 46 | ### Links |
37 | 47 |
|
38 | 48 | * [https://medium.com/leanjs/introduction-to-react-3000e9cbcd26](https://medium.com/leanjs/introduction-to-react-3000e9cbcd26) |
| 49 | +* Basic React course from [freeCodeCamp]( |
| 50 | +https://learn.freecodecamp.org/front-end-libraries/react/) |
39 | 51 | * [https://reactjs.org/docs/introducing-jsx.html](https://reactjs.org/docs/introducing-jsx.html) |
40 | 52 | * [https://reactjs.org/docs/thinking-in-react.html](https://reactjs.org/docs/thinking-in-react.html) |
41 | 53 | * [babel repl example](https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=MYewdgzgLgBAEgUwDZJAYRAWwA7gWWAXhgAoBKGQgPlICgYYAeAEwEsA3K-hpgCwEYqiFCACEjAPQCuPJtioB1ZKEwIYUEEwCGMXgCcEAM0IAiXlCjYIALgkSDW4FABWEAHSOtzBJgCeJqgAlBEcoACkAZTcAQWAvH19JLSpJeW5JNk5aMgBuWloWDhhgJC0ICAA5LVVTUAItVjAEPQD0zOLS8qqakz0QAHdW2QBvYVQMHDwCAF90iUyuDI4qIA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&lineWrap=false&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=6.26.0&envVersion=) |
|
0 commit comments