Creating a React app using the create-react-app command can seem like magic. If you’ve used React before, you might be vaguely aware of the presence of things like Webpack or Babel under the hood, but you aren’t required to know anything about them to successfully construct a highly functional application.

But what exactly is all that stuff doing under the hood? And is all of it necessary for every application? These are some of the questions I had after using create-react-app for awhile, so I set out to find some answers by building a React app from scratch.

---

I think the best way to begin is by laying out everything we absolutely need for development. Here is a short list:

1. React - This one’s pretty obvious at face value, but what exactly is react and what is necessary to use it?
2. Bundler - This is really where create-react-app does a lot of the heavy lifting for you. It’s also where you might be able to trim the most fat when it comes to setting up your development build. I’ll explain what is absolutely necessary for a React app and why.
3. Server - You need a server to host your app during development, preferably one with hot reload enabled. I’ll use Webpack’s development server here, but in the near future I’ll post a follow-up to this article explaining how to build your own JavaScript server with Express and use it for development.
4. Tests - Of course, we can’t forget tests. For brevity’s sake, I won’t include testing in this article. Also, installing Jest is covered very well in the documentation, and I would basically be paraphrasing their instructions.

So how do we actually create this bare-bones project without create-react-app? By simply creating a project directory and initializing npm so we can install our packages:

mkdir bare-bones-react
cd bare-bones-react
npm init

npm will then ask you some questions about your project to setup your package.json file. The default answers will be displayed in parentheses. Most of the defaults should be fine to start, and you can always change them in the package.json file later if you need to.

React

Now that we have our project directory setup with npm, let’s look into installing React. React itself (the package called react) is essentially a library of references to the React API. To actually render React components, you also need a renderer that will inject functionality into those references and render them to the DOM.

Therefore, to utilize React in our app, we need to install two packages: react and react-dom. This separation might seem odd at first, but it’s part of what makes React great. If you don’t like react-dom, you can use a different renderer and still have access to the entire React API.

I’m going to use react-dom because I haven’t yet looked into another renderer. So to install React, we’ll type the following into the command line:

npm i react react-dom

#programming #webpack #javascript #babeljs #react