6 posts tagged with "React"

When working on a React project, maintaining clean and consistent code is essential. This guide will walk you through setting up a React project with ESLint, Prettier, Stylelint, Husky, lint-staged, and cspell to automate code formatting, linting, and spell checking.

Step 1: Create a New React App​

npx create-react-app my-app --use-npm
cd my-app

This sets up a new React project.

Step 2: Initialize Git​

git init

Step 3: Install Dependencies​

Install necessary development dependencies:

yarn add -D eslint prettier stylelint husky lint-staged stylelint-config-standard cspell stylelint-config-standard

Step 4: Configure ESLint​

Initialize ESLint:

npx eslint --init

Modify .eslintrc.json:

{
  "extends": ["react-app", "eslint:recommended", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Create .eslintignore:

# Third party
**/node_modules

# Build products
build/
static/
docs/

Add ESLint Scripts to package.json​

"scripts": {
    "lint:ts": "eslint \"./src/**/*.{ts,tsx}\" --max-warnings 0",
    "lint:ts:fix": "eslint --fix \"./src/**/*.{ts,tsx}\" --max-warnings 0"
}

Step 5: Configure Prettier​

Create .prettierrc:

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "printWidth": 100,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none"
}

Create .prettierignore:

.git
.github
.yarn
.husky
build
node_modules
static

Add Prettier Scripts to package.json​

"scripts": {
    "format": "prettier --write .",
    "format:diff": "prettier --list-different ."
}

Step 6: Configure Stylelint​

Create .stylelintrc:

{
    "extends": "stylelint-config-standard",
  "rules": {
    "selector-class-pattern": null,
    "value-keyword-case": ["lower", { "camelCaseSvgKeywords": true }]
  }
}

Add Stylelint Scripts to package.json​

"scripts": {
   "lint:style": "stylelint \"**/*.css\"",
   "lint:style:fix": "yarn lint:style --fix"
}

Step 7: Configure cspell (Spell Checker)​

Initialize cspell:

npx cspell --init

Modify .cspell.json:

{
  "version": "0.2",
  "language": "en",
  "ignorePaths": ["node_modules", "build", "static", ".docusaurus", "i18n"],
  "dictionaryDefinitions": [
    {
      "name": "project-words",
      "path": "./project-words.txt",
      "noSuggest": true
    }
  ],
  "dictionaries": [
    "css",
    "html",
    "fonts",
    "typescript",
    "softwareTerms",
    "companies",
    "lorem-ipsum",
    "project-words"
  ]
}

Create a project-words.txt file to store custom words.

Add cspell Script to package.json​

"scripts": {
 "lint:spelling": "cspell \"docs/**/*.md\" \"blog/**/*.md\" \"src/**/*.js\" \"src/**/*.tsx\" \"docusaurus.config.js\" --no-progress --show-context --show-suggestions",
  "lint:spelling:fix": "yarn rimraf project-words.txt && echo \"# Project Words - DO NOT TOUCH - This is updated through CI\" >> project-words.txt && yarn -s lint:spelling --words-only --unique --no-exit-code --no-summary \"**\" | cross-env LC_ALL=en_US.UTF-8 sort --ignore-case >> project-words.txt"
}

lint:spelling:fix does

Step 8: Configure Husky for Pre-Commit Hooks​

Initialize Husky:

npx husky init

Add pre-commit hook:

echo "yarn run lint-staged" > .husky/pre-commit

Add pre-push hook:

echo "yarn run lint-staged" > .husky/pre-push

Step 9: Configure Lint-Staged​

Modify package.json:

"lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix --max-warnings=0",
      "prettier --write",
      "cspell --no-progress --show-context --show-suggestions"
    ],
    "src/**/*.{css,scss}": [
      "stylelint --fix",
      "prettier --write"
    ],
    "{docs,blog}/**/*.{md,mdx}": [
      "cspell --no-progress --show-context --show-suggestions"
    ]
  }

Step 10: Run the Setup​

yarn lint:ts
yarn format
yarn lint:style
yarn lint:spelling

Conclusion​

By following these steps, your React project is now set up with:

• ESLint for code linting
• Prettier for code formatting
• Stylelint for CSS linting
• cspell for spell checking
• Husky & lint-staged for pre-commit checks

This ensures cleaner, more readable, and error-free code throughout your development process. 🚀

Introduction​

Code quality is crucial in modern web development, ensuring that projects remain maintainable, readable, and free from potential issues. In this guide, we will set up static code analysis in a React project using Yarn, integrating the following tools:

