π Click here to see on browser
What's used in this app ? | How use third party libraries | Author |
---|---|---|
lifting state up | Take a look at my portfolio | |
useState() Hook | Visit me on Linkedin | |
react-events | ||
React-Conditional rendering | ||
React-Bootstrap | npm i / yarn add react-bootstrap bootstrap | |
React-icons | npm i / yarn add react-icons | |
props-drilling | ||
Semantic-Commits | ||
Deploy with Netlify |
yarn create react-app . or npx create-react-app .
yarn add sass or npm i sass
- App.test.js
- reportWebVitals.js
- setupTests.js
- favicon.ico
- logo192.png
- logo512.png
- manifest.json
- robots.txt
yarn start or npm start
OR
-
Clone the Repo
git clone
-
Install NPM packages
npm install or yarn
-
Run the project
npm start or yarn start
-
Open the project on your browser
http://localhost:3000/
React Restaurant Appoinment App (folder)
|
|----readme.md
|
βββ public
β βββ index.html
βββ src
β βββ components
β β βββ AddModal.jsx
β β β
β β βββ Appointment.jsx.jsx
β β β
β β βββ Restaurant.jsx
β β
β βββββββpages
β β βββ Home.jsx
β β
β βββββββhelper
β β βββ data.jsx
β β
β βββ App.js
β βββ index.js
β βββ index.css
βββ package.json
βββ yarn.lock
-
Lifting state up
-
conditional rendering + cconditional Css
-
tiklananin id sine gΓΆre objenin icindeki boolean degeri degiline cevirme toggle yapma
setApps( apps.map((item) => item.id === id ? { ...item, consulted: !item.consulted } : item ) ); };
-
tiklananin id sine gΓΆre filter ile silme
const handleDelete = (id) => {{ setApps(apps.filter((item) => item.id !== id)); };
-
Css ::after
.consulted::after { content: "CONSULTED"; background-color: rgb(166, 18, 189); color: white; font-size: 2rem; border-radius: 1rem; position: absolute; left: 50%; top: 50%; padding: 0.5rem; transform: translate(-50%, -50%); }
-
Semantic Commit Messages See how a minor change to your commit message style can make you a better programmer.
Format: ():
is optional
- Example
feat: add hat wobble ^--^ ^------------^ | | | +-> Summary in present tense. | +-------> Type: chore, docs, feat, fix, refactor, style, or test.
-
More Examples: -
feat
: (new feature for the user, not a new feature for build script) -fix
: (bug fix for the user, not a fix to a build script) -docs
: (changes to the documentation) -style
: (formatting, missing semi colons, etc; no production code change) -refactor
: (refactoring production code, eg. renaming a variable) -test
: (adding missing tests, refactoring tests; no production code change) -chore
: (updating grunt tasks etc; no production code change)
I value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out. I'm always open to collaboration and welcome the opportunity to work on exciting projects together. Thank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!
β Happy Coding β