Skip to content
The goal of this exercise is to learn how to think in React, by https://reactjs.academy/
Branch: master
Clone or download
Latest commit 56440be May 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Add recomanded extentions for VSCode Feb 27, 2019
public Update books picture and content Feb 27, 2019
src Update books picture and content Feb 27, 2019
.gitignore first commit Jun 20, 2017
.prettierrc Update prettier Feb 27, 2019
README.md Update README.md May 12, 2019
package-lock.json Update prettier Feb 27, 2019
package.json Update prettier Feb 27, 2019

README.md

ReactJS Fundamentals - Thinking in React

The goal of this exercise is to learn how to think in React.

Prerequisites

You need to be comfortable writing JavaScript and HTML to do this exercise. The exercise uses the following ES6 & ES5 features:

You need to have node and npm installed on your computer.

If you find this exercise too difficult

If you find the exercise too difficult we recommend you to do the following basic React course from freeCodeCamp before.

Getting started

git clone git@github.com:reactjsacademy/thinking-in-react.git
cd thinking-in-react
npm install
npm start

Exercise

Before you start, there are two types of components Functional Components and Class Components.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

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 😁

Tasks

  • 1. Refactor the “about” and “footer” sections by creating a functional component for each. Make sure everything works.

  • 2. Refactor the navbar by creating a Functional Component. 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.

  • 3. Refactor the books section by creating a functional component and pass the dependencies via props. Make sure everything works.

  • 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?

  • 5. Break <Books> down into <BookList> and <BookFilter>

  • 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 😁

Articles and links

License

This material is available for private, non-commercial use under the GPL version 3.

You can’t perform that action at this time.