Create a new React project using Parcel

29 May 2020·Tech·No AI

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?

Spot something wrong?

Found a typo, a broken link, or something that could be better? I would love to hear from you. Drop me a message and I will fix it.