> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/part-1-intro-and-setup/1.0-rationale-and-overview.md).
# 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.
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!
* `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.
* `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.
## 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 (
test
);
}
}
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!
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://eleven-fifty-academy.gitbook.io/javascript-301-reactfundamentals/part-1-intro-and-setup/1.0-rationale-and-overview.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.