The tosin react starter boot camp

#1

If you know me you know I’m all about those reps!

So my classes first day with react were gonna build 4 VERY Simple applications just to get down the process of some of the core basics of react.

GETTING STARTED

  1. Install the almighty create-react-app by typing in terminal:

    • npm install create-react-app --global
  2. Go to the directory where the magic happens - for me is ~/Software

  3. type in terminal the following

    • create-react-app react-hello-world
  4. Make a repo on your github called react-hello-world

    • go to github
    • click repositories
    • click the green NEW button
    • title is react-hello-world
    • make it public
    • DO NOT ADD A README
    • click create repository
    • follow the instructions under
      • ...or push an existing repository from the command line
    • MAKE SURE YOU ARE TYPING THE COMMANDS INSIDE THE DIRECTORY YOU MADE THE APP IN
      • so if i typed create-react-app ReactHelloWorld in the ~/Software directory my commands must go while I’m cd’ed into
        ------ ~/Software/react-hello-world
  5. Type yarn start which will launch the app

  6. type code . which will open your editor

  7. NOW WE BEGIN!!!

============

The steps above are how you will start every project with the exception of step 1 you only need to do that one time.

============

Now the apps are simple

APP1 - Hello World

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

^^ this is the infamous react starter code.

for the first App you just wanna keep the spinner and change the text to say HELLO WORLD

DONE!

=======================

APP 2 - WHAT TIME IS IT

Repeat steps 2 - 7 in Getting Started except change it to react-time-now

The point of this app is to display the current time when you click the time

You’ll use Component Hooks, Local State, Click Handlers, and class functions

======================

APP 3 - GUESS A NUMBER BETWEEN 1- 10

Repeat steps 2 - 7 in Getting Started except change it to react-number-guesser

Were gonna make a component, pass that component a prop and a function, and list that component multiple times

and use Lifecycle hooks, local state, class functions, and click handlers

=======================

APP 4 - THE EVER MANDATORY TODO APP

Repeat steps 2 - 7 in Getting Started except change it to react-to-do

This is the almighty starter app you’ll do it all…

Local state, passing props, component heirarchy, conditional rendering, mmmm its great.

================

I will be adding example repos to this post soon but for instructors going forward or if you’ve done this already and wanna practice it again…

Here is the steps for the react starter boot camp!