React QStart

React QStart sets up a react development environment and start a server with hot module reload.

Configured Features

• Support transpiling JSX and TSX
• Build-in support CSS and module CSS
• Support jpg/png image import
• Support .env to load environment variables
• Resolves .jsx, .tsx, .js and .ts files while importing without an extension
• Auto create HTML files to serve bundles

Environment Variables

• PUBLIC_URL

Develop

$ yarn
$ yarn start

How to use

Option 1:

$ npx react-qstart create <PATH_TO_DIR>
# e.g. npx react-qstart create demo-app

Option 2:

$ mkdir demo-app
$ cd demo-app
$ yarn init -y
$ yarn add react react-dom react-qstart
# For typescript ts/tsx
$ yarn add @types/react @types/react-dom -D

In package.json, add the following scripts

{
  "scripts": {
    "start": "react-qstart",
    "build": "react-qstart build"
  }
}

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Welcome to QStart</h1>;
};

const mountNode = document.getElementById('app');
ReactDOM.render(<App />, mountNode);

The folder structure will look something like

demo-app
├── src
│   └── index.js
├── package.json
└── qstart.config.js (optional)

Run Script

To start the application

$ yarn start
# this will start server at port 3000
# http://localhost:3000

# to change default port, use -p or --port
$ yarn start -p 5000
$ yarn start --port 5000

To build the application

$ yarn build
# This will build the app for production to the out folder