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.
- Install Git-bash for Windows from https://gitforwindows.org/
- Create an account on Github
- 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/
- Set your user information in your Git configuration
- Fork this repository
- Clone the forked repository to your computer
- Enter the cloned directory
- Run the code. If you need help, see Running the code.
- Modify src/index.jsx
- Check what files have been changed (
git status
) - Add the changed files to staging area (
git add <files_to_add>
) - Make a commit with a comment of the changes (
git commit -m "<commit_message>"
) - Save the changes to Github (
git push
)
Steps:
- Go to Vercel and create an account linked with you GitHub account. Give Vercel access to at least your fork of this lesson 2 repository.
- To deploy your application, go to
Import Git Repository
and clickImport
next to lesson2-react-template. - Open the
Build and Output Settings
and check theOVERRIDE
switch next toOutput Directory
. Writedist
in the text input field. - Press deploy!
- Open https://learngitbranching.js.org/
- From Introduction sequence click the button 1
- Continue the tutorial. You are finished once it starts talking about rebasing.
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.
- Examine this example about state and the
componentDidMount
method: https://codelikethis.com/lessons/react/fetching-data - Display information about the weather on the page, for example the temperature of the first element on the list.
- Finally release your application in Heroku
- Install nodejs.
- Go to the project directory using a terminal / shell.
- Install dependencies
npm install
- Run the app
npm start
- Open browser in https://localhost:8000