Setup the development environment

Quickly setup your development environment

For the rest of the tutorial we'll be using Typescript.

If you haven't had a chance to work with Typescript, don't worry, the only major difference in our case is that we will use .ts extension instead of .js and .tsx instead of .jsx

We'll be using parcel to bundle our typescript code.

1- Create a directory for the app and cd into it :

mkdir tutorial-bookmarking-app
cd tutorial-bookmarking-app

2- Create a package.json

yarn init -y

3- Add a .gitignore file to ignore temporary files and dependencies

.gitignore

node_modules
dist

4- Install parcel-bundler as a development dependency (and prettier & typescript OPTIONAL)

yarn add -D parcel-bundler # npm i -D parcel-bundler
# 
yarn add -D prettier
yarn add -D typescript
yarn tsc --init

5- Create a src/ folder in which our source code will belong

mkdir src

6- Inside src/ create a minimal index.html file

src/index.html

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

7- Inside src/ create an initial index.tsx file

src/index.tsx

const concept = "world";
document.getElementById("root").innerHTML = `
    Hello ${concept} !
`;

8- Add a dev script to your package.json that runs parcel with hot-reloading

package.json

{
  "name": "tutorial-bookmarking-app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "parcel-bundler": "^1.9.7"
  },
  "scripts": {
    "dev": "parcel src/index.html"
  }
}

9- Make sure everything is working.

yarn dev # or npm run dev

Our development environment is now ready on localhost:1234 🎉

Git Commit

PreviousBuild a React App with Firebase Auth and Realtime Database NextAdd React and React DOM

Last updated 6 years ago