Lesson 2: React Template Project

This is a template for a new React project. It includes all necessary bootstrap code to help you start writing your application logic immediately.

The purpose of this lesson is to learn the basics of a distributed version control, and deploy your first application to a hosted server. The exercises below will take you through the common operations using Git and Github, creating a Heroku server and deploying your application there. As a result you have also mastered writing a new React application using a template you could reuse and reproduce yourself. No magic involved.

Task 1: Getting started

1. Install Git-bash for Windows from https://gitforwindows.org/
2. Create an account on Github
3. Add your SSH public key to Github to be able to make changes

• https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/
• https://help.github.com/articles/adding-a-new-ssh-key-to-your-github-account/

1. Set your user information in your Git configuration

Task 2: Forking and cloning this repository

1. Fork this repository
2. Clone the forked repository to your computer

Task 3: Run the code on your computer

1. Enter the cloned directory
2. Run the code. If you need help, see Running the code.

Task 4: Make changes, commit and push them to Github

1. Modify src/index.jsx
2. Check what files have been changed (git status)
3. Add the changed files to staging area (git add <files_to_add>)
4. Make a commit with a comment of the changes (git commit -m "<commit_message>")
5. Save the changes to Github (git push)

Task 5: Create a Heroku account and run your code there

1. Try first yourself. If you need help, see Running this lesson in Heroku.

Tip: You will need to set development environment (NPM_CONFIG_PRODUCTION) and (PORT) to run it correctly.

Homework (easy): Learn git branching

1. Open https://learngitbranching.js.org/
2. From Introduction sequence click the button 1
3. Continue the tutorial. You are finished once it starts talking about rebasing.

Homework (hard): Connect your React-application to a Backend

The task is to write an application that collects a weather forecast from Eficode weather forecast.

The fetch function will be useful for this purpose.

1. Examine this example about state and the componentDidMount method: https://codelikethis.com/lessons/react/fetching-data
2. Display information about the weather on the page, for example the temperature of the first element on the list.
3. Finally release your application in Heroku

Running the code

What you will need

nodejs or docker.

Running with Node

• Install nodejs.
• Go to the project directory using a terminal / shell.
• Install dependencies npm install
• Run the app npm start
• Open browser in http://localhost:8000

Running with Docker

• Install docker.
• Go to the project directory using a terminal / shell.
• Build the app docker-compose build (this is an optional step on the first time)
• Run the app docker-compose up
• Open browser in http://localhost:8000

Running this lesson in Heroku

1. Install heroku cli
2. Login to heroku on command line: heroku login
3. Create a new app. If name is left blank, heroku will generate one for you: heroku create <name>

   This will also add a new remote called heroku to your local git repository

4. See that heroku created a remote repository for you: git remote -v.
5. Tell heroku to install dependencies for development use: heroku config:set NPM_CONFIG_PRODUCTION=false
6. Tell the application to use port 80 instead of 8080: heroku config:set PORT=80
7. Push your code to heroku: git push heroku master
8. Open the website: https://<your app name>.herokuapp.com/