1.1: Project Setup

Setting up our folders

Now that we have a working React project, let's talk a little bit about components. The idea behind components is the separation of concerns of parts of our app. So if you think about Instagram, we might have one component for the picture, one for likes, one for comments, one for editing, etc. We use components to make development more organized, and for our projects to be more easily changed in the future.

For our project, we're going to make a folder inside of src called components. This is where we will house our components for our app!

We're going to organize our project further, and make folders for specific parts of our project, to make it more organized and easier to work with. Inside of your components folder, make a folder called site. This folder will house our components for our site setup!

Making Components

Inside of our site folder we're going to make 5 components. In React, it is necessary to name your React component with starting with an uppercase letter. So ensure that you follow these names exactly. Make components called: Footer.js, Header.js, Home.js, Resources.js and Sidebar.js. Ensure that they are spelled exactly like above.

Footer.js

Make your Footer.js have the following code:

import React from "react";
import { Row } from "reactstrap";

const Footer = () => {
  return (
    <footer>
      <Row>
        <p>&copy; Eleven Fifty 2018</p>
      </Row>
    </footer>
  );
};

export default Footer;

This is a very basic example of React functional component. We'll break down more of React later, for now, just know that we're using some bootstrap in React form (reactstrap), and that all this component is doing is displaying an Eleven Fifty copyright.

Header.js

Next, in our Header.js add the following code:

import React from "react";
import { Navbar, NavbarBrand, Nav, NavItem, NavLink } from "reactstrap";

const Header = () => {
  return (
    <header>
      <Navbar className="header">
        <NavbarBrand href="/">React Library</NavbarBrand>
        <Nav className="ml-auto" navbar>
          <NavItem>
            <NavLink href="https://github.com/yourhandle/yourrepoforthisapp">
              Github
            </NavLink>
          </NavItem>
        </Nav>
      </Navbar>
    </header>
  );
};

export default Header;

Again, we'll go more in depth later, but basically this is just setting up a Bootstrap navbar for us to add on to later!

Home.js

Add the following code to Home.js:

import React, { Component } from "react";
import { Link } from "react-router-dom";

