Browse 23 bootstrap 4 and react templates from $14 sorted by best sellers. all created by our global community of independent web designers and developers

Folder Structure

After creation, your project should look like this:

For the project to build, these files must exist with exact filenames:

  • is the page template;
  • is the JavaScript entry point.

You can delete or rename the other files.

You may create subdirectories inside . For faster rebuilds, only files inside are processed by Webpack.
You need to put any JS and CSS files inside , otherwise Webpack won’t see them.

Only files inside can be used from .
Read instructions below for using assets from JavaScript and HTML.

You can, however, create more top-level directories.
They will not be included in the production build so you can use them for things like documentation.

Responsive classes

MDBReact grid includes five tiers of props for building complex responsive layouts. Customize the size
of your on extra small, small, medium, large, or extra large devices however you see
fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the
prop. Specify a value when you need a particularly sized column; otherwise, feel free
ommit it.

Stacked to horizontal

Using a single set of
classes, you can create a basic grid system that starts out stacked before becoming horizontal on
desktop
(medium) devices.

Mix and match

Don’t want your to simply stack in some grid tiers? Use a combination of different
props for each tier as needed.
See the example below for a better idea of how it all works.

Reordering

Order classes

Use
classes for controlling the
visual order of your content. These classes are responsive, so you can set the
by breakpoint (e.g.,
). Includes support for
through
across all five grid tiers.

There are also responsive
and
classes that change the order of an element by applying
and
(
), respectively. These classes can also be intermixed with the numbered
classes as needed.

Offsetting columns

You can offset in two ways: our responsive
grid classes and our
margin utilities. Grid classes are sized to
match columns while margins are more useful for quick layouts where the
width of the offset is variable.

Offset classes

Move columns to the right using
classes. These classes increase the left margin of a column by
columns. For example,
moves
over four columns.

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See
this in action:

Available Scripts

In the project directory, you can run:

The page will reload if you make edits.
You will also see any lint errors in the console.

Launches the test runner in the interactive watch mode.
See the section about for more information.

Builds the app for production to the folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about for more information.

Note: this is a one-way operation. Once you , you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use . The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Debugging in the Editor

Visual Studio Code and WebStorm support debugging out of the box with Create React App. This enables you as a developer to write and debug your React code without leaving the editor, and most importantly it enables you to have a continuous development workflow, where context switching is minimal, as you don’t have to switch between tools.

Visual Studio Code

Then add the block below to your file and put it inside the folder in your app’s root directory.

{
  "version": "0.2.0",
  "configurations": [{
    "name": "Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceRoot}/src",
    "sourceMapPathOverrides": {
      "webpack:///src/*": "${webRoot}/*"
    }
  }]
}

Start your app by running , and start debugging in VS Code by pressing or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.

Having problems with VS Code Debugging? Please see their .

WebStorm

In the WebStorm menu select . Then click and select . Paste into the URL field and save the configuration.

Start your app by running , then press on macOS or on Windows and Linux or click the green debug icon to start debugging in WebStorm.

The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.

Components

The main Modal Component.

  • : make the Modal visible or hidden

  • : — Should the modal render a backdrop overlay. backdrops are not dismissible by clicking the backdrop.

  • : Modal is dismissible via the key

  • Fade the entry and exit of the modal. You can also provide a
    Transition component from the v2 library to customize the animation more minutely.

  • : — an animation class added to the modal when a «static» backdrop is clicked, set to nothing if
    no animation is desired

  • : , a DOM Node to append the modal too

  • : handler fires right before the Modal animates in

  • : handler fires as the Modal starts entering

  • : handler fires after the enter animation finishes

  • : handler fires right before the Modal animates out

  • : handler fires as the Modal starts exiting

  • : handler fires after the exit animation finishes

The Header section of Modal. If not included be sure to add an elsewhere to keep the Modal accessible.

  • : — render a close button or not
  • : — a Handle when the close button is clicked. if left the Header will automatically wire itself into the parent Modal , so you only need to specify a handler if you want a different behavior

