React Project Template

Folder structure:

├── /build/                     # compiled output
├── /docs/                      # Documentation files
├── /node_modules/              # 3rd party lib
├── /public/                    # Static files 
├── /src/                       # The source code of the application
├───── /components/            # React components
├──────├──────/admin           # dashboard, admin
├──────├──────/common          # shared components
├──────├──────/icons           # icons
├──────├──────/news            # news specific components
├──────├──────/static          # static page
├────── redux/                 # redux (Seperate into sub folders based on functions as well as complexity rises)
├──────├──────/actions         # action types, action creators
├──────├──────/reducers        # reducers
├──────├──────store.js         # store.js
├────── /utils/                # server schema and data models
├────── /routes/               # Routes/Page files
├────── /clientScript.js       # Client-side startup script
├────── /config.js             # application settings
├──────  ...                   
├── /test/                     # Unit tests
├── package.json                
└── yarn.lock          

Instructions

1. Install the necessary dependencies.

npm install

2. To start the development server, execute the following command.

npm start

3. To start the cypress test, execute the following command.

npm test

4. To start the production build, execute the following command.

npm run build

Dependencies

• Axios
• PropTypes
• React Redux
• React Router DOM
• Redux
• Redux Thunk

Developer Dependecies

• Cypress
• Husky
• Lint Staged
• Prettier
• ESLint
• ESLint Airbnb Config
• ESLint Prettier Config
• ESLint Import Plugin
• ESLint JSX a11y Plugin
• ESLint Prettier Plugin
• ESLint React Plugin

Using Axios

We've implemented interceptors to automatically log the API requests and responses through axios in development environment. So, you need to import the custom axios instance instead of directly importing from the axios package.

import axios from "./utils/axiosInterceptor";

In ./utils/axiosInterceptor.js, change the <Base_URL> to your backend server's base url. For example, http://127.0.0.1:5000 for flask.

Using ErrorBoundary

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

import ErrorBoundary from "../components/common/ErrorBoundary"

const App = () => {
  return (
    <div>
      <p>Hello, React!</p>
      <ErrorBoundary>
        <SomeComponent>
      </ErrorBoundary>
    </div>
  )
}

You may wrap top-level route components to display a “Something went wrong” message to the user or you may also wrap individual components in an error boundary to protect them from crashing the rest of the application.

Using PropTypes

React has some built-in type-checking abilities. To run type-checking on the props for a component, you can assign the special propTypes property.

import PropTypes from "prop-types";

class Greetings extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { name } = this.props;
    return <h1>Hello, {name}</h1>;
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

Using Redux

A typical redux setup should have the following files in their respective folder.

1. actionsTypes.js, to declare your different actions in redux. Like this.

2. actions.js, to write your actions. Like this.

3. reducer.js, to manage your reducer's state. Like this.

Once it's done, you've to import the reducer to store.js and use it in the combineReducers.

Note: Redux DevTools is already setup for development and production. You can download the extension for your browser.

Using React Hooks

Refer the detailed documentation.

React Router DOM with Hooks

Refer the detailed documentation.

Using Cypress

Refer the detailed documentation.

Useful Visual Studio Code Extensions

• ES7 React/Redux/GraphQL/React-Native snippets

• ESLint VSCode Plugin

• Prettier

Using oAuth

Refer the detailed documentation

General Guidelines

1. All the files having JSX should have an extension of .jsx

2. Always de-structure your state & props before using them. Refer to MDN for reference.

3. Use propTypes for all your props to ensure type-checking. Refer to React Docs for reference.

4. Async updates to redux must be handled through redux-thunk.

5. Individual components should be styled using css modules. Refer to CRA Docs for reference.

6. Always handle error in promises with catch method.

7. Naming Conventions