Create a new React project using Parcel

#it #javascript

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.

  1. Initialize a new project.
mkdir project && cd project && npm init
  1. Install React.
npm install --save react react-dom
  1. Install Typescript and Parcel.
npm install --save-dev typescript parcel-bundler @types/react @types/react-dom
  1. Create a Typescript config.
npx tsc --init --target ESNEXT --jsx react
  1. Create a src directory.
mkdir src
  1. Create a src/index.html file.
<html>
<body>
<div id="root"></div>
<script src="./index.tsx"></script>
</body>
</html>
  1. 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")
);
  1. Create a src/App.tsx file.
import React from "react";

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

export default App;
  1. Open the package.json file and add a start script:
  "scripts": {
"start": "parcel src/index.html",
"test": "echo \"Error: no test specified\" && exit 1"
},
  1. Run the project.
npm start
  1. Open http://localhost:1234 in your browser, you should see Hello!.

It's simple, isn't it?