Why You Should Stop Using Creat-React-App!

Stop Cheating. Build your own boilerplate that you understand.

The Acronym CRA is going to be used in the place of Creat-React-App throughout the majority of this article.

Why People Use Create-React-App

Before we start criticizing CRA it is good to understand why people like it and why people use it. After all, everything in this post is my own opinion and should not be taken as gospel, but perhaps its something to consider when starting your next react setup.

It’s Pushed By Facebook:
The number one reason why the majority of people end up using CRA is that it’s constantly pushed by Facebook, as a means of setting up React quickly for the first time.

It's Easy:
Another reason a large number of people tend to use CRA is it's easy to set up a React application, it only takes a few simple commands, in order to set it up.

npm install -g create-react-app
npx create-react-app my-app 
cd my-app 
npm start

And bam you have a fully-fledged react compatible web app, with no configuration required!

No Configuration:
The configuration is often seen as a tedious task that, you “have to do” so a lot of developers turn to CRA as an alternative, as there is little to no configuration needed in order to start up a new app

Why I don’t like Create-React-App

It encourages “blind” setup

The biggest downfall for when using CRA is 9 times out of 10, most people have no idea what they are installing at all, they are just going into terminal, typing:

npm install -g create-react-app
npx create-react-app my-app 
cd my-app 
npm start

and thought nothing about what is happening behind the scenes at all

This can be an extremely dangerous habit as a developer, which can cause you to blindly follow code snippets, not knowing anything about what is happening.

Not knowing anything about what CRA is doing, how the setup works, and how each piece of the setup plays together can unintentionally lead to issues further down the line.

Miss-out On a fundamental skill

Setting up projects as a developer nowadays is a pretty fundamental aspect of our jobs, not having this skill can mean the difference between a hire or not.

With this point, I don’t mean you need to understand every single inner working of Webpack, Babel, etc and how to set it up at an enterprise level. Just well enough that stuff works and you understand why it works.

Setting Up A Simple React Project Really isn’t that hard

Setting up projects in modern javascript is not the hardest thing in the world, in fact, its a lot easier then most perceive it to be. Most developers, from junior — mid-level should not have much of a hard time creating a basic project setup that can be used as a boilerplate for future setups.

Creating a basic Typescript React Boilerplate

Disclaimer: everything in this section is done on a mac you may need to change commands slightly to tailor to your os

Setting up git and NPM

First off we want to start off by creating a folder for our typescript react project to do this, open terminal and navigate to our Desktop using the following command:

cd Desktop

Next, we want to create a directory on our Desktop called TS-React-Boilerplate

mkdir TS-React-Boilerplate

After we have created a folder in our desired location, we navigate to it and initialize NPM and Git like bellow

cd mkdir TS-React-Boilerplate
npm init -y
git init

After this is done, navigate to GitHub and create a repository, once a repository has been created we run:

git remote add origin <YourGithubRepoHere>
git pull 
git add .
git commit -m "init commit"
git push origin master

All the above command does it add the repo as an origin, pulls the README.md, adds all our package.json to a commit and pushes it.

Install our dependencies

Ensure Webpack is installed globally, by running the following command

npm install -g webpack

Now add React and React-DOM, along with their declaration files, as dependencies

npm install --save react react-dom @types/react @types/react-dom

Next, we’ll add development-time dependencies on awesome-typescript-loader and source-map-loader.

npm install --save-dev typescript awesome-typescript-loader source-map-loader

Next, we need to set up a TSConfig.json File to the root of your project that looks like the following:

{
   “compilerOptions”: {
   “outDir”: “./dist/”,
   “sourceMap”: true,
   “noImplicitAny”: true,
   “module”: “commonjs”,
   “target”: “es5”,
   “jsx”: “react”
 },
 “include”: [
   “./src/**/*”
 ]
}

now we need somewhere to mount our react components. Create a index.html at the root of the project the following contents:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="example"></div>
        <!-- Dependencies -->
        <script src="./node_modules/react/umd/react.development.js">              </script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        <!-- Main -->
        <script src="./dist/bundle.js"></script>
    </body>
</html>

and finally, the thing that brings it all together: Webpack, Webpack is a tool that will bundle your code and optionally all of its dependencies into a single .js file.

Create a webpack.config.js file at the root of the project directory.

// SRC : https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

Now all we have to do is run

webpack

and VUALLA we now have a basic typescript, react, webpack setup completed. Now that wasn't so hard, was it?

Thanks for getting this far

Thanks for your support!

If you enjoyed this story, please click 👏 👏 👏

⚠️ Need help with your digital strategy? Head over to mashdesk.com for a free consolation. ⚠️