The main content of the Modal, a convenience Component for:

The bottom footer of the Modal, a convenience Component for:

A dismiss button for the Parent Modal. button will trigger its parent Modal handler. You don’t need to use a Dismiss button, they are just a Convenience Component.

BaseModal represents just the modal markup without any of the logic to render it to the . It is generally not recommended that you work with this component directly. You can use it if you really want to render a Modal inline.

Adding Images, Fonts, and Files

With Webpack, using static assets like images and fonts works similarly to CSS.

You can a file right in a JavaScript module. This tells Webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the attribute of an image or the of a link to a PDF.

Here is an example:

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return img src={logo} alt="Logo" >;
}

export default Header;

This ensures that when the project is built, Webpack will correctly move the images into the build folder, and provide us with correct paths.

This works in CSS too:

.Logo {
  background-image: url(./logo.png);
}

Webpack finds all relative module references in CSS (they start with ) and replaces them with the final paths from the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, just like when you import a non-existent JavaScript module. The final filenames in the compiled bundle are generated by Webpack from content hashes. If the file content changes in the future, Webpack will give it a different name in production so you don’t need to worry about long-term caching of assets.

Please be advised that this is also a custom feature of Webpack.

It is not required for React but many people enjoy it (and React Native uses a similar mechanism for images).
An alternative way of handling static assets is described in the next section.

Adding a Stylesheet

.Button {
  padding: 20px;
}
import React, { Component } from 'react';
import './Button.css'; // Tell Webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return div className="Button" >;
  }
}

In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified file in the build output.

If you are concerned about using Webpack-specific semantics, you can put all your CSS right into . It would still be imported from , but you could always remove that import if you later migrate to a different build tool.

Alignment

Use MDBReact alignment utilities to vertically and horizontally align columns.

Vertical alignment

For grids that are the same from the smallest of devices to the largest, use the
and
classes. Specify a numbered class when you need a particularly sized column; otherwise, feel
free to stick
to
.

No gutters

The gutters between columns in our predefined grid classes can be removed with
This removes the negative
s from
and the horizontal
from all immediate children .

Need an edge-to-edge design? Remove the parent
or
component.

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as
one unit, wrap onto a new
line.

Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with
wherever you want to wrap your columns to a new line. Normally this is accomplished with
multiple
s, but not every implementation method can account for this.

Code Splitting

Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.

Here is an example:

const moduleA = 'Hello';

export { moduleA };
import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    import('./moduleA')
      .then(({ moduleA }) => {
        // Use moduleA
      })
      .catch(err => {
        // Handle failure
      });
  };

  render() {
    return (
      div>
        button onClick={this.handleClick}>Loadbutton>
      div>
    );
  }
}

export default App;

This will make and all its unique dependencies as a separate chunk that only loads after the user clicks the ‘Load’ button.

You can also use it with / syntax if you prefer it.

Use

var Modal =require('react-bootstrap-modal')classModalExampleextendsReact.Component{render(){letcloseModal=()=>this.setState({ openfalse})letsaveAndClose=()=>{api.saveData().then(()=>this.setState({ openfalse}))}return(div>button type='button'>Launch modalbutton>Modal          show={this.state.open}          onHide={closeModal}          aria-labelledby="ModalHeader">Modal.Header closeButton>Modal.Title id='ModalHeader'>A Title Goes hereModal.Title>Modal.Header>Modal.Body>p>Some Content herep>Modal.Body>Modal.Footer>Modal.Dismiss className='btn btn-default'>CancelModal.Dismiss>button className='btn btn-primary' onClick={saveAndClose}>              Savebutton>Modal.Footer>Modal>div>)}}ReactDOM.render(ModalExample >,document.body);

If you are already including Twitter Bootstrap styles (e.g. ), then include .
If you want to use this module without Twitter Bootstrap, then include .

If you do not like the Bootstrap visual look and feel, you can adjust to suit your needs and transpile it to css yourself.

Adding a Stylesheet