export default class Home extends Component {
  render() {
    return (
      <div className="main">
        <div className="mainDiv">
          <h1>Welcome to React Fundamentals at Eleven Fifty</h1>

          <p>
            This app is intended to be a starter/tutorial app for your upcoming
            project and a learning sandbox for you in months and years to come
            should you continue to develop software with React. In this
            application we will work through some of the basic React concepts,
            build out some small applications, and then unleash you to build
            your own applications.
          </p>
          <hr />
          <h1>Important Notes</h1>
          <ul>
            <li>Being component based, you can move on to the next module.</li>
            <li>
              The styling is intentionally bland in some spots. Just a sandbox.
            </li>
            <li>At this phase, this site is not yet responsive.</li>
            <li>
              Refactor the text on this page and make this your own portfolio
              project.
            </li>
            <li>
              This app simply scratches the surface on what is possible with
              React.
            </li>
            <li>
              We have tried to collect the very best resources for this app, and
              we have cited those <Link to="/resources">here</Link>.
            </li>
            <li>
              The set up for this app might be the most confusing part. Hang in
              there..
            </li>
            <li>
              <Link to="/resources">React Resources</Link>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

This component has some info about the start of the app for your benefit! Feel free to change this component as we go forwards. There are also these Links that you may see on the page. These are imported from the react-router-dom package which we'll look at soon. This package allows us to navigate within our application.

Resources.js

Add the following code to Resources.js:

import React from 'react';

const Resources = () => {
    return (
        <div className="main">
            <div className="mainDiv">
                <h1>React Resources</h1>
                <p>Below are some of the resources that we used throughout this app. Note: You'll have one challenge where you will be asked to make this page better.</p>
                <ul>
                    <li>The Official Docs</li>
                    <li>React Router Dom</li>
                    <li>Stephen Grider's Udemy Course for the Udemy API. He's all over the place.</li>
                    <li>Samer Buna's Pluralsight Course for the Github API Starter</li>
                    <li>reactstrap for a Bootstrap app</li>
                    <li>The Moviee App</li>
                    <li>Font Awesome for React: https://gorangajic.github.io/react-icons/fa.html</li>
                    <li>Bitcoin: https://github.com/bmorelli25/interactive-bitcoin-price-chart</li>
                    <li>Google Maps: https://github.com/mthorry/earthquakes-mapper</li>
                    <li>Google Maps: https://github.com/mthorry/earthquakes-mapper</li>
                    <li>https://ssetem.gitbooks.io/searchkit/docs/setup/project-setup.html</li>
                    <li>https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/</li>
                    <li>http://neptunian.github.io/react-photo-gallery/examples/basic.html</li>
                    <li>https://github.com/ngokevin/aframe-react-boilerplate</li>
                </ul>
                <h1>More Reading</h1>
                <p>We didn't really use these, but here are a few extra resources to help:</p>
                <ul>
                    <li>Extra</li>
                    <li>The Moviee App</li>
                </ul>
            </div>
        </div>
    );
}
export default Resources;

This is again just a functional component to display some resources for your use!

Sidebar.js

Add the following code to Sidebar.js:

import React from 'react'

import {
  Route,
  Link,
  Switch
} from 'react-router-dom'

import Home from './Home'
import Resources from './Resources'


const Sidebar = () => (

  <div className="sidebar">
    <div className="sidebar-list-styling">
      <ul className="sidebar-list list-unstyled">
        <li><Link to="/">Home</Link></li>
        <li><Link to="/rationale">Rationale</Link></li>
        <li><Link to="/functionalcomponent">Functional Component</Link></li>
        <li><Link to="/resources">Resources</Link></li>

      </ul>
    </div>
    <div className="sidebar-route">
        <Switch>
            <Route exact path="/home"><Home /></Route>
            <Route exact path="/resources"><Resources /></Route>
            <Route exact path="/"><Home /></Route>
        </Switch>
    </div>
  </div>

)

export default Sidebar;

Now, this is where react-router-dom is even more used. This component is how we set up where we want to go in our application and what we want to see. Our Routes determine what will be shown on the screen at that path, and our Links actually take us to that path! So above if we use a Link to "/" or "/home" then we should see the <Home /> component. Same thing with <Resources /> and "/resources"! This is the whole way we can navigate to places in React! Our Switch acts just like a switch statement in vanilla. Only one of the conditions are true at one time, that way only one part of our application shows at a time!

Back to App.js

Now, you may notice that nothign has changed on our screen yet, because we haven't actually hooked anything up to our MAIN component that we edit in React, App.js! Let's change that!

Make your App.js look like the following:

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import './App.css';
import Header from './components/site/Header'
import Footer from './components/site/Footer'
import Sidebar from './components/site/Sidebar'
import {
  BrowserRouter as Router,
} from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Router>
          <Sidebar />
        </Router>
        <Footer />
      </div>
    );
  }
}

export default App;

Another note about react-router-dom. We talked about Link and Route already, but to actually make it work, we have to wrap all those Links and Routes in one BrowserRouter, which we've imported as Router here. This is critical to making this work!

Styling

There are many ways to style React applications, we recommend you research SCSS, CSS in JS, and advanced CSS in the future. For now, we're just going to stick with some simple CSS. Make your App.css look like this:

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* body */

body {
  padding: 15px;
  background-color: white;
  font: Belleza;
}

/* footer */
footer {
  background-color: #53565A; 
  color: white;
  margin-top: 10px;
}

footer  p {
  margin-top: 0.8em!important;
  margin-left: 1.5em;
}
/* main */
.main {
  background-color: white;
  color: black;
  height: 100%;
  min-height: 100%;
}

.mainDiv {
  margin: auto;
  width: 90%;
  padding: 5px;
}

.sidebar {
  display: flex;
  background-color: #53565A; 
  margin-top: 10px;
}

ul {
  list-style-type: 'none';
}
/* Sidebar */
.sidebar-list-styling{
  padding-left: 50px;
  padding-top: 15px;
  width: 20%;
  background-color: #53565A;
  color: white;
}

.sidebar-list a{
  color: white;
  padding: 0;
}

.sidebar-route{ 
  flex: 1;
  padding: '00px'; 
}

/* header */
.header {
  margin-top: 0.5em!important;
  text-align: center;
  background-color: #53565A; 
  color: white;
}

.header a {
  color: white;
}

.header  p {
  margin-top: 0.8em!important;
}

Note that usually for big applications, you want to split up your CSS into files, or use SCSS.

Now, we're all set to start developing and learning React!!!