reactrouter-parcel v1.1.0

reactrouter-parcel

Git guide

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

• Chrome
• Firefox
• Edge

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.