ReactJS Installation & Setup Tutorial
Tags: programming, productivity, tutorial, react
Published: 2022-09-06 18:56:09

React is currently one of the most popular JavaScript library for building UIs —and that trend looks set to continue for the foreseeable future. In this article, we’re going to focus on the ways we can setup React, quickly and painlessly so we can dive right into coding!

## Why React?
For the uninitiated, React allows us to build extremely fast web apps through the use of the Virtual DOM — it essentially renders only what it needs to. Providing a lightweight alternative to the traditional way of working directly with the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction).

React also promotes a component based workflow, meaning your UI is essentially just a collection of components. This makes for a fantastic building experience! As you’ll build with modularity, your code will be in neat self-contained chunks. And it’s also very useful when working in teams, individuals can work on parts of a project, while still working collectively toward project completion.

## Installation & Setup
There are a number of ways to get up and running with React. Firstly, we’ll take a peek at CodeSandbox and CodePen. If you want to instantly start playing around with code, this is a nice way to go!

We’ll then focus on spinning up a React project with Create React App — which gives you an awesome starting point for your projects, without the need to spend time setting up a build environment.

## React in CodeSandbox
CodeSandBox is an online code editor which you can use to get a React project up and running in no time at all.

Go to [codesandbox](https://codesandbox.io/s/) and click **React**.
![CodeSandbox Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zhrjimcr2lsjx8aywy4.png)
Instantly, you’ll be in a React environment that has been configured with the _create-react-app_ structure. We’ll look at this structure further on in the article! If you want to start coding without setting up a local install, this is a great way to go! Tasks such as transpiling, bundling and dependency management are all automated, and you can easily share the link of anything you’ve been working on!

## React in CodePen
An alternative to CodeSandBox is [CodePen](https://codepen.io/). Many developers use CodePen to showcase their work by creating “pens” for quick code demos, or “projects” for when multiple files are involved. CodeSandbox is definitely more feature rich for working with React, however CodePen is also a fine solution.

I’ve created a CodePen React starter here:
{% codepen https://codepen.io/rembertdesigns/pen/VwxLoNQ %}

## Create React App
_Create React App_ is a tool (built by developers at Facebook) that’ll give you a massive head start when building React apps. It handles all of the configuration, so you don’t need to know any Babel or Webpack. You just run the initial install & you’ll be up in a local dev environment, in no time!

### Installing with Create React App
All we need to do is open up our terminal, and run the following:
```react
npx create-react-app <app-name>
```
Where `<app-name>` is of course, the name of your app!

I use `npx` as it will download and run Node.js commands without installing them. If you don’t have Node installed, you can [download it here](https://nodejs.org/en/download/).

So go ahead and run the above command to begin the install! 

The install might take a few minutes to complete. Right now it’s installing all of the dependencies required to build your project and it’s also generating your initial project structure.

Success! Now you can open up your project folder & check out the created file structure.

Additionally, a Git repository has been created for you. And several commands have been added into the `package.json` file:

- `npm` start starts the development server, including auto page reloads for when you make edits
- `npm` run build bundles the app into static files for production into a build folder
- `npm` test starts the test runner using Jest
- `npm` run eject ejects your app out of the create-react-app setup, which lets you customize your project configuration

### Starting your Create React App
Now lets start up our local server! From your app folder, run:
```react
npm start
```
Your app will launch in the browser on `localhost:3000`.

Now you’re done! Each time you start a new project with _create-react-app_, you’ll have the latest version of React, React-DOM & React-Scripts. Lets now take a brief look at some of the features of _create-react-app_.

## Create-React-App Features
As you’ll see in the generated `package.json`, there are a number of commands which are available for use in your apps — lets take a look at these now.

### Building for Production
When the times comes to move from development to production, you can do so by running `npm run build`. A `build` folder will generate containing all of the static files to be used on a production server.

The `build` command itself will transpile your React code into code that the browser understands (using Babel). It’ll also optimize your files for best performance, by bundling all of your JavaScript files into one single file, which will be minified to reduce load times.

### Testing your App
Included with _create-react-app_ is [JEST](https://jestjs.io/), which allows you to test your code by running `npm test`. It’ll launch in a similar manner to `npm start` in that it will re-run your tests, each time you make changes.

If you haven’t yet run unit tests, you can safely file this away as a ‘nice to know’ for now. For those interested in testing components with Jest, all you need to do is either suffix your required files with `.spec.js` or `.test.js`, or place your test files inside of a `__tests__` folder. Jest will run your tests for the files you specify.

### Ejecting
Whenever you create an app with _create-react-app_, your build settings are not able to be altered, as they’ve been preconfigured in react-scripts. However, by running `npm run eject`, you can gain full control of your _create-react-app_ configuration.

The config will be copied into your apps directory in a new `config` folder, and your scripts into a `scripts` folder. You can then edit your Webpack, Babel and ESLint configurations to your hearts’ content.

_Note_: Running eject is permanent! Only do so if you’re ready to go it alone (you know what you’re doing!).

### Error Messages
Another helpful feature included with _create-react-app_ are the built-in error messages that generate to both the console and browser window.

Typos and syntax errors will throw a compilation error. And if you have a bunch of errors, you’ll get an overlay breaking down each.

## Summary
There we go! We’ve seen how to start playing around with React in CodeSandbox & CodePen. And we’ve looked at how to setup a local development environment with _create-react-app_. You don’t need to spend any time installing dependencies or configuring a build process — you can jump right into coding!

## Conclusion
If you liked this blog post, follow me on [Twitter](https://twitter.com/RembertDesigns) where I post daily about Tech related things!
![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijinng8k7bf23v0o6gkj.png) If you enjoyed this article & would like to leave a tip — click [here](https://www.buymeacoffee.com/rembertdesigns)

### 🌎 Let's Connect

- [Portfolio](https://www.rembertdesigns.co/)

- [Twitter](https://twitter.com/RembertDesigns)

- [LinkedIn](https://www.linkedin.com/in/rrembert/)

- [Hashnode](https://rembertdesigns.hashnode.dev/)

- [Devto](https://dev.to/rembertdesigns)

- [Medium](https://medium.com/@rembertdesigns)

- [Github](https://github.com/rembertdesigns)

- [Codepen](https://codepen.io/rembertdesigns)