reactrouter-parcel

Getting started

Home Page

Step 1

> npm i reactrouter-parcel
or
> yarn add reactrouter-parcel

You may need to add full path like

> npm i c:\user\username\reactrouter-parcel

Step 2

> npm install
or
> yarn add

To install all the dependencies and Boom !!!

Start the server via

> npm start
or
> npm run dev

This is my very first package, let my know if their is any errors or suggestions. Thanks!

Git Repository
Address Issues
Home Page

All the things mentioned below are done already for you by this package.

Setting up everything

>>> git init
>>> npm init

>>> npm install prettier
--- Make .prettierrc ---

>>> npm install -D eslint@7.18.0 eslint-config-prettier@8.1.0
--- Make .eslintrc.json ---
>>> npm install -D parcel@next
# >>> npm install -D parcel@1.12.3

>>> npm install react@17.0.1 react-dom@17.0.1

--- Make .babelrc ---
>>> npm install -D @babel/core @babel/cli @babel/preset-react
# >>> npm install -D @babel/core@7.12.16 @babel/present-react@7.12.13

--- Add browser list in package.json--

>>> npm install -D eslint-plugin-import@2.22.1 eslint-plugin-jsx-a11y@6.4.1 eslint-plugin-react@7.22.0

--- update .eslintrc.json ---

>>> npm install -D eslint-plugin-react-hooks@4.2.0
# consist of best pactices made by react team for react hooks

Don't forget to set package.json

.prettierrc

{}

.eslintrc.json

{
  "extends": ["eslint:recommended", "prettier"],
  "plugins": [],
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}

You can also set "eslint:airbnb" and install plugins for that

In App.js if you write

/* global React ReactDOM */

It will so, oh okey you are expecting a global called react, I'm good with that :)

Parcel

It's out bundler like webpack Set up entry point for it in package.json

# Under scripts
"dev": "parcel src/index.html",

We don't even need a config file for parcel Just look for parcel version parcel.

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

.eslintrc

Best pactices thing

# npm install -D eslint-plugin-react-hooks@4.2.0
"extends": [ "plugin:react-hooks/recommended"]

React development Environment

set NODE_ENV=development echo $NODE_ENV, parcel gives all that nice messages of errors automatically but with webpack we need to set that up
NODE_ENV=production is 4 times faster than development

you can set up env variables in start script or dev script

"start":  "NODE_ENV=development parcel src/index.html",

Set 'scrict' mode

just let you use only new features, important to let old unsafe stuff phase out

import { StrictMode }from react

Wrap <App/> component in <StrictMode></StrictMode>

React Dev tools

React Router

Here we are doing v5

>>> npm install react-router-dom@5.2.0
# There is also a version for react-native so make sure you do specify -dom

See how react router matches its path React Router does partial matches. The URL /teachers/jem/young will match the paths /, /teachers, /teachers/jem and /teachers/jem/young. It will not match /young, /jem/young, or /teachers/young.