[
    {
        "url": "http://127.0.0.1:8000/users/1/",
        "username": "admin",
        "email": "[email protected]",
        "groups": []
    }
]

class App extends Component {

  constructor() {
    super();
    this.state = {
      user: {}
    };
  }

  ...
}```

Then we actually query the backend in the 'componentDidMount' method that is automatically called when the React component has been mounted;:

```JavaScript

class App extends Component {

  ...

  componentDidMount() {
    fetch(
      'http://127.0.0.1:8000/users/1',
      {
        headers: {
          'Accept': 'application/json'
        }
      }
    ).then((response) => response.json())
    .then((responseData) => {
      this.setState({ user: responseData });
      console.log('Fetch from backend successful!')
    })
    .catch((error) => {
      console.log('Error fetching and parsing data', error);
    });
  }
  render() {
    return (
       ...
       <p>Username: {this.state.user.username}</p>
       <p>E-Mail: {this.state.user.email}</p>
       ...
     );
   }

  "dependencies": {
    // ...
  },
+ "lint-staged": {
+   "src/**/*.{js,jsx,json,css}": [
+     "prettier --single-quote --write",
+     "git add"
+   ]
+ },
  "scripts": {
+   "precommit": "lint-staged",

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
}```


# Router / Redux

Add dependencies:

```bash:
yarn add redux react-redux react-router-dom react-router-redux@next redux-thunk history --save