first commit

2023-01-16 13:09:45 -05:00
commit a6ebce376c
271 changed files with 39454 additions and 0 deletions
@@ -0,0 +1,170 @@
+## Table of Contents
+
+- [How to run](#how-to-run)
+- [Editor Setup](#editor-setup)
+  - [Plugins](#plugins)
+  - [Settings](#settings)
+  - [Set Line Breaks](#set-line-breaks)
+- [Linting Setup](#linting-setup)
+  - [Install Dev Dependencies](#install-dev-dependencies)
+  - [Create Linting Configuration file manually](#create-linting-configuration-file-manually)
+- [Contact](#contact)
+
+<!-- HOW TO RUN -->
+
+## How to run
+
+Please follow the below instructions to run this project in your computer:
+
+1. Clone this repository
+   ```sh
+   git clone https://github.com/meXuvo/reactjs_starter
+   ```
+2. Change directory
+   ```sh
+   cd react
+   ```
+3. Run
+   ```sh
+   yarn
+   ```
+4. yarn start
+
+<!-- Editor Setup -->
+
+## Editor Setup
+
+You can use any editor but as I personally prefer VS Code. I will give some instructions about how I prefer VS code to be setup for React applications.
+
+### Plugins
+
+You need to install the below plugins:
+
+- ESLint by Dirk Baeumer
+- Prettier - Code formatter by Prettier
+
+### Settings
+
+Follow the below settings for VS Code -
+
+1. Create a new folder called ".vscode" inside the project root folder
+2. Create a new file called "settings.json" inside that folder.
+3. Paste the below json in the newly created settings.json file and save the file.
+
+```json
+{
+  // Theme
+  "workbench.colorTheme": "Dracula", //anythig as your favorite
+
+  // config related to code formatting
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.formatOnSave": false,
+    "editor.defaultFormatter": null
+  },
+  "[javascriptreact]": {
+    "editor.formatOnSave": false,
+    "editor.defaultFormatter": null
+  },
+  "javascript.validate.enable": false, //disable all built-in syntax checking
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.tslint": true,
+    "source.organizeImports": true
+  },
+  "eslint.alwaysShowStatus": true,
+  // emmet
+  "emmet.triggerExpansionOnTab": true,
+  "emmet.includeLanguages": {
+    "javascript": "javascriptreact"
+  }
+}
+```
+
+If you followed all previous steps, the theme should change and your editor should be ready.
+
+## Linting Setup
+
+In order to lint and format your React project automatically according to popular airbnb style guide, I recommend you to follow the instructions below.
+
+### Install Dev Dependencies
+
+```sh
+yarn add -D prettier
+yarn add -D babel-eslint
+npx install-peerdeps --dev eslint-config-airbnb
+yarn add -D eslint-config-prettier eslint-plugin-prettier
+```
+
+or You can also add a new script in the scripts section like below to install everything with a single command:
+
+```json
+scripts: {
+    "lint": "yarn add -D prettier@2.4.1 && yarn add -D eslint@7.11.0 && yarn add -D babel-eslint@10.1.0 && npx install-peerdeps --dev eslint-config-airbnb@18.2.1 && yarn add -D eslint-config-prettier@8.3.0 eslint-plugin-prettier@4.0.0"
+}
+```
+
+and then simply run the below command in the terminal -
+
+```sh
+yarn lint #or 'npm run lint'
+```
+
+### Create Linting Configuration file manually
+
+Create a `.eslintrc` file in the project root and enter the below contents:
+
+```json
+{
+  "extends": [
+    "airbnb",
+    "airbnb/hooks",
+    "eslint:recommended",
+    "prettier",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 8
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "jest": true
+  },
+  "rules": {
+    "react/react-in-jsx-scope": 0,
+    "react-hooks/rules-of-hooks": "error",
+    "no-console": 0,
+    "react/state-in-constructor": 0,
+    "indent": 0,
+    "linebreak-style": 0,
+    "react/prop-types": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [".js", ".jsx"]
+      }
+    ],
+    // "prettier/prettier": [
+    //   "error",
+    //   {
+    //     "trailingComma": "es5",
+    //     "singleQuote": true,
+    //     "printWidth": 100,
+    //     "tabWidth": 4,
+    //     "semi": true,
+    //     "endOfLine": "auto"
+    //   }
+    // ]
+  },
+  "plugins": ["prettier", "react", "react-hooks"]
+}
+```
+
+## Credits
+
+Made by [meXuvo](http://mexuvo.com/)