Minimal React project template

2024-01-03 353 words 2 minutes

Contents

Although it is strongly criticised for its bloat, create-react-app is often a go to when starting a new React project. I like to start things from the bottom up, adding things up as I need them so, I prefer a minimalistic approach.

It’s actually very easy to setup a bare-bones React project using parcel. Here’s how to do it.

Initialise npm project

mkdir react-minimal
cd react-minimal
npm init -y
mkdir src

Some adjustments are needed to package.json. I’m gonna change the main to source, pointing to the index.html of my project. I’m gonna create an empty src/index.html for the interim.

touch src/index.html

Here’s the resulting package.json.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


{
  "name": "react-minimal",
  "version": "1.0.0",
  "description": "",
  "source": "src/index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
  },
  "dependencies": {
  }
}

Add parcel

I’m using parcel as build system and bundler.

npm install --save-dev parcel

Add React

Obviously, I’m adding React as dependency

npm install react react-dom

Sample application

I’m gonna start with the App component:

1
2
3
4
5
6
7
8
9


import React from 'react';

export default function App() {
    return (
        <div>
            <h1>Hello world!</h1>
        </div>
    );
}

I’m using it in index.jsx which is my entry point.

1
2
3
4
5
6
7
8
9


import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

const container = document.getElementById('root');

const root = ReactDOM.createRoot(container);
root.render(<App />, container);

This is included in index.html.

1
2
3
4
5
6
7
8
9


<html>
<head>
    <title>Minimal React application</title>
</head>
<body>
    <div id="root"></div>
    <script type="module" src="index.jsx"></script>
</body>
</html>

This can be rendered with parcel.

1
2
3


$ npx parcel src/index.html 
Server running at http://localhost:1234
✨ Built in 710ms

Or bundled using the build command

1

parcel build

That’s it!

Babel and JSX translation

You don’t need Babel at all as parcel is taking care of JSX translation out of the box.

Example code

Code discussed in this post is available in gitlab repo.