promathieuthiry/Installation.md

## Installation.md

      
    Raw
  

              Installation.md
            
          
    Building a React app with Parcel, Styled-Components, ESLint and Prettier

This setup includes:

Setting up a project with Parcel and React
Healthy codebase: linting and formatting with ESLint and Prettier
Initialize Styled-Components
Implement files

1. Project setup

Install Parcel, React and React-Dom
npm install --save-dev parcel
npm install react react-dom
2. Install ESLint

npm install -D eslint eslint-plugin-react
Once installed, initialize ESLint
npx eslint --init
In React - 17.0.0, importing react to a file is optional,
To fix this, we will add a rule to our .eslintrc file. So open your .eslintrc file and add this line "react/react-in-jsx-scope": "off" inside the rules.
"rules": {
    "react/react-in-jsx-scope": "off"
  }
Create a .eslintignore to avoid to lint specific files
node_modules/
.eslintrc.js
\*.html
3. Prettier

Install Prettier
npm install prettier --save-dev
Configure Prettier by creating .prettierrc and set the following rules:
{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true
}
Integrate Prettier with ESLint

Install thoses packages
npm install eslint-config-prettier eslint-plugin-prettier --save-dev
eslint-config-prettier ==> Disable all formatting-related ESLint rules.

eslint-plugin-prettier ==> Runs Prettier as an ESLint rule
make changes to .eslintrc file, it should look like that
  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:prettier/recommended'],
  plugins: ['react', 'prettier'],
add the script to the package.json
  "scripts": {
    "start": "npx parcel src/index.html --open",
    "build": "parcel build src/index.html --no-source-maps",
    "clean": "rimraf ./dist",
    "lint": "eslint  src/ --ext .js --ext .jsx",
    "lint-fix": "eslint src/ --ext .js --ext .jsx --fix"
  }
4. Initialize Styled-Components

Install styled components and the babel plugin
npm install styled-components
npm install --save-dev babel-plugin-styled-components
Create a .babelrc and add the following plugin
{
  "plugins": ["babel-plugin-styled-components"]
}
5. Implement files

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="index.js"></script>
  </body>
  </body>
</html>
// index.js
import ReactDOM from "react-dom";
import { App } from "./App";

const app = document.getElementById("app");
ReactDOM.render(<App />, app);