Some thing that frustates me about react is that every single tutorial out there just executes some script (i.e. create-react-app or CRA for short) that generates a bunch of files and everything it does under the hood isn't reallly explained. Also i feel it's the begin of the bloat that comes with many of the available javascriptframeworks out there. So today lets look at a simple project bootstrap without CRA!

Installing react

The first step is, of course, to install react. For this we need not just the react package, but also the react-dom package:

$ yarn add react react-dom @types/react @types/react-dom

Install- & configuration of typescript

Typescript is not an hard dependency for using react. However it's one of the most popular javascript flavours out there, so lets use it here too!

$ yarn add --dev typescript

Next we need to configure typescript. We assume following project structure: 

+ my-app/
   - build/
   - node_modules/
   - src/
   - package.json
   - tsconfig.json

We simply put our sources into the src folder, while the build folder holds all files generated by typescript.

The tsconfig.json file contains our typescript configuration: 

{
    "compilerOptions": {
        "module": "ES2020",
        "target": "ES2021",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "src",
        "outDir": "build",
        "sourceMap": true,
        "jsx": "react",
        "moduleResolution": "node",
    },
    "exclude": [
        "node_modules"
    ]
}

Let's take a look at the configuration:

  • "module": "ES2020" this specifys how modules should be generated, or to be more precise: what module system we intend to use. In our case we choose ES2020 which is the module system defined in the ecmaScript2020 specifications, aka the import * as React from "react"; syntax at the begin of an javascript file. For more information about this option, you can look here
  • "target": "ES2021" specifys which javascript version we want to target. Of course the latest!
  • "allowSyntheticDefaultImports": true this option allows to write an import like import React from "react"; instead of import * as React from "react";
  • "baseUrl": "src" and "outDir": "build" are telling typescript where our sources lay and where we want the generated javascript to be placed.
  • "sourceMap": true simply enables that sourcemaps are generated. This way your browser can display the real source (the typescript code) instead of our compiled javascript.
  • "jsx": "react" this is real important: this tells typescript how to deal with *.tsx files. The option "react" simply tells it to generate code that works with react. For more information, please take a look here
  • "moduleResolution": "node" this simply tells typescript that modules should be looked up like Node.JS does it. This means simply that typescript searches after an node_modules folder and trys to find the module in there (like Node.JS does). More information can be found here

Typescript sources

To get an runnable result at the end, you can create the following two files:

  • src/index.tsx 

    import React from 'react';
import ReactDom from 'react-dom';
import App from './app';

ReactDom.render(<App/>, document.getElementById('container'));
  • src/app.tsx 

    import React, { useState } from 'react';

const App = () => {
    return (
        <div>Hello world from React!</div>
    );
}
export default App;

index.html

Of course we need some html as a startingpoint: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width"/>
        <title>React + TS + Parcel</title>
    </head>
    <body>
        <div id="container"></div>
        <script type="module" src="./build/index.js"></script>
    </body>
</html>

Note the type="module" for our javascript! This needs to be set, because we generate our javascript as an module.

Parcel

If we now start an webserver (i.e. with ruby through ruby -run -ehttpd ./ -p8080) and navigate to our index.html, we notice that our app dosn't work. A quick look inside the browser's console also tells us why: our javascript is wrong! We generate the imports with just names (since we have the nodejs resolution strategy) but the browser dosnt know anything about that, and requires relative paths.

We fix this by using parcel. Parcel is an alternative to webpack, which supports code-splitting, caching and many more features out of the box with (nearly) zero-configuration. It's also most of the time faster than webpack.

To install it just run: 

$ yarn add --dev parcel

To then start an debug server, all we need to run is: 

$ yarn parcel index.html

We here see how parcel accomplisches zero-configuration: we simply give it our html file and itself finds out how it needs to bundle our javascript and css!