React Template

See Live Demo of this Template

This template includes all the dependencies and set up needed for you to work within defined code standards and structure to get you up and running quickly.

Topics

• Get Started
• Starting the Project
• Other important tidbits
  • React Dev Tools
  • Using axios
  • Deploying on Netlify

---

Get Started

Use Template

1. To get started, click the GREEN "Use this Template" button at the top of the repo

2. Make sure YOUR github account is selected in the dropdown and name your project

3. Clone your new repo to your local machine
4. Go to the NEXT section

Starting the Project

1. Open the package.json file and change the name property to the name of your application, and author to your name
2. Open the /public/index.html file and change the title attribute to the name of your application
3. Rename the .env.local.sample file to .env.local file. The final file name should be .env.local
4. From your command line, be in the root directory and run npm install OR npm i for short
5. From your command line, be in the root directory and run npx husky install
6. To start your application, run npm start

If you see this, you are set to go!

NOTES:

• Changes you make to the project will make the browser reload on save...no more hard refresh unless something goes wrong.

Other Important Tidbits

React Dev Tools

From this time forward, you will be expected to have a clean console in order for your assignments to be approved. Use React Developer Tools Chrome Extension to help with debugging.

Including Images with React

If you have a folder of local images that you want to load into your code things get a little strange with webpack. Remember the only way webpack knows about assets is if they are imported into your javascript files. Even our CSS is not added until those files are imported into our javascript files. Below is some sample code for how to load a local image file into your project

import cat from './assets/cat.jpg';

<>
  <img src=${cat} alt="picture of a cat"/>
</>

Using Axios

For every file you will need to make an API request in, you will need to import Axios

import axios from 'axios';

const examplePromise = () => {
  axios.get('http://localhost:3001/example')
    .then((data) => {
      console.warn(data);
    })
    .catch((error) => {
      console.error(error);
    });
});

Deploying on Netlify

• Build Command: yarn build
• Publish directory: build
• Add Environmental Variables (NOT REQUIRED for Apps that do not use API Keys, etc)
  • Any Enviromental variables you are using in your .env.local file should be added to Netlify.
    • Go to Site settings > Build & deploy > Environment > Environment variables and the keys and values there.
• Update Firebase URL Settings
  • In Firebase under Authentication select sign in methods, scroll to Authorized domains. Add your Netlify URL.

Your own learning

If you are interested in setting up your own project for things outside of class, you can run the command to start a React project npx create-react-app {APP_NAME} and setup all the files and structures from scratch.