# Lesson2-3: Rendering UI with React: Create React App
###### tags: `Recat`
{%youtube x1fp0wLBI5w%}

> 💡Before Installing create-react-app💡
If you already have Node.js on your machine, it's a good idea to reinstall it to make sure you have the latest version. Keep in mind that Node.js now comes with npm by default.

# MacOS
1. Install [Homebrew](https://brew.sh/) by running `/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" ` in the terminal.
2. Check that it was installed by running `brew --version`. You should see the version number that was installed.
3. Run `brew install node`.
4. Run `node --version`.
5. Check that npm was installed as well by running `npm --version`.
6. Run `brew install yarn`.
7. Run `npm --version`.
8. Run `yarn install` && `yarn --version`

# Windows
1. Please download the [Node.js Installer](https://nodejs.org/en/download/), go through the installation process, and restart your computer once you're done.
2. Please follow the `yarn` [installation instructions](https://yarnpkg.com/lang/en/docs/install).
3. Run `yarn --version` to make sure yarn has been successfully installed.

# Linux
1. Please follow these instructions to install Node.js.
2. Run sudo apt-get install -y build-essential.
3. Please follow the yarn installation instructions.
4. Run yarn --version to make sure yarn has been successfully installed.

# Scaffolding Your React App
JSX is awesome, but it does need to be transpiled into regular JavaScript before reaching the browser. We typically use a transpiler like Babel to accomplish this for us. We can run Babel through a build tool, like Webpack which helps bundle all of our assets (JavaScript files, CSS, images, etc.) for web projects.

To streamline these initial configurations, we can use Facebook's Create React App package to manage all the setup for us! This tool is incredibly helpful to get started in building a React app, as it sets up everything we need with zero configuration! Install Create React App (through the command-line with npm), and then we can walk through what makes it so great.

npm install -g create-react-app
If you're seeing errors when trying to install a package globally, feel free to check out this article in the npm documentation. Note that to find out where global packages are installed, you can run npm list -g in your console (more information here).

{%youtube 3igA5dQ7aPA%}
Here's the commit with the changes made in this video.
The Yarn Package Manager
Both in the following video and in the output of create-react-app, we're told to use yarn start to start the development server. If you haven't heard about it yet, Yarn is a package manager that's similar to NPM. Yarn was created from the ground up by Facebook to improve on some key aspects that are slow or lacking in NPM.

If you don't want to install Yarn, you don't have to! What's great about it is that almost every use of yarn can be swapped with npm and everything will work just fine! So if the command is yarn start, you can use npm start to run the same command.
{%youtube Qpv2eBSsT1I%}

The observant student might've noticed that my index.js file does not include the line registerServiceWorker(); that's showing in your project. The call to the Service Worker was added in the version of Create React App right after I recorded this video. Since we're not using Service Workers in this project, it won't affect anything. If you want to remove it, though. Feel free!

create-react-app Recap
Facebook's create-react-app is a command-line tool that scaffolds a React application. Using this, there is no need to install or configure module bundlers like Webpack, or transpilers like Babel. These come preconfigured (and hidden) with create-react-app, so you can jump right into building your app!

Check out these links for more info about create-react-app:

create-react-app on GitHub
create-react-app Release Post from the React blog
Updates to create-react-app from the React blog