Skip to content

Commit 3e7d73f

Browse files
committed
Add love on README
1 parent 58239e3 commit 3e7d73f

1 file changed

Lines changed: 18 additions & 26 deletions

File tree

README.md

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
The goal of this exercise is to learn how to think in React.
44

55
## Prerequisites
6+
67
You need to be comfortable writing JavaScript and HTML to do this exercise. The exercise uses the following ES6 & ES5 features:
8+
79
- 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))
810
- [Class syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) (extends, constructor)
911
- [Arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
@@ -13,44 +15,34 @@ You need to have `node`and `npm`installed in your computer.
1315

1416
### If you find this exercise too difficult
1517

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+
If you find the exercise too difficult we recommend you to do the following basic React course from [freeCodeCamp](https://learn.freecodecamp.org/front-end-libraries/react/) before.
1819

1920
## Getting started:
2021

21-
`git clone git@github.com:leanjscom/thinking-in-react.git && cd thinking-in-react && npm install && npm start`
22+
```
23+
git clone git@github.com:leanjscom/thinking-in-react.git && cd thinking-in-react && npm install && npm start
24+
```
2225

2326
## Exercise
2427

25-
Before you start, there are two types of components [Functional Components and Class Components](https://reactjs.org/docs/components-and-props.html#function-and-class-components). Try to use a Functional component if the component doesn't have state, you'll need to refactor code a few times during the next exercise :)
28+
Before you start, there are two types of components [Functional Components and Class Components](https://reactjs.org/docs/components-and-props.html#function-and-class-components). Try to use a Functional component if the component doesn't have state, you'll need to refactor code a few times during the next exercise 😁
2629

2730
### Tasks
2831

29-
1- Refactor the “about” and “footer” sections by creating a functional component for each. Make sure everything works.
30-
31-
32-
2- Refactor the navbar by creating a Functional Component (AKA stateless components) and pass the dependencies (this.toggleMenu in this case) via props. Make sure everything works by clicking on the "Training" button at the top right of the screen.
33-
34-
35-
3- Refactor the books section by creating a functional component and pass the dependencies via props. Make sure everything works.
36-
37-
38-
4- Is there any state in app that should be in the Books component? Refactor <Books> books if appropriate. Should <Books> be a Functional Component or a Class Component now?
39-
40-
41-
5- Break <Books> down into <BookList> and <BookFilter>
42-
43-
44-
6- What do you think it would make sense to componentize next? Are there any parts on that view that you can reuse? Try to explain to a mentor what you want to refactor before you code :)
32+
- [ ] 1. Refactor the “about” and “footer” sections by creating a functional component for each. Make sure everything works.
33+
- [ ] 2. Refactor the navbar by creating a Functional Component (AKA stateless components) and pass the dependencies (`this.toggleMenu` in this case) via props. Make sure everything works by clicking on the "Training" button at the top right of the screen.
34+
- [ ] 3. Refactor the books section by creating a functional component and pass the dependencies via props. Make sure everything works.
35+
- [ ] 4. Is there any state in app that should be in the Books component? Refactor `<Books>` if appropriate. Should `<Books>` be a Functional Component or a Class Component now?
36+
- [ ] 5. Break `<Books>` down into `<BookList>` and <BookFilter>`
37+
- [ ] 6. What do you think it would make sense to componentize next? Are there any parts on that view that you can reuse? Try to explain to a mentor what you want to refactor before you code 😁
4538

4639
## Articles and links
4740

48-
* [https://reactjs.academy/blog/introduction-to-thinking-in-react/](https://reactjs.academy/blog/introduction-to-thinking-in-react/)
49-
* Basic React course from [freeCodeCamp](
50-
https://learn.freecodecamp.org/front-end-libraries/react/)
51-
* [https://reactjs.org/docs/introducing-jsx.html](https://reactjs.org/docs/introducing-jsx.html)
52-
* [https://reactjs.org/docs/thinking-in-react.html](https://reactjs.org/docs/thinking-in-react.html)
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=)
41+
- [https://reactjs.academy/blog/introduction-to-thinking-in-react/](https://reactjs.academy/blog/introduction-to-thinking-in-react/)
42+
- Basic React course from [freeCodeCamp](https://learn.freecodecamp.org/front-end-libraries/react/)
43+
- [https://reactjs.org/docs/introducing-jsx.html](https://reactjs.org/docs/introducing-jsx.html)
44+
- [https://reactjs.org/docs/thinking-in-react.html](https://reactjs.org/docs/thinking-in-react.html)
45+
- [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=)
5446

5547
## License
5648

0 commit comments

Comments
 (0)