Skip to content
React.js boilerplate
CSS Shell JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets/images
src
.babelrc
.eslintrc.json
.gitignore
.prettierrc
README.md
init.sh
package-lock.json
package.json

README.md

React.js Boilerplate

Quick setup for React.js application. It uses Parcel and all the package needed to write a React.js app (babel, eslint, prettier). It's a simple starter kit that you can easily extend. Only "react" and "react-dom" are installed, you decide which router or state management library you want to use.

Getting started

You can click on "Use this template" to create another repository or clone the repository:

$ git clone https://github.com/dimitrimarion/react-parcel-boilerplate.git

Run the setup:

$ npm run setup

Start the development server:

$ npm run dev

Bundle the application for production:

$ npm run build

Useful packages

// Use this:
import dog from "@images/dog.jpg";
// Instead of that:
import dog from "../../../images/dog.jpg"

You just need to add an alias in .babelrc:

 [
   "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "@images": "./assets/images"
        }
      }
  ]

Without class properties:

class Button extends Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({ clicked: true });
  }
  
  render() {
    return <button onClick={this.handleClick}>Click Me!</button>;
  }
}

With class properties and arrow function, there is no need to bind this and the code is shorter:

class Button extends Component {
  state = { clicked: false };
  
  handleClick = () => this.setState({ clicked: true });
  
  render() {
    return <button onClick={this.handleClick}>Click Me!</button>;
  }
}
You can’t perform that action at this time.