Create a new React project using Parcel

Parcel has been my choice for some time if it comes to creating new React projects. Why? Because it’s simple and it supports everything I need!

I will show you how to set up a new React project.

Initialize a new project.

mkdir project && cd project && npm init

Install React.

npm install --save react react-dom

Install Typescript and Parcel.

npm install --save-dev typescript parcel-bundler @types/react @types/react-dom

Create a Typescript config.

npx tsc --init --target ESNEXT --jsx react

Create a src directory.

mkdir src

Create a src/index.html file.

<html>
  <body>
    <div id="root"></div>
    <script src="./index.tsx"></script>
  </body>
</html>

Create a src/index.tsx file.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Create a src/App.tsx file.

import React from "react";

const App: React.FC = () => {
  return <div>Hello!</div>;
};

export default App;

Open the package.json file and add a start script:

  "scripts": {
    "start": "parcel src/index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Run the project.

npm start

Open http://localhost:1234 in your browser, you should see Hello!.

It’s simple, isn’t it?