Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React.js Parcel 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>;
  }
}

About

React.js Parcel boilerplate

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published