Some notes about setting
-
npm init -y
-
npm install -D prettier
(ornpm i -D
) -
make a new file, prettierrc at root folder (.prettierrc)
-
npm i -D eslint eslint-config-prettier
-
make a new file, eslintrc at root folder (.eslintrc.json)
-
create
.gitignore
under your root folder. -
(we use parcel for now)
npm i -D parcel-bundler
-
npm run dev
(parcel works and we can have a live server now) -
npm i react react-dom
(install two packages of the npm registrate) -
npm install -D babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
(then eslint know how to handle with React and tell you if you make any mistakes) -
npm i -D eslint-plugin-react-hooks
-
npm i -D cross-env
-
npm install @emotion/core @emotion/babel-preset-css-prop
(for Emotion) -
vscode-styled-components
this extension helps you to auto complete inline-css -
SSR Rationale & Initial Setup
npm i babel-cli express
-
in package.json file, add
"build": "parcel build --public-url ./dist/ src/index.html",
under "scripts" (build my code for production, public-url: it will searve everything from /dist)"start": "npm run build && babel-node server/index.js",
-
npm install express @babel/node
-
change src in index.html file ->
npm run start
Cannot get this server part work for now
npm install -D babel-eslint @babel/core @babel/preset-env @babel/plugin-proposal-class-properties @babel/preset-react
put .babelrc under the root foldernpm install -D typescript
Use typescript now!npx tsc --init
npx: a tool that's going to run npm binaries for you. This is going to start a typescript project for you.npm install -D @types/react @types/react-dom @types/reach__router
although React is not written in typescript, we can still get types out of it by installing this package.npm uninstall eslint babel-eslint eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
install TSLintnpm i -D tslint tslint-react tslint-config-prettier
- package.json:
"lint": "tslint --project",
--project: it tells that there is a tsconfig, and read everything from that config, which it's getting from TypeScript.
//eslint-disable-next-line
We can put it in front of these codes that remind you you might have made some mistakes, then it stops warning you.