.Button {
  padding: 20px;
}
import React, { Component } from 'react';
import './Button.css'; // Tell Webpack that Button.js uses these styles

class Button extends Component {
  render() {
    // You can use them as regular CSS styles
    return div className="Button" >;
  }
}

In development, expressing dependencies this way allows your styles to be reloaded on the fly as you edit them. In production, all CSS files will be concatenated into a single minified file in the build output.

If you are concerned about using Webpack-specific semantics, you can put all your CSS right into . It would still be imported from , but you could always remove that import if you later migrate to a different build tool.

Code Splitting

Instead of downloading the entire app before users can use it, code splitting allows you to split your code into small chunks which you can then load on demand.

Here is an example:

const moduleA = 'Hello';

export { moduleA };
import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    import('./moduleA')
      .then(({ moduleA }) => {
        // Use moduleA
      })
      .catch(err => {
        // Handle failure
      });
  };

  render() {
    return (
      div>
        button onClick={this.handleClick}>Loadbutton>
      div>
    );
  }
}

export default App;

This will make and all its unique dependencies as a separate chunk that only loads after the user clicks the ‘Load’ button.

You can also use it with / syntax if you prefer it.

Displaying Lint Output in the Editor

Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.

They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do.

You would need to install an ESLint plugin for your editor first. Then, add a file called to the project root:

{
  "extends" "react-app"
}

Now your editor should report the linting warnings.

Note that even if you edit your file further, these changes will only affect the editor integration. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes.

If you want to enforce a coding style for your project, consider using Prettier instead of ESLint style rules.

Available Scripts

In the project directory, you can run:

The page will reload if you make edits.
You will also see any lint errors in the console.

Launches the test runner in the interactive watch mode.
See the section about for more information.

Builds the app for production to the folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about for more information.

Note: this is a one-way operation. Once you , you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use . The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Displaying Lint Output in the Editor

Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.

They are not required for linting. You should see the linter output right in your terminal as well as the browser console. However, if you prefer the lint results to appear right in your editor, there are some extra steps you can do.

You would need to install an ESLint plugin for your editor first. Then, add a file called to the project root:

{
  "extends" "react-app"
}

Now your editor should report the linting warnings.

Note that even if you edit your file further, these changes will only affect the editor integration. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes.

If you want to enforce a coding style for your project, consider using Prettier instead of ESLint style rules.

Importing a Component

For example:

import React, { Component } from 'react';

class Button extends Component {
  render() {
    // ...
  }
}

export default Button; // Don’t forget to use export default!
import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file

class DangerButton extends Component {
  render() {
    return Button color="red" >;
  }
}

export default DangerButton;

We suggest that you stick to using default imports and exports when a module only exports a single thing (for example, a component). That’s what you get when you use and .

Named exports are useful for utility modules that export several functions. A module may have at most one default export and as many named exports as you like.

Learn more about ES6 modules:

Adding a CSS Preprocessor (Sass, Less etc.)

Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. You can, however, integrate a CSS preprocessor if you find it valuable. In this walkthrough, we will be using Sass, but you can also use Less, or another alternative.

First, let’s install the command-line interface for Sass:

npm install --save node-sass-chokidar

Alternatively you may use :

yarn add node-sass-chokidar

