# 1.0: Packages Setup

## How Do We Start React Projects?

Normally, when you're working as a developer, you start with a project that has already been worked on by other developers. So you would be invited to access their git, and then clone their project. Rarely, you may get to start your own react projects. That's what we'll work through first!

## Create React App

Create React App [here](https://github.com/facebook/create-react-app), is a tool created by Facebook (the creators of React), to allow you to start developing a React application FAST, without having to configure every little thing, thereby fixing one of the cons to React development. This is the tool we'll be using to create our React applications.

1. run `npx create-react-app react-fundamentals` in the folder where you want to create your React fundamentals stuff we'll be learning in the next week +.
2. next `cd react-fundamentals` and then open it in your VS code. If you have installed it, you can run `code .` to open it in VS code.&#x20;

When you open it in your VS code you should see the following structure:

```
react-fundamentals
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── registerServiceWorker.js
```

## Understanding the Starting Structure

Check out the different files in your new React application. This is what it will look like every time! Here's an overview of the important files and folders, and what they do:

* `package.json`: this file is critical in basically all JS projects, not just React projects. This contains information about the project itself, such as author, version, scripts that it can run, and perhaps most importantly versions of packages you're using in the project. This is where packages like react are recorded with their version information, so that anyone else who wants to run your app can have the same configuration you have, so that it will work!&#x20;
* `node_modules`: this folder is where all of the packages you specified in your `package.json` get installed to when you run `npm install`. Generally speaking, you never want to modify anything in `node_modules` as these are third party packages.
* `.gitignore`: this file is a list of all the things to ignore from git. Generally speaking, node\_modules and files with sensitive info go in here.
* `public`: this folder houses the public things, so basically what is sent when our apps get deployed, since most things read from `index.html`.
* `src`: This folder is where all of the JavaScript and CSS files you'll create will go.&#x20;
  * `index.js`: this is the file that starts off React, by grabbing the `div` from `index.html`, and starting our React stuff off. We generally don't touch much in `index.js`.
  * `App.js`: the main file of our React application that we'll start developing in.
  * `App.css`: the main CSS file for our React application.&#x20;

## Setting Up Our Depedencies

So, for the project we're developing we need to include some extra packages beyond what create react app gave us. Make your `package.json` look like this:

```
{
  "name": "react-fundamentals",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.5",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.0.0",
    "lodash": "^4.17.4",
    "react-codepen": "^0.1.0",
    "react-icons": "^2.2.7",
    "react-router-dom": "^4.2.2",
    "react-spinners": "^0.2.5",
    "reactstrap": "^5.0.0-alpha.4",
    "youtube-api-search": "0.0.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
```

Then run `npm install` in your terminal. This will add the packages we added in, and make sure we're on the same page in terms of packages!

## Bootstrap

So, we're going to use bootstrap in this project, as you may have noticed from the dependencies we installed above! In order to complete the installation of bootstrap, we need to add something to our `App.js`. At the top, we can make our imports look like this:

```javascript
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import './App.css';
```

Notice that we took out the logo, and added in the bootstrap import!

## Starting Our Project

Now, we're going to start setting up our project for our use to learn React! The first file we're going to change, is our `App.js` by clearing out all the stuff that create react app starts us with.

Make your `App.js` look like the following:

```javascript
import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        test
      </div>
    );
  }
}

export default App;
```

Then, in your terminal, making sure you're in the `react-fundamentals` folder, run `npm start`. You should see the word test cenetered on your screen, hooray we've made our first change!
