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.

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.

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 Echo system

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