Then in , add the following lines to :

   "scripts": {
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",

Now you can rename to and run . The watcher will find every Sass file in subdirectories, and create a corresponding CSS file next to it, in our case overwriting . Since still imports , the styles become a part of your application. You can now edit , and will be regenerated.

To share variables between Sass files, you can use Sass imports. For example, and other component style files could include with variable definitions.

To enable importing files without using relative paths, you can add the option to the command in .

This will allow you to do imports like

@import 'styles/_colors.scss'; // assuming a styles directory under src/
@import 'nprogress/nprogress'; // importing a css file from the nprogress node module

At this point you might want to remove all CSS files from the source control, and add to your file. It is generally a good practice to keep the build products outside of the source control.

As a final step, you may find it convenient to run automatically with , and run as a part of . You can use the operator to execute two scripts sequentially. However, there is no cross-platform way to run two scripts in parallel, so we will install a package for this:

npm install --save npm-run-all

Alternatively you may use :

yarn add npm-run-all

Then we can change and scripts to include the CSS preprocessor commands:

   "scripts": {
     "build-css": "node-sass-chokidar src/ -o src/",
     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "react-scripts build",
+    "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }

Now running and also builds Sass files.

Why ?

has been reported as having the following issues:

  • has been reported to have performance issues in certain conditions when used in a virtual machine or with docker.

  • Infinite styles compiling #1939

  • has been reported as having issues with detecting new files in a directory #1891

is used here as it addresses these issues.

Adding a CSS Preprocessor (Sass, Less etc.)

Following this rule often makes CSS preprocessors less useful, as features like mixins and nesting are replaced by component composition. You can, however, integrate a CSS preprocessor if you find it valuable. In this walkthrough, we will be using Sass, but you can also use Less, or another alternative.

First, let’s install the command-line interface for Sass:

npm install --save node-sass-chokidar

Alternatively you may use :

yarn add node-sass-chokidar

Then in , add the following lines to :

   "scripts": {
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",

Now you can rename to and run . The watcher will find every Sass file in subdirectories, and create a corresponding CSS file next to it, in our case overwriting . Since still imports , the styles become a part of your application. You can now edit , and will be regenerated.

To share variables between Sass files, you can use Sass imports. For example, and other component style files could include with variable definitions.

To enable importing files without using relative paths, you can add the option to the command in .

This will allow you to do imports like

@import 'styles/_colors.scss'; // assuming a styles directory under src/
@import 'nprogress/nprogress'; // importing a css file from the nprogress node module

At this point you might want to remove all CSS files from the source control, and add to your file. It is generally a good practice to keep the build products outside of the source control.

As a final step, you may find it convenient to run automatically with , and run as a part of . You can use the operator to execute two scripts sequentially. However, there is no cross-platform way to run two scripts in parallel, so we will install a package for this:

npm install --save npm-run-all

Alternatively you may use :

yarn add npm-run-all

Then we can change and scripts to include the CSS preprocessor commands:

   "scripts": {
     "build-css": "node-sass-chokidar src/ -o src/",
     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "react-scripts build",
+    "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }

Now running and also builds Sass files.

Why ?

has been reported as having the following issues:

  • has been reported to have performance issues in certain conditions when used in a virtual machine or with docker.

  • Infinite styles compiling #1939

  • has been reported as having issues with detecting new files in a directory #1891

is used here as it addresses these issues.

Importing a Component

For example:

import React, { Component } from 'react';

class Button extends Component {
  render() {
    // ...
  }
}

export default Button; // Don’t forget to use export default!
import React, { Component } from 'react';
import Button from './Button'; // Import a component from another file

class DangerButton extends Component {
  render() {
    return Button color="red" >;
  }
}

export default DangerButton;

We suggest that you stick to using default imports and exports when a module only exports a single thing (for example, a component). That’s what you get when you use and .

Named exports are useful for utility modules that export several functions. A module may have at most one default export and as many named exports as you like.

Learn more about ES6 modules:

Updating to New Releases

Create React App is divided into two packages:

  • is a global command-line utility that you use to create new projects.
  • is a development dependency in the generated projects (including this one).

You almost never need to update itself: it delegates all the setup to .

When you run , it always creates the project with the latest version of so you’ll get all the new features and improvements in newly created apps automatically.

To update an existing project to a new version of , open the changelog, find the version you’re currently on (check in this folder if you’re not sure), and apply the migration instructions for the newer versions.

In most cases bumping the version in and running in this folder should be enough, but it’s good to consult the changelog for potential breaking changes.

We commit to keeping the breaking changes minimal so you can upgrade painlessly.

How it works

New to or unfamiliar with flexbox? Read our
CSS flexbox guide.

The above example creates three equal-width columns on small, medium, large, and extra large devices using our
predefined
grid classes. Those columns are centered in the page with the parent
component.

Breaking it down, here’s how it works:

  • Containers provide a means to center your site’s contents. Use
    component for fixed width or
    for across all viewport and device sizes.
  • Rows are wrappers for columns. Each MDBCol has horizontal
    (called a gutter) for controlling the space between them. This
    is then counteracted on the rows with negative margins. This way, all the content in your
    columns is
    visually aligned down the left side.
  • In a grid layout, content must be placed within MDBCol and only MDBCol may be immediate children of MDBRow.
  • Thanks to flexbox, Columns without a specified will automatically layout as equal width
    Columns. For example, four instances of
    will each automatically be 25% wide from the small breakpoint and up. See the
    section
    for more examples.
  • Column props indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want
    three
    equal-width columns, you can use
    .
  • MDBCol
    s are set in percentages, so they’re always fluid and sized relative to their parent element.
  • MDBCol have horizontal
    to create the gutters between individual columns, however, you can remove the
    from MDBRow and
    from MDBCol with
    className on the
    .
  • To make the grid responsive, there are five grid breakpoints, one for each
    :
    all breakpoints (extra small), small, medium, large, and extra large.
  • Grid breakpoints are based on minimum width media queries, meaning
    they apply to that one breakpoint and all those above it (e.g.,
    applies to small, medium, large, and extra large devices, but not the first
    breakpoint).
  • You can use predefined grid classes (like
    ).

Getting Started

Adding Bootstrap

Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:

Import Bootstrap CSS in the file:

import 'bootstrap/dist/css/bootstrap.css';

Import required reactstrap components within file or your custom component files:

import { Button } from 'reactstrap';

Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render
method. Here is an example redone
using reactstrap.

Dependencies

Optional Dependencies

These libraries are not included in the main distribution file and need to be manually
included when using components that require transitions or popover effects (e.g. Tooltip, Modal, etc).

CDN

If you prefer to include Reactstrap globally by marking as external in your application, the
library provides various single-file distributions, which are hosted on the following CDNs:

cdnjs

script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.min.js">script>


script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.full.min.js">script>

unpkg

script src="https://unpkg.com/reactstrap@6.0.1/dist/reactstrap.min.js">script>


script src="https://unpkg.com/reactstrap@6.0.1/dist/reactstrap.full.min.js">script>

Versions

Reactstrap has two primary distribution versions:

  1. This file excludes the optional dependencies – and .
    This is the recommended approach (similar approach in Bootstrap’s JavaScript components) for including
    Reactstrap as it reduces the filesize and gives more flexibility in configuring needed dependencies.

    Recommended use cases:

    • Small, medium, or large applications
    • Applications that do not use any transitions or popper components
    • Applications that directly use or – Reactstrap and your application
      will use the single global version included
  2. This file includes the optional dependencies – and

    Recommended use cases:

    Small applications

html lang="en">
  head>
    
    script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.1/prop-types.min.js">script>
    script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js">script>
    script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js">script>
    
    script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.2.1/react-transition-group.min.js">script>
    script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">script>
    script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/react-popper/0.10.4/umd/react-popper.min.js">script>
    
    script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.min.js">script>
    
    script type="text/javascript" src="/assets/bundle.js">script>
  head>
  body>
    div id="my-app" />
  body>
html>

Formatting Code Automatically

To format our code whenever we make a commit in git, we need to install the following dependencies:

npm install --save husky lint-staged prettier

Alternatively you may use :

yarn add husky lint-staged prettier
  • makes it easy to use githooks as if they are npm scripts.
  • is the JavaScript formatter we will run before commits.

Now we can make sure every file is formatted correctly by adding a few lines to the in the project root.

Add the following line to section:

  "scripts": {
+   "precommit": "lint-staged",
    "start": "react-scripts start",
    "build": "react-scripts build",

Next we add a ‘lint-staged’ field to the , for example:

  "dependencies": {
    // ...
  },
+ "lint-staged": {
+   "src/**/*.{js,jsx,json,css}": 
+ },
  "scripts": {

Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run to format your entire project for the first time.

Ссылка на основную публикацию