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, 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:

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:

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!