Crypto Stock Compare

This repository was created to go along with my React Crypo Stock Compare tutorial to help you learn the basics of React JS.

Want to do the tutorial?

If you want to get started following along from with the tutorial then follow these steps:

Step 1: Install NodeJS and Git

If you don't already have them installed then you can find them here:

• Git
• Note

Step 2: Clone the repo

You need to get the code to start with so run the following:

git clone https://github.com/sethreidnz/crypto-stock-compare

Step 3: Install the NPM packages needed

From the directory where you ran the git clone command run the following two commands to install the npm packages the project needs:

cd crypto-stock-compare
npm install 

Step 4: Checkout the start branch

The master branch (the default branch) contains the final code, so run the following to change into the start branch to get started:

git checkout start

Step 5: Go back to the tutorial

Now you are ready for React Crypo Stock Compare the tutorial!

Overview

The tutorial is split into multiple parts each covering a simple but important part of building a web app with React. You can find the finished code for each step in a branch with the corresponding name in brackets.

• Part 1: Introduction (start)
• Part 2: Creating a basic component (creating-basic-component)
• Part 3: Splitting components up (splitting-components)
• Part 4: Using props to pass values and functions to sub-components (using-props)
• Part 5: Using state to manage fetching data from an API (using-state-for-api-requests)
• Part 6: Creating a new pages with React Router (react-router)

The intention of this repository and tutorial is to act as a guide to help you get your head around the basics of the sorts of things you need to do in a react app

Getting start

npm install

First you will need to install the npm packages. From the root directory of the project run:

npm install

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!