Simple React.js Boilerplate

I created a simple React.js boilerplate using Parcel. 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 or any other libraries you want to use.

Link to the boilerplate : Simple React.js Boilerplate

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

• babel-plugin-module-resolver: this plugin simplifies the import path in your project.

// 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" } } ] 

• @babel/plugin-proposal-class-properties: this plugin lets you use class properties.

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>;  } } 

Conclusion

This is a very simple boilerplate, it doesn’t include advanced things like state management or unit testing but I think it’s a good starting point for somebody learning React.js.