Run this to make it avaliable on your local machine
git clone https://github.com/rohitpatil03/Learning-ReactJS-Projects.git
cd Learning-ReactJS-Projects
cd 01-birthday-reminder/setup
npm install
npm start
This is the basic project made for begineer
In this project an array of data is given in the data.js file
we just have to use the data from data.js file and show the output on the screen
Also add a clear button at the end of the list
To add the data on the webpage we genrally use map function and de-structure the list and show the important elements on the webpage by returning it
Now we can add clear button
So to add the functionallity to the clear button we can use useState hook to empty the people variable by just using setPeople([]). beacause of this now the people variable is a empty string. thus nothing is shown on the webpage.
This is also one of the basic project for the begineer
In this project an array of data is fetch from the one of the api used in App.js
This is project which can help developer to understand how to use components and proper de-structure the data aquired from the api
"NOT INTERESTED" button is used to remove the specific tour from the list of the tours
Also when the tours list is empty "REFRESH" button is used to repeat the same process and the list of tours pops up
In this project we learn about how to use icons in our programs
Icons can we used as the componets in the react
We just have to import the icon from the libaray "react-icons".I have used icons from the fontawsome library as using "react-icons/fa"
Also there is a "Surprise Me" button which random select any person and show on the screen
It is a very simple project and it can be used in a website as FAQs section.
In this project we can click on the "PLUS" button to show the answer of the question.
And on clicking on the "MINUS" button we can hide the solution of the question.
In this project I tried to make menu with different Categories in it
There are 4 categories namely "ALL", "BREAKFAST", "LUNCH", "SHAKES". By using filter function we can seprate by data by categories
Also in data.js the data object has categories arrtibute
As the project name is clear, I tried to make Tabs using ReactJS
The most hard part in this project for me was, how we can dynamically change the className.It is generally done by ` Write the condition inside me ` and then we can write condition in it.
Other things were quite familar for me as other things are previous covered in the above projects
I tired to make a slider component using ReactJS
This project uses high level of CSS as we try to hide other sildes using css and show them with the help of changing the className in ReactJS
ReactJS is used to dynamically change the className for different slides
Tried to recreate lorem-ipsum thing which is used in Visual Studio Code
Just type the number of paragraph you want and the paragraph will appear on the screen
Actually we are getting the data from the data.js and show it on the screen
This project is made to find the shades and tints of a particular colour
In this project value.js file is used to find shades and tints of a colour. It return a array of shades and tints
After that ReactJS is used to arrage the data which is returned by the value.js file
This project is similar to a To-Do list project. Just the theme has been changed
This is a simple project and it can said that we have covered everthing from using the hooks to setting up the setTimeout function in the useEffect() hook
the setTimeout function is used to for the modal to show and vanish again
It is the basic navigation bar Component
It consist of the logo and links for the navigation.
It is also responsive in nature
It is also a navigational component
We mainly try to use useContext hook to make it possible
Also modal is added to make the main page somewhat active to show that we can add muiltiple components on a single page
This is a clone of the navigational component of the stripe website
It is the combination of the above two projects
Also we have added the submenus on the navigational component to replicate the stripe website
Tried to replicate the CART
It is mainly made by useReducer hook in reactjs for the state management
it has the following features
-- Total Item
-- Total Amount
-- Increase Item
-- Decrease Item
Cocktail Menu is made from the api suupport which is provided in the context.js
The searching of the cocktail by a single letter is possile because we try to fetch the api by searching the term in the url itself
We also used the router and link and other react-router libaray stuff
It can show live changes of a markdown file
React has its own markdown in 'react-markdown' file
Just import the 'react-markdown' file and pass the text in it
This is a simple project based on api data fetching
The api is given in the context.js file
It is used to fetch data and then display the data on the webpage
Also a simple animation is created by anime.js library
This is a navigation UI for navigating between pages
It is a simple project based on some simple context we have learned in the above projects
It has a toggle feature between dark mode and light mode. It also can store the favorite mode of the user
The toggle is done by the useState feature and the class is changed according to the state of the usestate
It can also store favorite mode of the user with the help of the localStorage on browser
Hacker news is fetch from the API and displayed with the help of ReactJS
useReducer is used for state manegement
It is easy project and use some css to mention it on the webpage