• Husky → Manages Git hooks to enforce linting before commits.
• Lint-staged → Runs linters only on staged files for efficiency.
• ESLint → Lints JavaScript/TypeScript code for better quality.
• Prettier → Formats code automatically for consistency.
• Stylelint → Lints and fixes CSS/SCSS code.

Let's dive into the step-by-step setup.

1️⃣ Installing Required Packages​

Run the following command to install all necessary dependencies as dev dependencies:

yarn add -D husky lint-staged eslint prettier stylelint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react stylelint-config-standard

Why these tools?​

• ESLint: Ensures consistent JavaScript/TypeScript code by enforcing best practices and detecting potential issues.
• Prettier: Automatically formats code to maintain a uniform style.
• Stylelint: Lints and fixes CSS/SCSS styles.
• Husky: Hooks into Git workflows to run linters before committing changes.
• Lint-staged: Runs linters only on staged files to improve efficiency.

2️⃣ Configuring ESLint​

To configure ESLint, create a file named .eslintrc.json in the root directory and add the following content:

{
  "extends": ["react-app", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Why ESLint?​

✅ Catches syntax errors early.
✅ Helps maintain a consistent coding style.
✅ Enforces best practices in JavaScript and React development.

3️⃣ Configuring Prettier​

To ensure consistent code formatting, create a .prettierrc.json file:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Why Prettier?​

✅ Automatically formats code on save.
✅ Eliminates debates over code style.
✅ Works seamlessly with ESLint.

4️⃣ Configuring Stylelint​

To enforce CSS/SCSS best practices, create a .stylelintrc.json file:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": 2,
    "string-quotes": "double"
  }
}

Why Stylelint?​

✅ Ensures consistent styling rules.
✅ Detects and fixes errors in CSS/SCSS.
✅ Avoids potential styling issues in projects.

5️⃣ Setting Up Husky & Lint-Staged​

Installing Husky​

Initialize Husky:

yarn husky install

Modify your package.json to include Husky and lint-staged:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ],
  "src/**/*.{css,scss}": [
    "stylelint --fix",
    "prettier --write"
  ]
}

Enable Pre-Commit Hook​

Run the following command to enable Husky’s pre-commit hook:

yarn husky add .husky/pre-commit "yarn lint-staged"

Why Husky & Lint-Staged?​

✅ Prevents committing bad code.
✅ Runs linters only on changed files (performance-friendly).
✅ Ensures consistent formatting and linting before every commit.

6️⃣ Running Linters Manually​

To check code quality manually, run:

yarn lint       # Runs ESLint
yarn format     # Runs Prettier
yarn stylelint  # Runs Stylelint

Conclusion​

By following these steps, we have successfully set up Husky, lint-staged, ESLint, Prettier, and Stylelint in a React project using Yarn. This setup ensures:

✔ Better code quality
✔ Automatic formatting
✔ Enforced best practices
✔ Prevention of bad code commits

With this configuration in place, your React project will maintain high coding standards, making it more maintainable and scalable! 🚀

Flow is used for static type checking in javascript. Flow works best when installed per-project with explicit versioning rather than globally.

1. Summary

A component library is a collection of logically group components so that one can explore, select components and helps in maintaining consistent design across projects. nag-rlib built usng following components.

Technology evaluation is some times challenging when we have best technologies available. Let us see who wins Angular or React.
Features

Framework / Ecosystem​

Angular 4

Angular 4 is an MVC Framework itself.

React

React is only a view library one needs to choose the different libraries to make the Best Ecosystem. Refer my post for choosing the better parts to build a React Echosystem

Summary: It takes time to build Ecosystem in React. Once built developers need not worry about the Ecosystem.

To build a production quality web application using React following are the parts (libs/ components/) which constitutes one of the best React Eco system or frame work are listed below.

REACT​

Docs: https://facebook.github.io/react/docs/
Github: https://github.com/facebook/react

REACT-ROUTER​

Github: https://github.com/reacttraining/react-router
Docs: https://reacttraining.com/react-router/web/example/sidebar

REDUX​

State container for JavaScript apps
Docs: http://redux.js.org/
Github: https://github.com/reactjs/redux/

REDUX-SAGA​

• Make side effects i.e. asynchronous things like data fetching
• Makes impure things like accessing the browser cache
  Docs: https://redux-saga.js.org/
  Github: https://github.com/redux-saga/redux-saga

AXIOS​

Promise based HTTP client for the browser and node.js
https://github.com/mzabriskie/axios

REACT-BOOTSTRAP​

Docs: https://react-bootstrap.github.io/components.html
Github: https://github.com/react-bootstrap/react-bootstrap

classNames​

A simple javascript utility for conditionally joining classNames together
https://github.com/JedWatson/classnames