Project Setup ⭐️

Start project

1. Create project

To complete this challenge, you will need to start by setting it up:

✅ Create a new app by running the command:

npx create-react-app weather-app

💡 Using npx means that we avoid installing a local version of create-react-app in our machine and instead we use the latest available version of create-react-app in the npm registry. It also completes a few other tasks for us:

Creates a project directory for us (in this case weather-app).
Adds all tooling plus a basic React project.
Installs our project dependencies (node_modules) automatically, so that we do not need to run npm i in our project directory.

✅ Now that we have basic boilerplate installed in our computer we need to check this installation works correctly:

2. Start app

cd into your newly created directory, and check if the project starts by running one of these commands:

npm start

3. Run tests

Check the test pass by running

npm test

You might need to choose to A. Run all tests in the Jest dialogue box.

Clean up

We'll go through the file structure in a bit more detail in a different step, but for now let's clean up what we have.

⚠️ Before you start making any other changes, please check if you have an .eslintcache file in root directory.

Yes?:

delete the .eslintcache and commit that change.
open the .gitignore file and add an .eslintcache to the list of files that git should ignore, commit that change.

No?:

open the .gitignore file and add .eslintcache to the list of files that Git should ignore, commit that change.

Now we can update the boilerplate - meaning we will be removing any files, markup or styles that will be irrelevant to our project. We suggest the following setup:

1. Tidy up the `/public` folder

Delete all files except for index.html.
Update index.html to not use the favicon, logo and manifest files we just deleted. Delete all comments, then update meta tags and page title to "Weather App".

2. Tidy up the `/src` folder

Remove the reportWebVitals.js and logo.svg.
Update the entry point to our application index.js by removing references to the Web Vitals and comments.
Update App.js so that it does not use or render the SVG we just deleted. Then delete markup in <App />, keeping only the outermost <div/> with className prop, and inside it create a simple <h1> displaying the words "Weather App".
Remove styles from App.css. We will add custom styles later.

💡 If you run the application now with npm start what do you see?

The application should run correctly with no errors on the console and, as expected, the React logo and the old content shouldn't be rendered anymore. If you can still see the favicon we deleted open http://localhost:3000 in another browser and you'll see the favicon is not being rendered. This is down to caching so make sure to clear the cache in your main browser.

3. Run your tests

The only test in our test suite is failing. 🤔 Can you explain why this is happening?

💡 Our test suite is looking for a piece of markup which contains the text "Learn React". This was deleted when we changed the markup to "Weather App".

💪 Try and re-write the test so that it looks for a piece of markup which contains the text that is now relevant.

4. Commit your changes

Create React App has already initialised git, but you have to add your remote to your repo. Now you can stage, commit and push your work. Don't forget to commit and push your work frequently and consistently with meaningful messages 👌.

5. Add a Google font - optional

You can use a font for your app if you want. One of the good sources for web fonts is Google fonts! Find a font you like (we used the Nunito font) and pick styles you'd want to use (different font weights, italic or standard style). You can select as many styles here as you want.

There's no need to download the font, you can opt for an embed instead. We encourage the approach where the we use the @import method and paste the snippet at the top of the index.css. If Google Fonts suggests the use of @import wrapped in a <style> tag, remove the tag as you don't need the <style> tags within a .css file (tag is needed for styles within <html> files). Add styling for the <body> element in your index.css file, using the font family of your choice.

⚠️ Please be aware that Google Fonts are a 3rd party resource, so it is subject to change.

6. Add additional styling

Set a light grey background on the body element, for instance #eceef1.

7. Add the Airbnb style guide

For our project we will be using the Airbnb style guide, which in many quarters is considered the standard for developing React applications.

In any other project we would start by installing eslint as one of the dev dependencies however, since we are using create-react-app this dependency is already included. We do need to install a few others though:

    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.30.0",
    "eslint-plugin-react-hooks": "^4.5.0"

We can do this on the command line:

npm i -D  eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

💡 Please remember that the versions of packages above can change over time. The command above will always install the newest releases, when the snippet will add the exact version stated, that can and should be updated in the future.

This will install a set of eslint plugins that support the Airbnb Style Guide. We also need to add a configuration file .eslintrc.json to the root of your project with the following content:

{
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "airbnb/hooks",
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

The configuration above represents the standard Airbnb style guide, eg, this is the code style we would use if we were working in the Airbnb dev team. However there's a few contentious points, like enforcing the strict use of .jsx files for JSX, instead of being able to use either .jsx or .js (this is highly debated - take a look here).

In a nutshell, it goes like:

React team: you have the freedom, ✅ go forth using .js files for JSX components!
Airbnb team: no ❌ 👎 🙅🏻‍♀️

At Command Shift we decided to side with freedom and the React team (after all they are the React team) and we're going to overwrite that rule and a couple more by editing the rules{} key in the file .eslintrc you just created (and saved, we hope) to:

  "rules": {
    "quotes": [0],
    "react/prop-types": [0],
    "react/jsx-props-no-spreading": [0],
    "import/order": [1],
    "no-unused-vars": [1],
    "prettier/prettier": [1, { "endOfLine": "auto" }],
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ]
  }

Rules with a [0] are switched off, besides allowing us the freedom to use .js or .jsx extensions, we are also allowing ourselves the use of prop spreading like {...props}.

Rules with a [1] are switched on, but will give you warnings as opposed to errors, these should be fixed as normal, but wont prevent your app from rendering.

This is a good example of how to change specific rules when using a popular style guide as a standard. When working in a team these standards should be agreed in advance so that there is consistency across the code base.

One last thing, as we will be using jest and the style guide is 'testing framework agnostic', we need to add an extra key/value pair ("jest": true) to the env key in the .eslintrc.json, so that the linter knows how to handle global variables from the jest library like describe, test, etc.

  "env": {
    "browser": true,
    "es2020": true,
    "jest": true
  }

8. Install Prettier.

We strongly recommend the use of Prettier with VSCode as it helps with keeping to the style guide without much effort. If you do not have it installed in VSCode there is this great guide.

If you already use Prettier with VSCode, just install a few dependencies with:

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

and then update the extends in the .eslintrc file with:

"extends": [
  "plugin:react/recommended",
  "airbnb", 
  "airbnb/hooks",
  "plugin:prettier/recommended" 
],

9. Restart app and fix issues

You shouldn't see any linting errors now, but if you do try closing VSCode and opening it again so it's forced to read any changes to the configuration files. Once you start the dev environment again you might see some errors that look like this:

Failed to compile.

src/App.js
  Line 5:5:  'React' must be in scope when using JSX  react/react-in-jsx-scope
  Line 6:7:  'React' must be in scope when using JSX  react/react-in-jsx-scope

Search for the keywords to learn more about each error.

Every time you get an error like this, but you're not sure what it means google the rule name (react/react-in-jsx-scope) and you should find an explanation. Fix all the issues to see your app running again in the browser.

You can also add the following script to your package.json:

  "scripts": {
    ...
    "lint:fix": "npx eslint ./src --ext .js --fix"
  },

When you encounter any linting errors you can then try running npm run lint:fix in your terminal. This command cannot always fix all issues but should be able to fix some of them, the rest will require manual updates.