React Props Starter

Report Bug · Request Feature

Table of Contents

• About This Repo
• GitHub Setup
• Local Setup
• Instructions

About This Repo

👹 We will be building a Mythical Creature application with a form and a list in separate components using React and passing Props!

Props allow parent components in React to pass data down to child components as a way of customizing them. They allow you to make components reusable and build complex UIs in React.

🔝 back to top

GitHub Setup

• Create Repo from Use Template:

  • Click HERE or the Use Template button in this repo to create a new repo.
  • Ensure Include all branches is left unchecked.
  • Specify your username and repo name appropriately.
  • Provide a description for the repo (optional).
  • Set the repo as Public.
  • Click Create repository.

🔝 back to top

Local Setup

• Clone your Repo:

  • Click the <> Code button in this repo and choose SSH.
  • Copy the URL. It should look something like: git@github.com:YOUR-USERNAME/YOUR-REPO-NAME.git.
  • In your terminal, navigate to the directory where you want to clone this repo.
  • Execute git clone git@github.com:YOUR-USERNAME/YOUR-REPO-NAME.git, replacing the placeholders with actual values.

• Create Database in PostgreSQL (using Postico):

  • Create a database named react-props-starter-db in Postico with the values in your pool.js file.
  • Copy and paste the content from your database.sql into your PostgreSQL database.
  • Run the queries in the new database to populate your tables with data.

• Install Node Dependencies:

  • In the terminal, navigate to the folder you cloned this repo and run the following:

    npm install

🔝 back to top

Instructions

• Start the application:

  • In the terminal, run the following to start the server:

    npm run server

  • In a second terminal, run the following to start the client:

    npm run client

The UI should open in your default web browser to the correct URL. If not, open localhost:5173 in your web browser.

NOTE: The key combination ctrl-c will stop your server/client from running. Whichever current Node.js process is running in that terminal will stop on macOS.

Follow along with your instructor to create a splendid Mythical Creature application! Happy Priming!

🔝 back to top