https://github.com/sachuverma/react-basic-projects

basic react web-apps using hooks for beginners
https://github.com/sachuverma/react-basic-projects

react-components react-hooks reactjs

Last synced: 11 months ago
JSON representation

basic react web-apps using hooks for beginners

• Host: GitHub
• URL: https://github.com/sachuverma/react-basic-projects
• Owner: sachuverma
• License: mit
• Created: 2021-01-12T07:28:51.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-01-18T10:42:04.000Z (almost 5 years ago)
• Last Synced: 2024-12-31T10:32:49.894Z (about 1 year ago)
• Topics: react-components, react-hooks, reactjs
• Language: JavaScript
• Homepage:
• Size: 8.51 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


[![Contributors][contributors-shield]][contributors-url]

[![Forks][forks-shield]][forks-url]

[![Stargazers][stars-shield]][stars-url]

[![Issues][issues-shield]][issues-url]

[![MIT License][license-shield]][license-url]

[![LinkedIn][linkedin-shield]][linkedin-url]






  

    

  

  
React Beginners Projects

  
Hosted Here!


  


    beginner's projects guide using react hooks 

    


    Explore the code »

    


    


    View Demo

    ·

    Report Bug

    ·

    Request Feature

  


  Table of Contents

  


    


      About The Project

      


        
Built With

      

    

    


      Getting Started

      


        
Prerequisites

        
Installation

      

    

    
Usage

    
Roadmap

    
Contributing

    
License

    
Contact

    
Acknowledgements

  





There are many great README templates available on GitHub, however, I didn't find one that really suit my needs so I created this enhanced one. I want to create a README template so amazing that it'll be the last one you ever need -- I think this is it.

Here's why:

* Your time should be focused on creating something amazing. A project that solves a problem and helps others

* You shouldn't be doing the same tasks over and over like creating a README from scratch

* You should element DRY principles to the rest of your life :smile:

Of course, no one template will serve all projects since your needs may be different. So I'll be adding more in the near future. You may also suggest changes by forking this repo and creating a pull request or opening an issue. Thanks to all the people have have contributed to expanding this template!

A list of commonly used resources that I find helpful are listed in the acknowledgements.

### Built With

This section should list any major frameworks that you built your project using. Leave any add-ons/plugins for the acknowledgements section. Here are a few examples.

