https://github.com/adrianaceric/first-react-app
my first web app using React! (Counts number of dishes).
https://github.com/adrianaceric/first-react-app
react webapp
Last synced: about 2 months ago
JSON representation
my first web app using React! (Counts number of dishes).
- Host: GitHub
- URL: https://github.com/adrianaceric/first-react-app
- Owner: AdrianaCeric
- Created: 2021-05-15T16:26:20.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-02-27T18:47:03.000Z (over 4 years ago)
- Last Synced: 2025-03-26T04:12:02.783Z (about 1 year ago)
- Topics: react, webapp
- Language: JavaScript
- Homepage: https://dish-counter.netlify.app/
- Size: 20.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# First web app using React ⚛️
I had a lot of fun learning this!
-----
### Inspiration
This app was created along with the Intro to React workshop by [Leslie Xin](https://github.com/lesliexin) at [Hack The North 2020++](https://hackthenorth.com/)
### Components
In this project, there are two components: app and dish. The following component tree is a really good way to visualize the flow of data within throughout the parent and children components. Each dish will have a unique name and count.
- Props are the parameters/arguments that a function recieves. In this case, the parent, "App", transfers the "name" parameter to the children, "Dish." Cannot be changed.
- State is also data that belongs to the component, but is **local to each instance of a component** meaning that each dish will have its own unique count. Can be changed.
### What are React Hooks?? ⚓
In React, hooks are simply methods that allow you to create React Components without writing a class. This alleviates the need for constructors, and the annoying `this.` that you have to append to any property of the class.
--------------------
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).