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.
Top comments (0)