* [Bootstrap](https://getbootstrap.com)

* [JQuery](https://jquery.com)

* [Laravel](https://laravel.com)

## Getting Started

This is an example of how you may give instructions on setting up your project locally.

To get a local copy up and running follow these simple example steps.




### Prerequisites

This is an example of how to list things you need to use the software and how to install them.

* npm

  ```sh

  npm install npm@latest -g

  ```




### Installation

1. Get a free API Key at [https://example.com](https://example.com)

2. Clone the repo

   ```sh

   git clone https://github.com/your_username_/Project-Name.git

   ```

3. Install NPM packages

   ```sh

   npm install

   ```

4. Enter your API in `config.js`

   ```JS

   const API_KEY = 'ENTER YOUR API';

   ```




# Projects

## 1. Book List 

  


    

  


  - [Deployed Here](https://basic-booklist.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install && npm start` to install all dependencies and start project on development server  

  - Hooks used `none`

  - `index.js` return *BookList* component which contains all books iterated one by one using *Book* component

  - books data is predefined in `books.js` file as array of objects




## 2. Birthday Reminder

  


    

  


  - [Deployed Here](https://react-birthdayremainder.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server

  - Hooks used

    - useState  

  - *App* component render lists of persons using *List* component which maps each person from `data.js`

  - *removePerson* function filters out the respective person from the list




## 3. Tours List

  


    

  


  - [Deployed Here](https://react-tourlist.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server

  - Hooks used

    - useState

    - useEffect

  - *App* component displays loading state using *Loading* component while fetching data from the api

  - When tours data is empty corresponding message will be displayed

  - *Tours* component iterates over all tours fetched from api using *Tour* component

  - A particular tour can also be remove from list using *removeTour* function 




## 4. Our Reviews 

  


    

  


  - [Deployed Here](https://react-reviewlist.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server 

  - Hooks used

    - useState

  - *App* component renders all reviews in card form using *Review* component which can be changed using navigation arrow buttons or a random user is dislayed using *surprise me* button

  - react icons are used for using arrow button

  - reviews data is fetched from `data.js`




## 5. Accordian

  


    

  


  - [Deployed Here](https://react-faqaccordian.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server

  - Hooks used

    - useState

  - *App* component renders each question using *Question* component

  - *Question* component can display info depending on state  

  - questions data is fetched from `data.js`

  




## 6. Menu Items

  


    

  


  - [Deployed Here](https://react-menuitems.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server 

  - Hooks used

    - useState

  - *App* component renders *Categories* and *Menu* components

  - *Menu* component renders all the items and *Category* component filters out the items from the array

  - all items are present in `data.js` 




## 7. Tabs

  


    

  


  - [Deployed Here](https://react-tabitems.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server 

  - Hooks used

    - useState

    - use Effect

  - *App* component fetches data from api and displays loading logo while fetching and displays items in tab form 

  - tabs can be switched by selecting the corresponding title for each item




## 7. Slider

  


    

  


  - [Deployed Here](https://react-slideritems.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server 

  - Hooks used

    - useState

    - useEffect

  - *App* component renders feedbacks in card forms which can slide automatically or using array buttons

  - feedback data is fetched from `data.js` 




## 8. Lorem Ipsum

  


    

  


  - [Deployed Here](https://react-loremipsum.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server

  - Hooks used

    - useState

  - *App* component generates custom numbers of paragraphs of random text specified by user

  - It minimum generates 1 paragraph

  - paragraph data is fetched from `data.js` 




## 9. Color Generator

  


    

  


  - [Deployed Here](https://react-colorgenerate.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server 

  - Hooks used

    - useState

    - useEffect

  - *App* component renders 10 light and dark shades of a given hex color using `values.js` library

  - each color is displayed using *SingleColor* component 

  - color hex values can be copied to clipboard on clicking over the respective color




## 10. Grocery List

  


    

  


  - [Deployed Here](https://react-grocerylist.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server 

  - Hooks used

    - useState

    - useEffect

  - user can add, edit, remove items from the list

  - *App* component renders the *Alert* messages and *List* component which maps all items

  




## 11. Navbar

  


    

  


  - [Deployed Here](https://react-navigation-bar.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server 

  - Hooks used

    - useState

    - useEffect

    - useRef

  - *App* component renders *Navbar* component which displays all the links/urls present in `data.js`




## 12. Sidebar Modal

  


    

  


  - [Deployed Here](https://react-modal-side-bar.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server 

  - Hooks used

    - useState

    - useContext

  - *App* component renders *Modal* and *Sidebar* components

  - `context.js` is used to pass context to each component 




## 13. Stripe Menu

  


    

  


  - [Deployed Here](https://react-stripe-submenu-sidebar.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server 

  - Hooks used

    - useState

    - useEffect

    - useRef

    - useContext

  - *App* component renders *Navbar* *Sidebar* *Submenu* *Hero* components

  - `data.js` contains data for links, sublinks




## 14. Cart Page

  


    

  


  - [Deployed Here](https://react-cart-page.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server 

  - Hooks used

    - useState

    - useEffect

    - useContext

    - useReducer

  - *App* component renders *Navbar* and *CartContainer* components

  - *CartContainer* contains lists of *CartItems* fetched from api and their quantities can be changed using buttons provided

  - `reducer.js` handles all the actions dispatched




## 15. Cocktails

  


    

  


  - [Deployed Here](https://react-cock-tails.netlify.app/)

  - Installation Steps

    - clone the project using `git clone` command and using terminal in project directory

    - run `npm install` to install all dependencies and

    - `npm start` to start project on development server 

  - Hooks used

    - useState

    - useEffect

    - useParams

  - *App* component routes all the pages using ***ReactRouter***

  - search input is taken and results are fetched from API and list is displayed

  - single cocktail details are fetched from API

  - components contains all components *CocktailList* *Cocktail* *Loading* *Navbar* *SearchForm*

  - pages contains *About* *Error* *Home* *SingleCocktail* page

  




## Usage

Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.

_For more examples, please refer to the [Documentation](https://example.com)_

## Roadmap

See the [open issues](https://github.com/sachuverma/React-Basic-Projects/issues) for a list of proposed features (and known issues).

## Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project

2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)

3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the Branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request

## License

Distributed under the MIT License. See `LICENSE` for more information.

## Contact

Your Name - [@your_twitter](https://twitter.com/sachuverma) - email@example.com

Project Link: [https://github.com/sachuverma/React-Basic-Projects](https://github.com/sachuverma/React-Basic-Projects)

## Acknowledgements

* [GitHub Emoji Cheat Sheet](https://www.webpagefx.com/tools/emoji-cheat-sheet)

* [Img Shields](https://shields.io)

* [Choose an Open Source License](https://choosealicense.com)

* [GitHub Pages](https://pages.github.com)

* [Animate.css](https://daneden.github.io/animate.css)

* [Loaders.css](https://connoratherton.com/loaders)

* [Slick Carousel](https://kenwheeler.github.io/slick)

* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)

* [Sticky Kit](http://leafo.net/sticky-kit)

* [JVectorMap](http://jvectormap.com)

* [Font Awesome](https://fontawesome.com)

[contributors-shield]: https://img.shields.io/github/contributors/sachuverma/React-Basic-Projects.svg?style=for-the-badge

[contributors-url]: https://github.com/sachuverma/React-Basic-Projects/graphs/contributors

[forks-shield]: https://img.shields.io/github/forks/sachuverma/React-Basic-Projects.svg?style=for-the-badge

[forks-url]: https://github.com/sachuverma/React-Basic-Projects/network/members

[stars-shield]: https://img.shields.io/github/stars/sachuverma/React-Basic-Projects.svg?style=for-the-badge

[stars-url]: https://github.com/sachuverma/React-Basic-Projects/stargazers

[issues-shield]: https://img.shields.io/github/issues/sachuverma/React-Basic-Projects.svg?style=for-the-badge

[issues-url]: https://github.com/sachuverma/React-Basic-Projects/issues

[license-shield]: https://img.shields.io/github/license/sachuverma/React-Basic-Projects.svg?style=for-the-badge

[license-url]: https://github.com/sachuverma/React-Basic-Projects/blob/master/LICENSE

[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555

[linkedin-url]: https://linkedin.com/in/sachuverma

[product-screenshot]: images/screenshot.png