├── .gitignore ├── Blogs ├── 01.StoryOfReact.md ├── 02.HowToStartReactApp.md ├── 03.Components.md ├── 04.JSX.md ├── 05.StateHooks.md ├── 06.TwoWayBinding.md ├── 07.StateLiftingUp.md ├── 08.RenderingUpdatingConditionaling_Lists.md ├── 09.DynamicScopying_CSS.md ├── 10.DebuggingWays.md ├── 11.ReactFragments.md ├── 12.ReactPortals.md ├── 13.useRef()Hook.md ├── 14.useEffectHook.md ├── 15.useReducer()Hook.md ├── 16.comboOFuseEffectAnduseReducer.md ├── 17.useContext()Hook.md ├── 18.React.memo().md ├── 19.useCallback()Hook.md ├── 20.StateSecduling.md ├── 21.useMemo()Hook.md ├── 22.Frontend-Backend-Communication.md ├── 23.CustomHooks.md ├── ReactForms.md └── ReactRouter.md ├── EssentailCommands.md ├── License.md ├── Projects ├── AddUser │ ├── Screenshot from 2023-01-01 01-51-23.png │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ └── static │ │ │ ├── css │ │ │ ├── main.dce1127a.chunk.css │ │ │ └── main.dce1127a.chunk.css.map │ │ │ └── js │ │ │ ├── 2.14e73586.chunk.js │ │ │ ├── 2.14e73586.chunk.js.LICENSE.txt │ │ │ ├── 2.14e73586.chunk.js.map │ │ │ ├── main.6377feb0.chunk.js │ │ │ ├── main.6377feb0.chunk.js.map │ │ │ ├── runtime-main.36ce5d8f.js │ │ │ └── runtime-main.36ce5d8f.js.map │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── readme.md │ └── src │ │ ├── App.js │ │ ├── App.module.css │ │ ├── Components │ │ ├── AddUserForm.js │ │ ├── AddUserForm.module.css │ │ ├── AddedUser.js │ │ ├── UpdateWindow.js │ │ ├── UpdateWindow.module.css │ │ ├── UserInfo.js │ │ └── UserInfo.module.css │ │ ├── UI │ │ ├── ModelWindow.js │ │ └── ModelWindow.module.css │ │ ├── index.css │ │ └── index.js ├── Create-Read-React-Frontend-Backend-Communication │ ├── Screenshot from 2023-01-14 18-35-59.png │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── readme.md │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── components │ │ ├── AddMovie.js │ │ ├── AddMovie.module.css │ │ ├── Movie.js │ │ ├── Movie.module.css │ │ ├── MoviesList.js │ │ └── MoviesList.module.css │ │ ├── index.css │ │ └── index.js ├── Expense_Tracker │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── readme.md │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── Chart │ │ │ ├── Chart.css │ │ │ ├── Chart.js │ │ │ ├── ChartBar.css │ │ │ └── ChartBar.js │ │ ├── Expenses │ │ │ ├── ExpenseChart.js │ │ │ ├── ExpenseDate.css │ │ │ ├── ExpenseDate.js │ │ │ ├── ExpenseFilter.css │ │ │ ├── ExpenseFilter.js │ │ │ ├── ExpenseITem.js │ │ │ ├── ExpenseItem.css │ │ │ ├── Expenses.css │ │ │ ├── Expenses.js │ │ │ ├── ExpensesList.css │ │ │ └── ExpensesList.js │ │ ├── NewExpense │ │ │ ├── ExpenseForm.css │ │ │ ├── ExpenseForm.js │ │ │ ├── NewExpense.css │ │ │ └── NewExpense.js │ │ └── UI │ │ │ ├── Card.css │ │ │ └── Card.js │ │ ├── index.css │ │ └── index.js ├── Firebase Custom Hooks Task Manager │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── components │ │ ├── NewTask │ │ │ ├── NewTask.js │ │ │ ├── TaskForm.js │ │ │ └── TaskForm.module.css │ │ ├── Tasks │ │ │ ├── TaskItem.js │ │ │ ├── TaskItem.module.css │ │ │ ├── Tasks.js │ │ │ └── Tasks.module.css │ │ └── UI │ │ │ ├── Section.js │ │ │ └── Section.module.css │ │ ├── hooks │ │ └── use-http.js │ │ ├── index.css │ │ └── index.js ├── Food Ordering App │ ├── Screenshot from 2023-01-14 18-26-26.png │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ ├── readme.md │ └── src │ │ ├── App.js │ │ ├── Assets │ │ └── meals.jpg │ │ ├── Components │ │ ├── Cart │ │ │ ├── Cart.js │ │ │ ├── Cart.module.css │ │ │ ├── CartIcon.js │ │ │ ├── CartItem.js │ │ │ └── CartItem.module.css │ │ ├── Layout │ │ │ ├── Header.js │ │ │ ├── Header.module.css │ │ │ ├── HeaderCartButton.js │ │ │ └── HeaderCartButton.module.css │ │ ├── Meals │ │ │ ├── AvailableMeals.js │ │ │ ├── AvailableMeals.module.css │ │ │ ├── MealItem │ │ │ │ ├── MealForm.js │ │ │ │ ├── MealForm.module.css │ │ │ │ ├── MealItem.js │ │ │ │ └── MealItem.module.css │ │ │ ├── Meals.js │ │ │ ├── MealsSummary.js │ │ │ └── MealsSummary.module.css │ │ └── UI │ │ │ ├── Card.js │ │ │ ├── Card.module.css │ │ │ ├── Input.js │ │ │ ├── Input.module.css │ │ │ ├── Model.js │ │ │ └── Model.module.css │ │ ├── Store │ │ ├── CartProvider.js │ │ └── cart-context.js │ │ ├── index.css │ │ └── index.js ├── FormValidation │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.js │ │ ├── Store │ │ └── auth-context.js │ │ ├── components │ │ ├── Home │ │ │ ├── Home.js │ │ │ └── Home.module.css │ │ ├── Login │ │ │ ├── Login.js │ │ │ └── Login.module.css │ │ ├── MainHeader │ │ │ ├── MainHeader.js │ │ │ ├── MainHeader.module.css │ │ │ ├── Navigation.js │ │ │ └── Navigation.module.css │ │ └── UI │ │ │ ├── Button │ │ │ ├── Button.js │ │ │ └── Button.module.css │ │ │ └── Card │ │ │ ├── Card.js │ │ │ └── Card.module.css │ │ ├── index.css │ │ └── index.js └── ToDo-App │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── readme.md │ └── src │ ├── App.css │ ├── App.js │ ├── components │ ├── CourseGoals │ │ ├── CourseGoalItem │ │ │ ├── CourseGoalItem.css │ │ │ └── CourseGoalItem.js │ │ ├── CourseGoalList │ │ │ ├── CourseGoalList.css │ │ │ └── CourseGoalList.js │ │ └── CourseInput │ │ │ ├── CourseInput.js │ │ │ └── CourseInput.module.css │ └── UI │ │ └── Button │ │ ├── Button.js │ │ └── Button.module.css │ ├── index.css │ └── index.js ├── Readme.md ├── package-lock.json └── react-js-logo-no.jpg /.gitignore: -------------------------------------------------------------------------------- 1 | */node_modules/ 2 | */build/ 3 | node_modules 4 | -------------------------------------------------------------------------------- /Blogs/01.StoryOfReact.md: -------------------------------------------------------------------------------- 1 | # React 101: Understanding How It Works and Why It's Different from Other Frontend Frameworks 2 | 3 | >In this blog post, we'll dive into the inner workings of React, one of the most popular frontend frameworks for building web applications. We'll explore how React works behind the scenes and how it's different from other frontend frameworks like Angular and Vue. We'll also cover some of the key features and benefits of using React, and provide some helpful resources for learning more. Whether you're new to React or have some experience with it, this post will give you a better understanding of how it works and how it fits into the world of frontend development. 4 | 5 | ## Why we need react.js ? 6 | 7 | "In traditional JavaScript, we would have to manually write every piece of HTML tag and its corresponding functionality. However, in large applications like Netflix, we want smooth transitions without having to fetch and load new HTML files every time a user makes a request. To solve this problem, React introduces custom HTML components. These components can be written in a declarative rather than imperative style, allowing us to create reusable and modular code for our application." 8 | 9 | ## What are SPAs? 10 | 11 | "React JS allows us to build single page applications (SPAs). This means that when a user clicks on a link, rather than fetching a new HTML file from the server, React can dynamically update the JavaScript code to change what is displayed on the screen. Only the initial request needs to be made to the server, and subsequent actions do not require additional requests to be made." 12 | 13 | ## How React code actually loads behind the scenes? 14 | 15 | "In a React application, there is typically only one index.html file located in the public folder. This file is the only one that is loaded because React is a single page application. The index.html file contains a root `
` element, which can be accessed in the index.js file located in the src folder. This JavaScript file is only loaded when the application is initially loaded and it renders the ` `component, which serves as the root of all the other components in the application. The App.js file contains the code for the App component and any other components that are attached to it. These components are typically located in a separate components folder." 16 | 17 | ### How actually it works behind the scenes? 18 | 19 | Behind the scenes, React uses a system called the "virtual DOM" to efficiently update the DOM and minimize the number of actual DOM manipulations that need to be performed. When the state of a component changes, React will compare the virtual DOM representation of the updated component to the previous version, and only make the necessary changes to the actual DOM. 20 | 21 | ## Difference between react.js , vue.js and angular.js? 22 | 23 | "React is a component-based framework that relies on community libraries to provide additional features. Angular is also component-based, but it has a larger feature set built into the framework itself and uses TypeScript. Vue.js is a component-based framework that falls somewhere in between React and Angular in terms of its reliance on external libraries and features." 24 | -------------------------------------------------------------------------------- /Blogs/02.HowToStartReactApp.md: -------------------------------------------------------------------------------- 1 | # Get Up and Running with Your First React App: A Step-by-Step Guide 2 | 3 | >In this blog post, we'll walk through the process of setting up and starting a new React app from scratch. Whether you're a beginner or an experienced developer, this step-by-step guide will provide you with the information you need to get started with your first React app project. We'll cover topics like installing the necessary tools, creating a new project, and adding features and components to your app. By the end of this post, you'll have a solid foundation for building your own React app and you'll be ready to take your skills to the next level. 4 | 5 | 1. **Install Node.js**: React is built using JavaScript, so you'll need to have Node.js installed on your computer to run React apps. You can download and install Node.js from the official [website](https://nodejs.org/) or using a package manager like [Homebrew](https://brew.sh/) (for macOS) or [Chocolatey](https://chocolatey.org/) (for Windows). 6 | 7 | 2. **Install the React CLI**: The React command-line interface (CLI) is a tool that allows you to create and manage React projects. To install the React CLI, open a terminal and run the following command: 8 | 9 | ```sh 10 | npm install -g react-cli 11 | 12 | ``` 13 | 14 | 3. **Create a new project**: Once you have the React CLI installed, you can create a new React project by running the following command: 15 | 16 | This will create a new directory called "my-app" with the basic structure and files needed for a React app. 17 | 18 | 4. **Install dependencies**: Navigate to the project directory and run the following command to install the required dependencies: 19 | 20 | ```sh 21 | npm install 22 | 23 | ``` 24 | 25 | 5. **Start the development server**: Once the dependencies have been installed, you can start the development server by running the following command: 26 | 27 | ```sh 28 | npm start 29 | 30 | ``` 31 | 32 | This will start the development server and open a new browser window with your React app. Any changes you make to the code will be automatically reflected in the browser. 33 | 34 | ## Conclusion 35 | 36 | - Go to the folder 37 | - Open the terminal in that folder 38 | - Run these commands 39 | 40 | ```sh 41 | npm init react-app my-app 42 | cd my-app 43 | npm start 44 | ``` 45 | -------------------------------------------------------------------------------- /Blogs/03.Components.md: -------------------------------------------------------------------------------- 1 | # An introduction to understanding components and how they work in React 2 | 3 | >In this blog post, we'll explore the concept of components in React, one of the fundamental building blocks of modern web development. We'll look at what components are, how they work, and how they can be used to build reusable and scalable web applications. Whether you're new to React or have some experience with it, this post will give you a deeper understanding of how components work and how they fit into the React ecosystem. 4 | 5 | ## What are the components in the React? 6 | 7 | "Components in React typically consist of a combination of HTML, JavaScript, and CSS. These components are designed for reuse and can be built from scratch or created by combining other components. They are essentially just JavaScript functions that return JSX, which is a syntax extension of JavaScript that allows you to write HTML-like code in your JavaScript files. Components are useful for creating modular and reusable code, and they can be an important tool for building and maintaining large applications." 8 | 9 | ## Components of a Component 10 | 11 | - Make a component >> src >> components 12 | - add css file by just importing 13 | - function name as a component name 14 | - function also contains a paramter object of pros 15 | - function can also contains some logic 16 | - contain a function return some JSX 17 | - use className="" 18 | - use javascript in JSX as a {} 19 | - Add aslo nested components(pass props.-- into its custom attribute) 20 | - JSX returing wrapper element never be a Component (Build Custom Wrapper Components) for this. 21 | 22 | ```js 23 | import React from "react"; 24 | 25 | function Message(props) { 26 | return

{props.text}

; 27 | } 28 | ``` 29 | -------------------------------------------------------------------------------- /Blogs/04.JSX.md: -------------------------------------------------------------------------------- 1 | # The Power of JSX: How It Makes Building Components in React a Breeze 2 | 3 | >In this blog post, we'll take a deep dive into JSX, the syntax extension used in React for defining components and rendering UI. We'll explore how JSX works with components in React, and how it allows you to write concise and expressive code for building web applications. 4 | 5 | ## What are JSX? 6 | 7 | "JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. It is essentially just HTML written in a JS file, and all the HTML is ultimately converted to XML. In other words, JSX is a sugar-coated version of HTML tags. You can see the underlying code in the main.js file through developer tools. 8 | 9 | In JSX components, there must be only one root element returned, not multiple root elements. It is important to note that JSX is not actually HTML, but rather a syntax developed by the React team to resemble HTML. If you need to add classes, you should use the className attribute instead of the class attribute." 10 | 11 | There are a few things to keep in mind when working with JSX: 12 | 13 | - You must wrap your JSX elements in a parent element, or you will get a syntax error. 14 | 15 | - You can use JavaScript expressions within JSX by enclosing them in curly braces. 16 | 17 | - You can use JSX elements as the children of other JSX elements, allowing you to build complex UI from smaller, reusable pieces. 18 | 19 | - You can use the React.createElement function to create JSX elements dynamically at runtime. 20 | 21 | ```js 22 | const element =

Hello, World!

; 23 | 24 | const element = ( 25 |
26 |

Hello, World!

27 |

This is a paragraph

28 |
29 | ); 30 | 31 | const element = ; 32 | 33 | const element = ( 34 |
    35 | {items.map((item) => ( 36 |
  • {item.name}
    • 37 | ))} 38 |
39 | ); 40 | ``` 41 | -------------------------------------------------------------------------------- /Blogs/05.StateHooks.md: -------------------------------------------------------------------------------- 1 | # State Management in React: A Comprehensive Guide 2 | 3 | > If you're new to React, you might be wondering what state is and how it fits into the picture. Or, if you're an experienced developer, you might be looking for ways to improve your state management skills. Either way, this post is for you. We'll cover everything you need to know about state in React, from the basics to advanced techniques and best practices. 4 | 5 | ## What is state in the react and What is the stateHook? 6 | 7 | useState is a hook in React that allows you to add state to functional components. Prior to the introduction of hooks, only class-based components could have state. 8 | 9 | Here's an example of how you might use useState in a functional component: 10 | 11 | ```js 12 | import { useState } from "react"; 13 | 14 | function Example() { 15 | // Declare a new state variable, which we'll call "count" 16 | const [count, setCount] = useState(0); 17 | 18 | return ( 19 |
20 |

You clicked {count} times

21 | 22 |
23 | ); 24 | } 25 | ``` 26 | 27 | In this example, we are using useState to create a state variable called count and a function called setCount that allows us to update the value of count. The initial value of count is passed as an argument to useState, which in this case is 0. 28 | 29 | When the button is clicked, the setCount function is called with the new value for count, which is the current value of count plus 1. This causes the component to re-render and the new value of count is displayed. 30 | 31 | Behind the scenes, useState is implemented using a concept called a "state hook." When the component is rendered, the state hook function creates a piece of state and a function for updating that state, and stores them in an array. The array destructuring syntax (const [count, setCount] = useState(0)) is used to extract the current value of the state (count) and the function for updating it (setCount) from the array. 32 | 33 | You can use useState multiple times in a single component to create multiple pieces of state. For example: 34 | 35 | ```js 36 | import { useState } from "react"; 37 | 38 | function Example() { 39 | const [count, setCount] = useState(0); 40 | const [name, setName] = useState("Alice"); 41 | 42 | return ( 43 |
44 |

You clicked {count} times

45 | 46 |

Your name is {name}

47 | 48 |
49 | ); 50 | } 51 | ``` 52 | -------------------------------------------------------------------------------- /Blogs/06.TwoWayBinding.md: -------------------------------------------------------------------------------- 1 | # Mastering Two-Way Binding: Tips and Techniques for Working with Data in Real-Time 2 | 3 | > Two-way binding is a powerful tool for building dynamic and interactive web applications. It allows you to bind data to UI elements in real-time, so that any changes to the data are immediately reflected in the UI and vice versa. In this post, we'll explore the ins and outs of two-way binding, including how to set it up, how to work with it, and how to use it to build reactive and responsive apps 4 | 5 | ## How we can add Two-Way Binding in react.js ? 6 | 7 | Two-way binding in React allows you to synchronize the value of a form element with the state of a component. This is often useful when you want to ensure that the user's input is valid and up-to-date. 8 | 9 | Here is an example of how to implement two-way binding in a React component: 10 | 11 | ```js 12 | import React, { useState } from "react"; 13 | 14 | function MyForm() { 15 | // Declare a state variable and set its initial value to the empty string 16 | const [value, setValue] = useState(""); 17 | 18 | // Handle changes to the input element 19 | const handleChange = (event) => { 20 | setValue(event.target.value); 21 | }; 22 | 23 | return ( 24 |
25 | 26 |
27 | ); 28 | } 29 | ``` 30 | 31 | In this example, we use the useState hook to create a state variable called value and a function called setValue to update it. The input element's value attribute is set to the current value of value, and the onChange event handler is used to update value when the user types into the input. 32 | 33 | This creates a two-way binding between the input element and the component's state, allowing the value of the input to be automatically updated as the user types, and the input to be automatically updated when the value of value changes. 34 | 35 | You can also use two-way binding with other form elements, such as textareas and select elements. Simply set the value attribute and use an onChange event handler to update the component's state. 36 | -------------------------------------------------------------------------------- /Blogs/07.StateLiftingUp.md: -------------------------------------------------------------------------------- 1 | # Data Flow in React: A Comprehensive Guide to Moving Data Between Components 2 | 3 | > One of the most powerful features of React is its ability to move data between components. In this post, we'll explore the different techniques you can use to pass data between components, including props, state, and context. We'll also cover best practices for managing data flow in a React application, and how to avoid common pitfalls 4 | 5 | ## How we can move data from Child-to-Parent Component Communication (Bottom-up) in React.js? 6 | 7 | Passing a callback function as a prop: You can pass a callback function as a prop to the child component, and have the child component invoke the callback function when it needs to communicate with the parent. For example: 8 | 9 | ```js 10 | // Parent component 11 | function Parent() { 12 | const handleDataFromChild = (data) => { 13 | // Do something with the data from the child component 14 | }; 15 | 16 | return ; 17 | } 18 | 19 | // Child component 20 | function Child(props) { 21 | const sendDataToParent = () => { 22 | props.onDataFromChild("Some data"); 23 | }; 24 | 25 | return ; 26 | } 27 | ``` 28 | 29 | In this example, the Parent component renders the Child component and passes a callback function called handleDataFromChild as a prop to the child. The Child component has a button that, when clicked, invokes the sendDataToParent function, which in turn calls the onDataFromChild callback function with some data as an argument. This causes the handleDataFromChild function in the parent component to be executed, and the data from the child is passed to the parent. 30 | 31 | This is a simple and effective way to move data from a child component to a parent component, but it can become cumbersome if you need to pass data from multiple children to the same parent, or if you need to pass data from a deeply nested child to a parent that is several levels up the component tree. In these cases, you might want to consider using a state management library or the context API. 32 | 33 | ## How we can achieve the lifting The State Up ? 34 | 35 | "Lifting the state up" is a technique for managing state in a React application that involves moving shared state from a child component to a parent component. This is often useful when multiple child components need to access and modify the same piece of state, as it allows you to avoid having to pass the state down the component tree as props. 36 | 37 | Here's an example of how to lift the state up: 38 | 39 | ```js 40 | import React, { useState } from "react"; 41 | 42 | function Parent() { 43 | // Declare a state variable and set its initial value 44 | const [value, setValue] = useState(""); 45 | 46 | // Pass the state and setter function down as props to the children 47 | return ( 48 |
49 | 50 | 51 |
52 | ); 53 | } 54 | 55 | function Child(props) { 56 | return ( 57 | props.setValue(event.target.value)} 60 | /> 61 | ); 62 | } 63 | 64 | function Sibling(props) { 65 | return

{props.value}

; 66 | } 67 | ``` 68 | 69 | In this example, the Parent component has a state variable called value that is shared by the Child and Sibling components. The Parent component passes the value and setValue functions down as props to the children, allowing them to both access and modify the shared state. 70 | 71 | By lifting the state up to the parent component, we can avoid having to pass the state down the component tree as props, and we can easily manage the shared state in one place. 72 | 73 | It's important to note that, while lifting the state up can be a useful technique for managing state, it can also lead to a deeper component tree and make it more difficult to understand the flow of data in your application. It's a good idea to carefully consider whether lifting the state up is the right approach for your use case. 74 | -------------------------------------------------------------------------------- /Blogs/08.RenderingUpdatingConditionaling_Lists.md: -------------------------------------------------------------------------------- 1 | # The Power of Lists: How to Render Them in React with Ease 2 | 3 | >If you're new to React, you might be wondering how to render lists in your components. Or, if you're an experienced developer, you might be looking for ways to improve your list rendering skills.We'll look at different techniques for rendering lists, including the map function, the for loop, and the useEffect hook. We'll also cover best practices for rendering lists in a React application, and how to optimize your code for performance. 4 | 5 | ## How we can render a list in React ? 6 | 7 | In React, you can render a list by using the map method on an array, and returning a JSX element for each item in the array. Here's an example of how you could render a list of numbers: 8 | 9 | ```js 10 | import React from "react"; 11 | 12 | function NumberList(props) { 13 | const numbers = [1, 2, 3, 4, 5]; 14 | const listItems = numbers.map((number) => ( 15 |
  • {number}
    • 16 | )); 17 | return
      {listItems}
    ; 18 | } 19 | ``` 20 | 21 | In this example, the map method iterates over the numbers array and creates a new array of li elements. The resulting array is then rendered as a ul element, with each li element representing an item in the list. 22 | 23 | It's important to note that each item in the list should have a unique key prop, which helps React identify which items have changed, been added, or been removed. In the example above, the key prop is set to the string version of the number. 24 | 25 | ## How we achieve the updated new array without losing previous data in it in react by using useState function? 26 | 27 | To update the state of an array in React without losing the previous data, you can use the useState hook and the spread operator (...). The useState hook allows you to add state to functional components, and the spread operator allows you to create a new copy of an array, rather than mutating the original array. 28 | 29 | Here's an example of how you could use useState and the spread operator to add an item to an array: 30 | 31 | ```js 32 | import { useState } from "react"; 33 | 34 | function Example() { 35 | const [items, setItems] = useState([]); 36 | 37 | const addItem = () => { 38 | setItems([...items, "new item"]); 39 | }; 40 | 41 | return ( 42 |
    43 | 44 |
      45 | {items.map((item, index) => ( 46 |
    • {item}
      • 47 | ))} 48 |
    49 |
    50 | ); 51 | } 52 | ``` 53 | 54 | In this example, the useState hook is used to add state to the Example component, with an initial value of an empty array. The addItem function creates a new copy of the items array using the spread operator, and adds a new item to the end of the array. The updated array is then passed to the setItems function, which updates the state of the items array. 55 | 56 | When the addItem function is called, the Example component will re-render, and the new item will be added to the list. This approach ensures that the previous data in the items array is not lost, and the state is updated in an immutable way. 57 | 58 | ## How we display the conditional content in React ? 59 | 60 | In React, you can display conditional content by using a combination of JavaScript and JSX. Here's an example of how you could use an if statement to conditionally render content: 61 | 62 | ```js 63 | import React from "react"; 64 | 65 | function Example(props) { 66 | const showContent = props.showContent; 67 | 68 | if (showContent) { 69 | return
    This content is visible
    ; 70 | } else { 71 | return
    This content is not visible
    ; 72 | } 73 | } 74 | ``` 75 | 76 | In this example, the Example component renders a div element with different content based on the value of the showContent prop. If the showContent prop is true, the component will render the first div element. If the showContent prop is false, the component will render the second div element. 77 | 78 | You can also use a ternary operator (?) to concisely render conditional content in a JSX expression: 79 | 80 | ```js 81 | import React from "react"; 82 | 83 | function Example(props) { 84 | const showContent = props.showContent; 85 | 86 | return ( 87 |
    88 | {showContent ? "This content is visible" : "This content is not visible"} 89 |
    90 | ); 91 | } 92 | ``` 93 | 94 | In this example, the JSX expression will evaluate the showContent prop and render the appropriate content based on its value. 95 | -------------------------------------------------------------------------------- /Blogs/10.DebuggingWays.md: -------------------------------------------------------------------------------- 1 | # The Art of Debugging in React: A Deep Dive into Best Practices and Common Pitfalls 2 | 3 | > If you're new to debugging in React, you might be wondering how to find and fix errors in your code. Or, if you're an experienced developer, you might be looking for ways to improve your debugging skills. Either way, this post is for you. We'll cover everything you need to know about debugging in React, from the basics to advanced techniques and best practices. By the end of this post, you'll be a pro at debugging your React apps. 4 | 5 | There are a few different tools and techniques you can use to debug and find errors 6 | 7 | ## These are the ways to add start Debugging 8 | 9 | 1. **JavaScript console**: You can use the JavaScript console in your web browser's developer tools to view error messages and log statements from your React code. To open the console in most web browsers, you can use the keyboard shortcut Ctrl + Shift + J (Windows) or Command + Option + J (Mac). 10 | 11 | 2. **React Developer Tools**: You can use the React Developer Tools browser extension to inspect the React components in your application and see their props and state. This can be helpful for understanding how your application is rendering and finding potential errors. 12 | 13 | 3. **Debugger statement**: You can use the debugger statement in your JavaScript code to pause the execution of your code and open the debugger in your web browser's developer tools. This can be useful for inspecting the state of your application and debugging specific parts of your code. 14 | 15 | 4. **Error boundaries**: You can use error boundaries in your React components to catch and handle errors that occur during rendering. This can help to prevent your application from crashing when an error occurs, and can make it easier to debug the error. 16 | 17 | 5. **Logging**: You can use console.log statements and other logging functions to output information about your application to the console. This can be helpful for understanding how your code is executing and finding potential errors. 18 | -------------------------------------------------------------------------------- /Blogs/11.ReactFragments.md: -------------------------------------------------------------------------------- 1 | 2 | # Eliminate Unnecessary Wrapper Elements with React Fragments 3 | >React fragments are a way to group a list of children without adding additional DOM nodes. Fragments allow you to return multiple elements from a component's render method without wrapping them in an extra element. 4 | 5 | ### There are two ways you can use fragments in React: 6 | 7 | ## 1. React.fragment 8 | 9 | Using the `React.Fragment` component: You can use the `React.Fragment` component to group a list of children without adding additional DOM nodes. This can be useful if you need to support older versions of React that don't support the JSX fragment syntax `(<>)`. 10 | 11 | ```js 12 | import React from "react"; 13 | 14 | function List(props) { 15 | return ( 16 | 17 |
  • Item 1
    • 18 |
  • Item 2
    • 19 |
  • Item 3
    • 20 |     21 | ); 22 | } 23 | 24 | function App() { 25 | return ; 26 | } 27 | ``` 28 | 29 | ## 2. <> 30 | 31 | Using the JSX fragment syntax `(<>)`: In newer versions of React, you can use the JSX fragment syntax `(<>)` to group a list of children without adding additional DOM nodes. This is a shorter and more concise syntax than using the `React.Fragment` component. 32 | 33 | ```js 34 | import React from "react"; 35 | 36 | function List(props) { 37 | return ( 38 | <> 39 |
  • Item 1
    • 40 |
  • Item 2
    • 41 |
  • Item 3
    • 42 | 43 | ); 44 | } 45 | 46 | function App() { 47 | return ; 48 | } 49 | ``` 50 | 51 | Fragments are useful because they allow you to group a list of children without adding additional DOM nodes, which can make your code more efficient and easier to read. 52 | -------------------------------------------------------------------------------- /Blogs/12.ReactPortals.md: -------------------------------------------------------------------------------- 1 | # Easily Render Components Anywhere with React Portals 2 | 3 | >React portals are a way to render a React component to a different DOM element than the parent component. Portals can be useful in a variety of situations, such as: 4 | 5 | - **Modals:** You can use portals to render a modal or pop-up window that is separate from the rest of the page. This can be helpful for maintaining the focus and structure of the main page while displaying a separate piece of content. 6 | 7 | - **Overlays:** You can use portals to render an overlay or overlay element that is separate from the main content of the page. This can be useful for displaying a loading spinner or a message that needs to be displayed over the main content. 8 | 9 | - **DOM manipulation:** You can use portals to manipulate the DOM in a way that is not possible with the standard React rendering model. For example, you can use portals to append elements to the body of the page, or to render elements outside of the root element of your application. 10 | 11 | To use portals in your React application, you can use the ReactDOM.createPortal function. Here's an example of how you might use a portal to render a modal: 12 | 13 | - First Argument is JSX 14 | - Second argument conatins the attachment of element class or id 15 | 16 | ```js 17 | import React from "react"; 18 | import ReactDOM from "react-dom"; 19 | 20 | function Modal(props) { 21 | return ReactDOM.createPortal( 22 |
    23 | 24 | {props.children} 25 |
    , 26 | document.geElementByID("modelWindow") 27 | ); 28 | } 29 | 30 | function App() { 31 | const [isModalOpen, setIsModalOpen] = React.useState(false); 32 | 33 | return ( 34 |
    35 | 36 | {isModalOpen && ( 37 | setIsModalOpen(false)}> 38 |

    Modal content

    39 |     40 | )} 41 |
    42 | ); 43 | } 44 | ``` 45 | 46 | In this example, the `Modal` component uses the `ReactDOM.createPortal` function to render a modal element to the `document.body` element. When the modal is opened, it is rendered outside of the App component, allowing it to be displayed over the main content of the page. 47 | -------------------------------------------------------------------------------- /Blogs/13.useRef()Hook.md: -------------------------------------------------------------------------------- 1 | 2 | # Easily Access and Modify DOM Nodes with useRef in React 3 | >In React, a `ref` is a way to access the properties of a DOM element. Refs are created using React's `createRef` function and attached to React elements via the `ref` attribute. 4 | 5 | Here's an example of how you might use a ref to access the value of an input element: 6 | 7 | ```js 8 | import React, { useRef } from "react"; 9 | 10 | function InputForm() { 11 | const inputEl = useRef(null); 12 | 13 | const handleSubmit = (event) => { 14 | event.preventDefault(); 15 | console.log(inputEl.current.value); 16 | }; 17 | 18 | return ( 19 |
    20 | 24 | 25 |
    26 | ); 27 | } 28 | ``` 29 | 30 | In this example, the `inputEl` `ref` is created using the `useRef` hook and attached to the input element via the `ref` attribute. When the form is submitted, the handleSubmit function is called, and the value of the input element is logged to the console using the `inputEl.current.value` property. 31 | 32 | There are a few reasons why you might want to use refs in your React application: 33 | 34 | - **DOM manipulation:** Refs can be useful for manipulating the DOM directly, such as focusing an input element or getting the value of a form field. 35 | 36 | - **Third-party libraries:** Refs can be useful for interacting with third-party libraries that require direct access to DOM elements. 37 | 38 | - **Performance optimization:** In some cases, using refs can be more performant than using the state or props of a component to manipulate the DOM. 39 | -------------------------------------------------------------------------------- /Blogs/14.useEffectHook.md: -------------------------------------------------------------------------------- 1 | # Become a Pro at the useEffect Hook with These Advanced Techniques in React 2 | 3 | >`useEffect` is a hook in React that allows you to perform side effects in function components. It is called after the component renders, and it takes a callback function as an argument. The callback function can be used to perform tasks such as making API calls, setting up event listeners, or updating the DOM. 4 | 5 | One of the main benefits of using `useEffect` is that it helps you manage side effects in a declarative way, rather than using imperative code. This can make your code easier to understand and debug. 6 | 7 | Here's an example of how you can use `useEffect` to make an API call in a React component: 8 | 9 | 10 | 11 | ```js 12 | import { useState, useEffect } from "react"; 13 | 14 | function Example() { 15 | const [data, setData] = useState(null); 16 | 17 | useEffect(() => { 18 | async function fetchData() { 19 | const response = await fetch("/some/api/endpoint"); 20 | setData(response.data); 21 | } 22 | fetchData(); 23 | }, []); 24 | 25 | return
    {data &&

    Data: {data}

    }
    ; 26 | } 27 | ``` 28 | 29 | In this example, the `useEffect` hook is called after the component renders, and it makes an API call to fetch some data. The data is then stored in the data state using the setData function. 30 | 31 | **The second parameter of the useEffect hook** is an array of values that determines when the effect callback function should be called. If the array is empty (as in the example above), the effect callback function is only called after the initial render. 32 | 33 | If you pass an array of values as the second parameter, the effect callback function will be called whenever one of those values changes. For example: 34 | 35 | ```js 36 | import { useState, useEffect } from "react"; 37 | 38 | function Example(props) { 39 | const [data, setData] = useState(null); 40 | 41 | useEffect(() => { 42 | async function fetchData() { 43 | const response = await fetch(`/some/api/endpoint/${props.id}`); 44 | setData(response.data); 45 | } 46 | fetchData(); 47 | }, [props.id]); 48 | 49 | return
    {data &&

    Data: {data}

    }
    ; 50 | } 51 | ``` 52 | 53 | ## Exceptions and Limitations 54 | 55 | There are a few exceptions to this rule: you do not need to add state updating functions as dependencies, as they are guaranteed to never change. You also do not need to add "built-in" APIs or functions like fetch() or localStorage, as they are independent from React and your components and do not change. Similarly, you do not need to add variables or functions defined outside of your components as dependencies, as changing them will not affect your components. 56 | 57 | It is important to understand these exceptions in order to avoid unnecessary re-evaluations of your side effects, which can improve the performance of your application. 58 | 59 | ## useEffect() cleanup Function 60 | 61 | he cleanup function in useEffect is a callback function that is called just before the effect is unmounted or re-run. This can be useful for performing tasks such as cleaning up event listeners or canceling network requests. 62 | 63 | In general, the cleanup function is called whenever the component that uses useEffect unmounts, or whenever the dependencies of the useEffect hook change and the effect is re-run. 64 | 65 | ```js 66 | import { useState, useEffect } from "react"; 67 | 68 | function Example() { 69 | const [data, setData] = useState(null); 70 | 71 | useEffect(() => { 72 | let cancelRequest = false; 73 | 74 | async function fetchData() { 75 | const response = await fetch("/some/api/endpoint"); 76 | if (!cancelRequest) { 77 | setData(response.data); 78 | } 79 | } 80 | fetchData(); 81 | 82 | return () => { 83 | cancelRequest = true; 84 | }; 85 | }, []); 86 | 87 | return
    {data &&

    Data: {data}

    }
    ; 88 | } 89 | ``` 90 | 91 | In this example, the useEffect hook makes an API call to fetch some data. The cancelRequest variable is used to cancel the request if the component unmounts before the request is complete. The cancelRequest variable is set to true in the cleanup function, which is called just before the component unmounts. 92 | 93 | ## Summary 94 | 95 | - Executes after the component renders. 96 | - If no second parameter is specified, the effect function always executes when the component renders. 97 | - If a second parameter is specified and it is an empty array, the effect function only executes the first time the component renders. 98 | - If a second parameter is specified and it is a non-empty array containing mutable values, the effect function only executes when the values in the array change. 99 | - The cleanup function does not execute the first time the component renders. 100 | - The cleanup function executes before the effect function the next time it is called. 101 | - useEffect is helpful for performing tasks like fetching data, sending HTTP requests, and validating forms." 102 | -------------------------------------------------------------------------------- /Blogs/15.useReducer()Hook.md: -------------------------------------------------------------------------------- 1 | # Effortlessly Manage Complex State with useReducer in React" 2 | 3 | > `useReducer` hook in React. `useReducer` is a hook that allows you to manage state in a functional component. It is similar to the useState hook, but it is more powerful and can be more efficient in certain situations. 4 | 5 | Here is an example of how `useReducer` works: 6 | 7 | ```js 8 | import { useReducer } from "react"; 9 | 10 | const initialState = { count: 0 }; 11 | 12 | function reducer(state, action) { 13 | switch (action.type) { 14 | case "increment": 15 | return { count: state.count + 1 }; 16 | case "decrement": 17 | return { count: state.count - 1 }; 18 | default: 19 | throw new Error(); 20 | } 21 | } 22 | 23 | function Counter() { 24 | const [state, dispatch] = useReducer(reducer, initialState); 25 | return ( 26 | <> 27 | Count: {state.count} 28 | 29 | 30 | 31 | ); 32 | } 33 | ``` 34 | 35 | In this example, we have defined a `reducer` function that takes in a state and an action, and returns a new state based on the action type. We have also defined an initial state for our component. 36 | 37 | Next, we use the useReducer hook to create a state variable and a dispatch function. The dispatch function allows us to dispatch actions to the `reducer`, which will update the state based on the action type. 38 | 39 | Finally, we render a counter that displays the current count and has buttons to increment and decrement the count. When the buttons are clicked, we dispatch an action to the reducer to update the state. 40 | 41 | The third parameter of the useReducer hook is an optional argument that allows you to specify an initial state value that is different from the value specified in the reducer function. 42 | 43 | For example: 44 | 45 | ```js 46 | import { useReducer } from "react"; 47 | 48 | function reducer(state, action) { 49 | // ... 50 | } 51 | 52 | function MyComponent() { 53 | const initialState = { count: 0 }; 54 | const [state, dispatch] = useReducer( 55 | reducer, 56 | initialState, 57 | (initialState) => ({ 58 | ...initialState, 59 | count: initialState.count + 10, 60 | }) 61 | ); 62 | // ... 63 | } 64 | ``` 65 | 66 | In this example, the initial state value for the count property is specified as 0 in the reducer function. However, we can use the third parameter of useReducer to specify a different initial value for the count property. In this case, we are using the third parameter to specify that the initial value for the count property should be 10, which is 10 more than the value specified in the reducer function. 67 | 68 | The third parameter of useReducer is a function that takes in the initial state value specified in the reducer function and returns a new initial state value. This can be useful if you want to specify different initial values for different properties, or if you want to perform some other transformation on the initial state value. 69 | 70 | ## Summary 71 | 72 | - Same as the useState just only be used as an alternative for doing the complex logic states , when 2 or more useStates are related to one thing combine them into one useReducer() as an object . 73 | 74 | - disptach() function takes the argument of ypdating state value as an object of the action. 75 | 76 | - reducer function be called when we pass the action value to the dispatch function and this function takes the two parameter of the state which has the previous value and the action value. 77 | -------------------------------------------------------------------------------- /Blogs/16.comboOFuseEffectAnduseReducer.md: -------------------------------------------------------------------------------- 1 | # "The Perfect Combo: useReducer and useEffect for Powerful React Components" 2 | 3 | >Here is an example of how the useEffect and useReducer hooks can be used together to manage complex state and perform side effects in a React component: 4 | 5 | ```js 6 | import { useEffect, useReducer } from "react"; 7 | 8 | const initialState = { 9 | loading: false, 10 | data: [], 11 | error: null, 12 | }; 13 | 14 | function reducer(state, action) { 15 | switch (action.type) { 16 | case "LOADING": 17 | return { 18 | loading: true, 19 | data: [], 20 | error: null, 21 | }; 22 | case "SUCCESS": 23 | return { 24 | loading: false, 25 | data: action.data, 26 | error: null, 27 | }; 28 | case "ERROR": 29 | return { 30 | loading: false, 31 | data: [], 32 | error: action.error, 33 | }; 34 | default: 35 | throw new Error("Invalid action type"); 36 | } 37 | } 38 | 39 | function MyComponent() { 40 | const [state, dispatch] = useReducer(reducer, initialState); 41 | 42 | useEffect(() => { 43 | dispatch({ type: "LOADING" }); 44 | 45 | fetch("https://my-api.com/endpoint") 46 | .then((response) => response.json()) 47 | .then((data) => dispatch({ type: "SUCCESS", data })) 48 | .catch((error) => dispatch({ type: "ERROR", error })); 49 | }, []); 50 | 51 | if (state.loading) { 52 | return

    Loading...

    ; 53 | } 54 | if (state.error) { 55 | return

    Error: {state.error.message}

    ; 56 | } 57 | return ( 58 |
      59 | {state.data.map((item) => ( 60 |
    • {item.name}
      • 61 | ))} 62 |
    63 | ); 64 | } 65 | ``` 66 | 67 | In this example, the useReducer hook is used to manage the loading, data, and error state of a component that is fetching data from an API. The useEffect hook is used to perform the actual fetch request and dispatch actions to the reducer to update the state accordingly. The component will display a loading message while the data is being fetched, an error message if there is an error, or a list of data items if the fetch is successful. 68 | -------------------------------------------------------------------------------- /Blogs/17.useContext()Hook.md: -------------------------------------------------------------------------------- 1 | # Passing Data through Context API 2 | 3 | > The React Context API allows you to share state and data between components without having to pass props down through multiple levels of the component tree. This can be particularly useful for situations where you have deeply nested components and you want to avoid the prop drilling that would be required to pass the data down through each level. 4 | 5 | ## Why we need the react context API? 6 | 7 | The React Context API is a way to share data that is required by multiple components in a React application, without the need to pass props down through the component tree manually. This can be especially useful for data that is needed by many components, but is not directly related to the rendering of a specific component, such as the currently authenticated user or the current locale. 8 | 9 | Using the Context API can help improve the separation of concerns in a React application, as components do not need to be aware of the specific parent component that is providing the required data. It can also make the component tree more concise, as data that needs to be passed down through multiple levels of components can be provided directly through the context, rather than being passed down as props at each level. 10 | 11 | Overall, the React Context API can be a useful tool for managing data in a React application, particularly when that data is needed by many components and is not directly related to the rendering of specific components. 12 | 13 | # How to use them ? 14 | 15 | To use the Context API, you'll need to create a context object and provide a default value for the context. You can then use the `` component to provide the context value to the components that need it, and the `useContext` hook to consume the context value in those components. 16 | 17 | Here's an example of how you might use the Context API to pass a theme value down to a set of nested components: 18 | 19 | ```js 20 | import React, { createContext, useContext } from "react"; 21 | 22 | // Create the context object and specify a default value 23 | const ThemeContext = createContext("light"); 24 | 25 | // Create a provider component that will wrap the components that need the context value 26 | const ThemeProvider = ({ value, children }) => ( 27 | {children} 28 | ); 29 | 30 | // Create a component that consumes the context value 31 | const ThemeButton = () => { 32 | const theme = useContext(ThemeContext); 33 | return ; 34 | }; 35 | 36 | // Use the provider component to wrap the component tree and provide the context value 37 | const App = () => ( 38 | 39 |
    40 | 41 |
    42 |     43 | ); 44 | ``` 45 | 46 | In this example, the ThemeButton component consumes the theme context value and applies it as a classname. The ThemeProvider component provides the context value, which can be changed by updating the value prop of the provider. This allows you to control the theme of the entire component tree by simply changing the value of the context provider at the root level. 47 | 48 | ## Limitation of useContext API 49 | 50 | If you are continously changing the state in every second thean you have not to use the `useContext()`, beacuse it can cause effects to change every component on every seconds. 51 | But if your useContext() data states are changing on after a some time than you hav e must prefer to use them. 52 | 53 | Another limitation of useContext is that it does not support the propagation of context updates to components higher up in the tree. If a context value changes, only the components that directly consume that value using useContext will be re-rendered. This can make it difficult to manage updates to context values that are used by multiple components. 54 | -------------------------------------------------------------------------------- /Blogs/18.React.memo().md: -------------------------------------------------------------------------------- 1 | # Optimizing Your React Components: A Deep Dive into React's Powerful memo Feature 2 | 3 | > When building React applications, performance is a crucial consideration. One of the biggest performance bottlenecks can be unnecessary re-renders of components, which can lead to slow load times and a poor user experience. Fortunately, React provides a powerful tool to help optimize your components: the `memo` higher order component. In this blog post, we'll take a deep dive into the `memo` feature, exploring how it works and how you can use it to improve the performance of your React applications. 4 | 5 | React `memo` is a higher order component (HOC) that is used to wrap a functional component in order to prevent unnecessary re-renders. It does this by "memoizing" the component, meaning it stores the previous props and state, and only re-renders the component if the props or state have changed. 6 | 7 | Here's an example of how you might use memo to optimize a functional component: 8 | 9 | ```js 10 | import React, { memo } from "react"; 11 | 12 | const MyComponent = ({ name, age }) => { 13 | console.log("MyComponent rendered"); 14 | return ( 15 |
    16 | {name} - {age} 17 |
    18 | ); 19 | }; 20 | 21 | export default memo(MyComponent); 22 | ``` 23 | 24 | In this example, `MyComponent` is a functional component that takes in `name `and `age` props and renders a div with the `name` and `age`. The `memo` HOC is used to wrap the component, which will prevent it from re-rendering if the `name` and `age` props remain the same. 25 | 26 | In practice, you can see this in action by using the wrapped component multiple times in your application and passing the same props to each instance, you'll see that the wrapped component will only re-render once, as it's memoized. 27 | 28 | You can also pass a custom comparison function as a second argument to `memo` if you want to customize the way the props are compared for changes. 29 | 30 | ```js 31 | export default memo(MyComponent, (prevProps, nextProps) => { 32 | return prevProps.name === nextProps.name && prevProps.age === nextProps.age; 33 | }); 34 | ``` 35 | 36 | This is only a very basic example, but it illustrates the basic idea behind using `memo` to optimize functional components in React. 37 | -------------------------------------------------------------------------------- /Blogs/19.useCallback()Hook.md: -------------------------------------------------------------------------------- 1 | # Mastering React Hooks: The useCallback() Function and How to Optimize Your Components 2 | 3 | > React Hooks have revolutionized the way we build React components. One of the most powerful Hooks is the `useCallback()` function, which allows you to optimize your components by only re-creating callbacks when certain dependencies change. In this blog post, we'll explore the `useCallback()` Hook in-depth and learn how it can be used to improve the performance of your React applications. We'll also take a look at some real-world examples of how to use `useCallback()` in your own projects. 4 | 5 | When a component re-renders, React will create a new instance of any functions declared inside the component. This can lead to unnecessary re-renders, especially when the function is passed down as a prop to a child component. The `useCallback()` Hook solves this problem by allowing you to specify which dependencies a callback function depends on, and only re-creating the function when those dependencies change. 6 | 7 | Here's an example of how you might use `useCallback()` in a functional component: 8 | 9 | ```js 10 | import { useCallback } from "react"; 11 | 12 | const MyComponent = ({ name }) => { 13 | const handleClick = useCallback(() => { 14 | console.log(`Hello, ${name}!`); 15 | }, [name]); 16 | 17 | return ; 18 | }; 19 | ``` 20 | 21 | In this example, the `handleClick` function is only re-created when the name prop changes. This means that if the parent component re-renders with the same name prop, the `handleClick` function will not be re-created, and the child component will not re-render. 22 | 23 | You can also use `useCallback()` in conjunction with `memo()` to optimize child components that receive a callback as a prop. Here's an example: 24 | 25 | ```js 26 | import { useCallback } from "react"; 27 | import { memo } from "react"; 28 | 29 | const ChildComponent = memo(({ callback }) => { 30 | console.log("ChildComponent rendered"); 31 | return ; 32 | }); 33 | 34 | const ParentComponent = () => { 35 | const handleClick = useCallback(() => { 36 | console.log("Button clicked"); 37 | }, []); 38 | 39 | return ; 40 | }; 41 | ``` 42 | 43 | In this example, the `ChildComponent` is wrapped in the `memo()` HOC, which prevents it from re-rendering unless the callback prop changes. Since the handleClick function is only re-created when the dependencies passed to `useCallback()` change, the `ChildComponent` will only re-render when the dependencies change. 44 | 45 | `useCallback()` is a powerful tool that can help you optimize your React components by preventing unnecessary re-renders. By specifying dependencies and re-creating callbacks only when necessary, you can improve the performance of your applications and provide a better user experience. 46 | -------------------------------------------------------------------------------- /Blogs/20.StateSecduling.md: -------------------------------------------------------------------------------- 1 | # Navigating the State of React: Understanding and Utilizing State Scheduling 2 | 3 | > Managing state in React can be a tricky task, especially when dealing with complex, multi-step interactions. One of the most recent additions to React's toolset for managing state is state scheduling. State scheduling allows for a more fine-grained control over the timing of state updates, making it easier to handle complex interactions and avoid unexpected behavior. In this blog post, we'll take a closer look at state scheduling in React and explore how it can be used to improve the performance and predictability of your applications. 4 | 5 | State scheduling is a feature in React that allows developers to have more control over when and how state updates are applied. It works by allowing React to "schedule" updates to state, rather than applying them immediately. This allows React to better handle situations where multiple updates need to be made, and to avoid any unexpected issues that might arise when updates are applied in the wrong order. 6 | 7 | State scheduling was introduced as a part of the React concurrent mode, which allows React to schedule updates and render multiple components at the same time. 8 | 9 | One of the most common use cases for state scheduling is handling complex interactions, such as form submissions or animations. Here's an example of how state scheduling can be used to handle a form submission: 10 | 11 | ```js 12 | import { useState, useCallback } from "react"; 13 | 14 | const Form = () => { 15 | const [submitting, setSubmitting] = useState(false); 16 | const [formData, setFormData] = useState({}); 17 | 18 | const handleSubmit = useCallback(() => { 19 | setSubmitting(true); 20 | setFormData({}); 21 | // simulate an async submit 22 | setTimeout(() => { 23 | setSubmitting(false); 24 | }, 2000); 25 | }, []); 26 | 27 | return ( 28 |
    29 | setFormData(event.target.value)} 33 | /> 34 | 37 |
    38 | ); 39 | }; 40 | ``` 41 | 42 | In this example, the handleSubmit function is called when the form is submitted. The first thing it does is set the submitting state to true, which disables the submit button to prevent multiple submissions. Next, it clears the form data by setting it to an empty object. Finally, it simulates an async submit by using setTimeout and sets the submitting state to false after 2 seconds. 43 | 44 | As you can see, the state updates are scheduled by React, so it knows that it should wait to apply the submitting state update until the formData state update has been applied. This prevents any unexpected issues that might arise if the submitting state update were applied first, such as the form data being lost before it could be submitted. 45 | 46 | State scheduling can also be used to optimize performance by allowing React to batch updates together, and apply them all at once. This can be particularly beneficial when dealing with large lists or complex animations. 47 | 48 | In summary, state scheduling is a powerful feature in React that allows developers to have more control over when and how state updates are applied. By using state scheduling, developers can handle complex interactions more easily and avoid unexpected issues that might arise when updates are applied in the wrong order. 49 | -------------------------------------------------------------------------------- /Blogs/21.useMemo()Hook.md: -------------------------------------------------------------------------------- 1 | # Streamlining Your React Components: A Deep Dive into useMemo Hook 2 | 3 | > Performance optimization is a crucial aspect of building React applications, and one of the most effective ways to achieve this is by avoiding unnecessary re-renders. The `useMemo` hook is a powerful tool that allows you to optimize your functional components by only re-computing expensive calculations when specific dependencies change. In this blog post, we'll take a deep dive into the `useMemo` hook, exploring how it works and how you can use it to improve the performance of your React applications. 4 | 5 | The `useMemo` hook is a powerful tool that allows you to optimize your functional components by only re-computing expensive calculations when specific dependencies change. It works by "memoizing" the calculation and returning the cached result if the dependencies have not changed. This can greatly improve the performance of your application, especially when dealing with complex calculations or large data sets. 6 | 7 | Here's an example of how you might use `useMemo` to memoize a calculation: 8 | 9 | ```js 10 | import { useMemo } from "react"; 11 | 12 | const MyComponent = ({ data }) => { 13 | const memoizedData = useMemo(() => { 14 | // expensive calculation 15 | return data.filter((item) => item.active); 16 | }, [data]); 17 | 18 | return ( 19 |
    20 | {memoizedData.map((item) => ( 21 |
    {item.name}
    22 | ))} 23 |
    24 | ); 25 | }; 26 | ``` 27 | 28 | In this example, `MyComponent` takes in an array of `data` and uses the `useMemo` hook to filter the active items from the `data` array. The hook takes in two arguments, the first is a function that returns the memoized value (in this case the filtered `data`) and the second is an array of dependencies, in this case it's the `data` prop. 29 | 30 | Now, whenever `MyComponent` re-renders and the `data` prop does not change, the `useMemo` hook will return the previously memoized `data`, avoiding the expensive calculation and increasing the performance of the component. 31 | 32 | It's important to note that `useMemo` is similar to React.memo, but the main difference is that `useMemo` is used inside a component to memoize a single value while `React.memo` is used outside of a component to wrap it and prevent unnecessary re-renders. 33 | 34 | In summary, `useMemo` is a powerful hook that allows you to optimize your functional components by memoizing expensive calculations and avoiding unnecessary re-computations when specific dependencies have not changed. By using `useMemo` in your application, you can improve the performance of your components and provide a better user experience. 35 | -------------------------------------------------------------------------------- /Blogs/23.CustomHooks.md: -------------------------------------------------------------------------------- 1 | # Custom Hooks in React: A Game Changer for Your Components 2 | 3 | **Are you tired of writing repetitive code for your React components? Do you want to make your codebase more organized and easy to understand? Look no further than the magic of Custom Hooks!** 4 | 5 | > `Custom Hooks` in `React` simplify code organization and maintenance by allowing the reuse of stateful logic and behavior. They also serve as an alternative to `HOCs` and Render `Props` for simpler and more readable code. 6 | 7 | ```js 8 | 9 | //Custom Hook 10 | import { useState } from 'react'; 11 | 12 | function useCounter() { 13 | const [count, setCount] = useState(0); 14 | 15 | function increment() { 16 | setCount(count + 1); 17 | } 18 | 19 | function decrement() { 20 | setCount(count - 1); 21 | } 22 | 23 | return { count, increment, decrement }; 24 | } 25 | 26 | export default useCounter; 27 | 28 | ``` 29 | This custom hook can be used in a component like this: 30 | 31 | 32 | ```js 33 | import React from 'react'; 34 | import useCounter from './useCounter'; 35 | 36 | function Counter() { 37 | const { count, increment, decrement } = useCounter(); 38 | 39 | return ( 40 |
    41 |

    {count}

    42 | 43 | 44 |
    45 | ); 46 | } 47 | 48 | export default Counter; 49 | 50 | ``` 51 | In this example, the `component Counter` is using the custom hook `useCounter` to manage its internal state of count and its increment and decrement functions. It also use the state in its `JSX` to render the count on the screen, and using the **increment and decrement functions** to update the `state`` when the respective buttons are clicked. 52 | 53 | 54 | Here are some tips and rules for creating custom hooks: 55 | 56 | - Follow `use` naming convention for `custom hooks`. 57 | - Only call `custom hook` at top level of component. 58 | - Do not use inside `loops` or `conditions`. 59 | - Make hook reusable by using props passed as arguments. 60 | - Test and document the custom hook with usage instructions. -------------------------------------------------------------------------------- /Blogs/ReactForms.md: -------------------------------------------------------------------------------- 1 | # React Form Pro-Tips: Level Up Your Skills 2 | 3 | > `React` is a game-changer when it comes to building `user interfaces`, and one of its most powerful features is the ability to handle forms and user input like a pro! In this blog, we're going to explore some of the best practices, techniques, and pro-tips for working with forms in React, so that you can take your skills to the next level and build more efficient and user-friendly applications. 4 | 5 | First and foremost, it's crucial to understand the concept of `controlled components` when working with forms in `React`. Controlled components are components that keep the state of the form in the parent component, rather than in the individual form elements. This allows for better handling of form **validation** and **submission**, and makes it easy to access and update the form data in the `parent component` 6 | 7 | 8 | Are you ready to level up your form game in `React`? Let's explore the different strategies for **form validation** and pick the perfect one for your project! 9 | 10 | First up, we have the `submit and validate` approach. This strategy is super simple and easy to implement, it only shows error messages when the user is ready to submit the form. It's a classic, **no-nonsense approach** that gets the job done. 11 | 12 | ```js 13 | const handleSubmit = event => { 14 | event.preventDefault(); 15 | const errors = validateForm(); 16 | setErrors(errors); 17 | if (!Object.keys(errors).length) { 18 | //submit the formData 19 | } 20 | }; 21 | 22 | ``` 23 | 24 | Next, we have the ``validate on blur`` approach. This strategy provides **instant feedback** to the user and catches `errors` as they happen. It's like having a personal form coach, always there to catch your mistakes! 25 | ```js 26 | const handleBlur = event => { 27 | const { name } = event.target; 28 | const error = validate(name, formData[name]); 29 | setErrors({ ...errors, [name]: error }); 30 | }; 31 | 32 | ``` 33 | 34 | And finally, we have the `validate on every stroke` approach. This strategy is the most responsive and provides the most **immediate feedback**, but it can also be the **most annoying** for the user. It's like having a form drill sergeant, pushing you to be your best! 35 | ```js 36 | const handleChange = event => { 37 | const { name, value } = event.target; 38 | const error = validate(name, value); 39 | setErrors({ ...errors, [name]: error }); 40 | setFormData({ ...formData, [name]: value }); 41 | }; 42 | 43 | ``` 44 | 45 | So, which approach is the best for your project? It all depends on your **specific requirements**. Do you want to provide instant feedback and catch errors early on? Go for the `validate on blur` approach. Do you want to be super responsive and provide the most immediate feedback? Go for the `validate on every stroke` approach. Whichever strategy you choose, make sure to test it thoroughly and provide a great user experience! 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Blogs/ReactRouter.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Blogs/ReactRouter.md -------------------------------------------------------------------------------- /EssentailCommands.md: -------------------------------------------------------------------------------- 1 | # Some useful Commands 2 | 3 | ## To use the different node versions. 4 | 5 | ```sh 6 | nvm install 12.18.3 7 | nvm use 12.18.3 8 | ``` 9 | 10 | ## To start the react-app 11 | 12 | ```sh 13 | npm init react-app my-app 14 | cd my-app 15 | npm start 16 | ``` 17 | 18 | To end the react app `Ctrl+c `(In linux) 19 | 20 | ## To install the all dependencies in the package.json 21 | 22 | ```sh 23 | npm install 24 | ``` 25 | 26 | ## To install the styled-components library 27 | 28 | ```sh 29 | npm i --save -styled-components 30 | ``` 31 | 32 | ## To production build react app on your PC 33 | 34 | ```sh 35 | npm install -g serve 36 | serve -s build 37 | ``` 38 | -------------------------------------------------------------------------------- /License.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Muhib Arshad 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Projects/AddUser/Screenshot from 2023-01-01 01-51-23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/AddUser/Screenshot from 2023-01-01 01-51-23.png -------------------------------------------------------------------------------- /Projects/AddUser/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.dce1127a.chunk.css", 4 | "main.js": "/static/js/main.6377feb0.chunk.js", 5 | "main.js.map": "/static/js/main.6377feb0.chunk.js.map", 6 | "runtime-main.js": "/static/js/runtime-main.36ce5d8f.js", 7 | "runtime-main.js.map": "/static/js/runtime-main.36ce5d8f.js.map", 8 | "static/js/2.14e73586.chunk.js": "/static/js/2.14e73586.chunk.js", 9 | "static/js/2.14e73586.chunk.js.map": "/static/js/2.14e73586.chunk.js.map", 10 | "index.html": "/index.html", 11 | "static/css/main.dce1127a.chunk.css.map": "/static/css/main.dce1127a.chunk.css.map", 12 | "static/js/2.14e73586.chunk.js.LICENSE.txt": "/static/js/2.14e73586.chunk.js.LICENSE.txt" 13 | }, 14 | "entrypoints": [ 15 | "static/js/runtime-main.36ce5d8f.js", 16 | "static/js/2.14e73586.chunk.js", 17 | "static/css/main.dce1127a.chunk.css", 18 | "static/js/main.6377feb0.chunk.js" 19 | ] 20 | } -------------------------------------------------------------------------------- /Projects/AddUser/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/AddUser/build/favicon.ico -------------------------------------------------------------------------------- /Projects/AddUser/build/index.html: -------------------------------------------------------------------------------- 1 | React App
    -------------------------------------------------------------------------------- /Projects/AddUser/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/AddUser/build/logo192.png -------------------------------------------------------------------------------- /Projects/AddUser/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/AddUser/build/logo512.png -------------------------------------------------------------------------------- /Projects/AddUser/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Projects/AddUser/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Projects/AddUser/build/static/css/main.dce1127a.chunk.css: -------------------------------------------------------------------------------- 1 | *{box-sizing:border-box}html{font-family:sans-serif}body{margin:0}.AddUserForm_form__jJc2d{display:flex;flex-direction:column;align-items:center;width:50%;margin:100px auto;padding:20px;border:1px solid #d3d3d3;border-radius:10px}.AddUserForm_input__1kDxm input{width:80%;height:40px;margin:10px 0;padding:0 10px;border:1px solid #d3d3d3;border-radius:5px;font-size:16px}.AddUserForm_button__s31hG{width:80%;height:50px;margin:20px 0;padding:0 10px;border:none;border-radius:5px;background-color:#6495ed;color:#fff;font-size:18px;cursor:pointer}.AddUserForm_button__s31hG:hover{background-color:#4169e1}.ModelWindow_modal-backdrop__ev6o-{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:10}.ModelWindow_modal-window__14m86{position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:400px;max-height:80%;overflow-y:auto;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.5);z-index:20}.ModelWindow_modal-header__2IBEH{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid #ddd}.ModelWindow_modal-header__2IBEH h2{font-size:22px;font-weight:700;margin:0}.ModelWindow_modal-header__2IBEH .ModelWindow_close-button__1ZAd7{font-size:20px;font-weight:700;text-decoration:none;color:#999}.ModelWindow_modal-header__2IBEH .ModelWindow_close-button__1ZAd7:hover{color:#333}.ModelWindow_modal-body__20OAk{padding:20px}.ModelWindow_modal-body__20OAk p{font-size:16px;margin:0}.ModelWindow_modal-body__20OAk .ModelWindow_error-message__3qozT{color:red}.ModelWindow_button__a2RwR{display:block;margin:20px auto;padding:10px 20px;border:none;border-radius:5px;background-color:#333;color:#fff;font-size:16px;cursor:pointer}.ModelWindow_button__a2RwR:hover{background-color:#555}.UserInfo_user-info__1bzWu{display:flex;flex-direction:column;align-items:center;background-color:#e6e6e6;padding:20px;border-radius:10px;width:700px;margin:20px auto}.UserInfo_user-info__1bzWu p{font-size:18px;font-weight:700;margin:10px 0}.UserInfo_user-info__1bzWu p.UserInfo_label__3oKnU{color:#777}.UserInfo_delete__nsCVZ{display:block;margin:10px 0;padding:5px 10px;border:none;border-radius:10px;background-color:#f44336;color:#fff;font-size:14px;height:4vh;width:10vh;cursor:pointer}.UserInfo_delete__nsCVZ:hover{background-color:#dc3545}.UserInfo_update-button__ux-VA{background-color:#3498db;border:none;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;margin:4px 2px;cursor:pointer;border-radius:10px}.UpdateWindow_modal-container__3CVg5{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center}.UpdateWindow_modal-backdrop__37CdS{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:999}.UpdateWindow_modal-content__1vn5S{background-color:#fff;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.2);padding:20px;width:500px;z-index:1000}form{display:flex;flex-direction:column}label{margin-bottom:5px}input,label{font-size:14px}input{border:1px solid #ccc;border-radius:4px;padding:8px;width:100%}.UpdateWindow_update-button__2r-PT{background-color:#3498db;border:none;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:20px;cursor:pointer}.UpdateWindow_update-button__2r-PT :hover{background-color:#2980b9}.App_App__16ZpL{height:200vh;text-align:center}.App_delete-all__3WDz6{display:block;margin:50px 450px;padding:10px 20px;border:none;border-radius:5px;background-color:#f44336;color:#fff;font-size:16px;cursor:pointer}.App_delete-all__3WDz6:hover{background-color:#dc3545} 2 | /*# sourceMappingURL=main.dce1127a.chunk.css.map */ -------------------------------------------------------------------------------- /Projects/AddUser/build/static/js/2.14e73586.chunk.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /* 2 | object-assign 3 | (c) Sindre Sorhus 4 | @license MIT 5 | */ 6 | 7 | /** @license React v0.20.2 8 | * scheduler.production.min.js 9 | * 10 | * Copyright (c) Facebook, Inc. and its affiliates. 11 | * 12 | * This source code is licensed under the MIT license found in the 13 | * LICENSE file in the root directory of this source tree. 14 | */ 15 | 16 | /** @license React v17.0.2 17 | * react-dom.production.min.js 18 | * 19 | * Copyright (c) Facebook, Inc. and its affiliates. 20 | * 21 | * This source code is licensed under the MIT license found in the 22 | * LICENSE file in the root directory of this source tree. 23 | */ 24 | 25 | /** @license React v17.0.2 26 | * react-jsx-runtime.production.min.js 27 | * 28 | * Copyright (c) Facebook, Inc. and its affiliates. 29 | * 30 | * This source code is licensed under the MIT license found in the 31 | * LICENSE file in the root directory of this source tree. 32 | */ 33 | 34 | /** @license React v17.0.2 35 | * react.production.min.js 36 | * 37 | * Copyright (c) Facebook, Inc. and its affiliates. 38 | * 39 | * This source code is licensed under the MIT license found in the 40 | * LICENSE file in the root directory of this source tree. 41 | */ 42 | -------------------------------------------------------------------------------- /Projects/AddUser/build/static/js/runtime-main.36ce5d8f.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(t){for(var n,l,i=t[0],a=t[1],c=t[2],f=0,s=[];f0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Projects/AddUser/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/AddUser/public/favicon.ico -------------------------------------------------------------------------------- /Projects/AddUser/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 | 32 |
    33 |
    34 |
    35 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /Projects/AddUser/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/AddUser/public/logo192.png -------------------------------------------------------------------------------- /Projects/AddUser/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/AddUser/public/logo512.png -------------------------------------------------------------------------------- /Projects/AddUser/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Projects/AddUser/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Projects/AddUser/readme.md: -------------------------------------------------------------------------------- 1 | 2 |
    3 | 4 |
    5 | 6 | # React ADD USER APP (CRUD-Functionality) 7 | 8 | # [Preview Site Here](https://crud-users-app-muhib7353.netlify.app/) 9 | ## I developed this project without the help of an instructor and added all the features myself. 10 | A simple ADD USER built with React. 11 | 12 | ## Features 13 | 14 | - Add user 15 | - Delete user 16 | - Update User 17 | - Read User 18 | - Delete All users 19 | - Input Validations(model-windows on specific errors) 20 | - Data Reterving functionality (LocalStorage) 21 | 22 | ## Getting Started 23 | 24 | To get started, clone the repository and `install` the dependencies: 25 | 26 | ```sh 27 | 28 | git clone https://github.com/muhib7353/React-js-Blogs-and-Projects.git 29 | cd Projects 30 | cd AddUser 31 | npm install 32 | ``` 33 | 34 | Then, you can start the development server with the following command: 35 | 36 | ```sh 37 | npm start 38 | ``` 39 | 40 | This will start the development server and open the app in your default web browser. The app will automatically reload whenever you make changes to the code. 41 | 42 | ## For Production 43 | 44 | npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file. For more information see the production build section. 45 | 46 | For environments using Node, the easiest way to handle this would be to install serve and let it handle the rest 47 | 48 | ```sh 49 | npm install -g serve 50 | serve -s build 51 | ``` 52 | -------------------------------------------------------------------------------- /Projects/AddUser/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import AddUserForm from "./Components/AddUserForm"; 3 | import AddedUser from "./Components/AddedUser"; 4 | import * as appStyle from "./App.module.css"; 5 | const usersList = []; 6 | 7 | const App = () => { 8 | const [listOfUsers, updatedListOfusers] = useState(() => { 9 | try { 10 | const item = window.localStorage.getItem("users"); 11 | return item ? JSON.parse(item) : usersList; 12 | } catch (error) { 13 | console.log(error); 14 | return usersList; 15 | } 16 | }); 17 | 18 | const updatedusersHandler = (addedUser) => { 19 | console.log(addedUser); 20 | updatedListOfusers([addedUser, ...listOfUsers]); 21 | }; 22 | const onDeleteHandler = (id) => { 23 | const filteredUsers = listOfUsers.filter((user) => user.id !== id); 24 | updatedListOfusers(filteredUsers); 25 | }; 26 | const deleteAllHandler = () => { 27 | updatedListOfusers([]); 28 | }; 29 | 30 | 31 | const onUpdateHandler = (updatedUser) => { 32 | const updatedUsers = listOfUsers.map((user) => { 33 | if (user.id === updatedUser.id) { 34 | user.name = updatedUser.name; 35 | user.age = updatedUser.age; 36 | } 37 | return user; 38 | }); 39 | updatedListOfusers(updatedUsers); 40 | }; 41 | 42 | 43 | useEffect(() => { 44 | try { 45 | window.localStorage.setItem("users", JSON.stringify(listOfUsers)); 46 | } catch (error) { 47 | // console.log(error); 48 | } 49 | }, [listOfUsers]); 50 | return ( 51 |
    52 |

    Add User App

    53 | 54 | {listOfUsers.length !== 0 && ( 55 | 62 | )} 63 | 68 |
    69 | ); 70 | }; 71 | 72 | export default App; 73 | -------------------------------------------------------------------------------- /Projects/AddUser/src/App.module.css: -------------------------------------------------------------------------------- 1 | .App { 2 | height: 200vh; 3 | text-align: center; 4 | } 5 | .delete-all { 6 | display: block; 7 | margin: 50px 450px; 8 | padding: 10px 20px; 9 | border: none; 10 | border-radius: 5px; 11 | background-color: #f44336; 12 | color: #fff; 13 | font-size: 16px; 14 | cursor: pointer; 15 | } 16 | 17 | .delete-all:hover { 18 | background-color: #dc3545; 19 | } 20 | -------------------------------------------------------------------------------- /Projects/AddUser/src/Components/AddUserForm.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from "react"; 2 | import * as form from "./AddUserForm.module.css"; 3 | import ModelWindow from "../UI/ModelWindow"; 4 | const AddUserForm = (props) => { 5 | const nameRef = useRef(null); 6 | const ageRef = useRef(null); 7 | 8 | const [error, setError] = useState(""); 9 | const [err, setErr] = useState(false); 10 | const submitHandler = (e) => { 11 | e.preventDefault(); 12 | const dataUser = { 13 | id: Math.random().toString(), 14 | name: nameRef.current.value, 15 | age: ageRef.current.value, 16 | }; 17 | if ( 18 | nameRef.current.value.trim().length !== 0 && 19 | ageRef.current.value.trim().length !== 0 && 20 | +ageRef.current.value > 0 21 | ) { 22 | if (!err) { 23 | props.addUserInList(dataUser); 24 | ageRef.current.value = ""; 25 | nameRef.current.value = ""; 26 | } 27 | } else if ( 28 | nameRef.current.value.trim().length === 0 || 29 | ageRef.current.value.trim().length === 0 30 | ) { 31 | setError("Error: Input fields are empty!"); 32 | setErr(true); 33 | if (nameRef.current.value.trim().length === 0) { 34 | nameRef.current.value = ""; 35 | } 36 | if (ageRef.current.value.trim().length === 0) { 37 | ageRef.current.value = ""; 38 | } 39 | } else if (+ageRef.current.value < 0) { 40 | setError("Error: Age must be greater than 0!"); 41 | setErr(true); 42 | } 43 | console.log(err); 44 | }; 45 | 46 | const errorHandler = () => { 47 | setError(null); 48 | setErr(false); 49 | }; 50 | 51 | return ( 52 | <> 53 | {error && } 54 |
    55 |
    56 | 57 | 58 |
    59 |
    60 | 61 | 62 |
    63 | 66 |
    67 | 68 | ); 69 | }; 70 | 71 | export default AddUserForm; 72 | -------------------------------------------------------------------------------- /Projects/AddUser/src/Components/AddUserForm.module.css: -------------------------------------------------------------------------------- 1 | .form { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | width: 50%; 6 | margin: 100px auto; 7 | padding: 20px; 8 | border: 1px solid lightgrey; 9 | border-radius: 10px; 10 | } 11 | 12 | .input input { 13 | width: 80%; 14 | height: 40px; 15 | margin: 10px 0; 16 | padding: 0 10px; 17 | border: 1px solid lightgrey; 18 | border-radius: 5px; 19 | font-size: 16px; 20 | } 21 | 22 | .button { 23 | width: 80%; 24 | height: 50px; 25 | margin: 20px 0; 26 | padding: 0 10px; 27 | border: none; 28 | border-radius: 5px; 29 | background-color: cornflowerblue; 30 | color: white; 31 | font-size: 18px; 32 | cursor: pointer; 33 | } 34 | 35 | .button:hover { 36 | background-color: royalblue; 37 | } 38 | -------------------------------------------------------------------------------- /Projects/AddUser/src/Components/AddedUser.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import UserInfo from "./UserInfo"; 3 | const AddedUser = (props) => { 4 | const allusersList = props.renderUsers.map((user) => { 5 | console.log(user); 6 | return ( 7 | 14 | ); 15 | }); 16 | return ( 17 |
      22 | {allusersList} 23 |
    24 | ); 25 | }; 26 | 27 | export default AddedUser; 28 | -------------------------------------------------------------------------------- /Projects/AddUser/src/Components/UpdateWindow.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useRef } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import * as updateStyle from "./UpdateWindow.module.css"; 4 | import ModelWindow from "../UI/ModelWindow"; 5 | 6 | const UpdateWindow = (props) => { 7 | const updatedName = useRef(""); 8 | const updatedAge = useRef(""); 9 | const [updatedID, setUpdatedID] = useState(true); 10 | const [error, setError] = useState(""); 11 | const [err, setErr] = useState(false); 12 | 13 | const updatedHandler = (e) => { 14 | e.preventDefault(); 15 | const updatedUSer = { 16 | id: props.id, 17 | age: updatedAge.current.value, 18 | name: updatedName.current.value, 19 | }; 20 | 21 | if ( 22 | updatedName.current.value.trim().length !== 0 && 23 | updatedAge.current.value.trim().length !== 0 && 24 | +updatedAge.current.value > 0 25 | ) { 26 | if (!err) { 27 | setUpdatedID(false); 28 | props.onUpdate(updatedUSer); 29 | updatedAge.current.value = ""; 30 | updatedName.current.value = ""; 31 | } 32 | } else if ( 33 | updatedName.current.value.trim().length === 0 || 34 | updatedAge.current.value.trim().length === 0 35 | ) { 36 | setError("Error: Input fields are empty!"); 37 | setErr(true); 38 | setUpdatedID(false); 39 | 40 | if (updatedName.current.value.trim().length === 0) { 41 | updatedName.current.value = ""; 42 | } 43 | if (updatedAge.current.value.trim().length === 0) { 44 | updatedAge.current.value = ""; 45 | } 46 | } else if (+updatedAge.current.value < 0) { 47 | setError("Error: Age must be greater than 0!"); 48 | setErr(true); 49 | setUpdatedID(false); 50 | } 51 | 52 | console.log(err); 53 | // console.log(props); 54 | // console.log(updatedUSer); 55 | }; 56 | const errorHandler = () => { 57 | setError(null); 58 | setErr(false); 59 | setUpdatedID(true); 60 | }; 61 | 62 | return ( 63 | <> 64 | {props.id && 65 | updatedID && 66 | ReactDOM.createPortal( 67 |
    68 |
    69 |
    70 |
    71 | 72 |
    73 | 74 |
    75 | 76 |
    77 | 78 |
    79 |
    80 | 86 |
    87 |
    88 |
    , 89 | document.getElementById("updateWindow") 90 | )} 91 | {error && } 92 | 93 | ); 94 | }; 95 | 96 | export default UpdateWindow; 97 | -------------------------------------------------------------------------------- /Projects/AddUser/src/Components/UpdateWindow.module.css: -------------------------------------------------------------------------------- 1 | .modal-container { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100%; 7 | z-index: 1000; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | } 12 | 13 | .modal-backdrop { 14 | position: fixed; 15 | top: 0; 16 | left: 0; 17 | width: 100%; 18 | height: 100%; 19 | background-color: rgba(0, 0, 0, 0.5); 20 | z-index: 999; 21 | } 22 | 23 | .modal-content { 24 | background-color: white; 25 | border-radius: 5px; 26 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 27 | padding: 20px; 28 | width: 500px; 29 | z-index: 1000; 30 | } 31 | 32 | form { 33 | display: flex; 34 | flex-direction: column; 35 | } 36 | 37 | label { 38 | font-size: 14px; 39 | margin-bottom: 5px; 40 | } 41 | 42 | input { 43 | border: 1px solid #ccc; 44 | border-radius: 4px; 45 | font-size: 14px; 46 | padding: 8px; 47 | width: 100%; 48 | } 49 | 50 | .update-button { 51 | background-color: #3498db; /* Blue */ 52 | border: none; 53 | color: white; 54 | padding: 15px 32px; 55 | text-align: center; 56 | text-decoration: none; 57 | display: inline-block; 58 | font-size: 20px; 59 | cursor: pointer; 60 | } 61 | .update-button :hover { 62 | background-color: #2980b9; /* Darker blue */ 63 | } 64 | -------------------------------------------------------------------------------- /Projects/AddUser/src/Components/UserInfo.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import * as infoStyle from "./UserInfo.module.css"; 3 | import UpdateWindow from "./UpdateWindow"; 4 | const UserInfo = (props) => { 5 | const [id, setID] = useState(""); 6 | const handler = () => { 7 | props.ondelete(props.id); 8 | }; 9 | const updateHandler = () => { 10 | setID(props.id); 11 | }; 12 | // console.log(props); 13 | return ( 14 |
  • 15 |
    16 |

    Username:

    17 |

    {props.name}

    18 |

    Age:

    19 |

    {props.age}

    20 | 23 | 26 | 27 | 28 |
    29 |
    • 30 | ); 31 | }; 32 | 33 | export default UserInfo; 34 | -------------------------------------------------------------------------------- /Projects/AddUser/src/Components/UserInfo.module.css: -------------------------------------------------------------------------------- 1 | .user-info { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | background-color: #e6e6e6; 6 | padding: 20px; 7 | border-radius: 10px; 8 | width: 700px; 9 | margin: 20px auto; 10 | } 11 | 12 | .user-info p { 13 | font-size: 18px; 14 | font-weight: bold; 15 | margin: 10px 0; 16 | } 17 | 18 | .user-info p.label { 19 | color: #777; 20 | } 21 | .delete { 22 | display: block; 23 | margin: 10px 0; 24 | padding: 5px 10px; 25 | border: none; 26 | border-radius: 10px; 27 | background-color: #f44336; 28 | color: #fff; 29 | font-size: 14px; 30 | height: 4vh; 31 | width: 10vh; 32 | cursor: pointer; 33 | } 34 | 35 | .delete:hover { 36 | background-color: #dc3545; 37 | } 38 | .update-button { 39 | background-color: #3498db; 40 | border: none; 41 | color: white; 42 | padding: 15px 32px; 43 | text-align: center; 44 | text-decoration: none; 45 | display: inline-block; 46 | font-size: 16px; 47 | margin: 4px 2px; 48 | cursor: pointer; 49 | border-radius: 10px; 50 | } 51 | -------------------------------------------------------------------------------- /Projects/AddUser/src/UI/ModelWindow.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import * as modelStyle from "./ModelWindow.module.css"; 4 | const ModelWindow = (props) => { 5 | return ( 6 | <> 7 | {ReactDOM.createPortal( 8 | <> 9 |
    13 |
    14 |
    15 |

    Invalid Input

    16 |
    17 |
    18 |

    {props.errors}

    19 |
    20 | 27 |
    28 | , 29 | document.getElementById("modelWindow") 30 | )} 31 | 32 | ); 33 | }; 34 | export default ModelWindow; 35 | -------------------------------------------------------------------------------- /Projects/AddUser/src/UI/ModelWindow.module.css: -------------------------------------------------------------------------------- 1 | /* Modal backdrop */ 2 | .modal-backdrop { 3 | position: fixed; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | height: 100%; 8 | background-color: rgba(0, 0, 0, 0.5); 9 | z-index: 10; 10 | } 11 | 12 | /* Modal window */ 13 | .modal-window { 14 | position: fixed; 15 | top: 50%; 16 | left: 50%; 17 | transform: translate(-50%, -50%); 18 | width: 400px; 19 | max-height: 80%; 20 | overflow-y: auto; 21 | background-color: #fff; 22 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 23 | z-index: 20; 24 | } 25 | 26 | /* Modal header */ 27 | .modal-header { 28 | display: flex; 29 | align-items: center; 30 | justify-content: space-between; 31 | padding: 20px; 32 | border-bottom: 1px solid #ddd; 33 | } 34 | 35 | .modal-header h2 { 36 | font-size: 22px; 37 | font-weight: bold; 38 | margin: 0; 39 | } 40 | 41 | .modal-header .close-button { 42 | font-size: 20px; 43 | font-weight: bold; 44 | text-decoration: none; 45 | color: #999; 46 | } 47 | 48 | .modal-header .close-button:hover { 49 | color: #333; 50 | } 51 | 52 | /* Modal body */ 53 | .modal-body { 54 | padding: 20px; 55 | } 56 | 57 | .modal-body p { 58 | font-size: 16px; 59 | margin: 0; 60 | } 61 | 62 | .modal-body .error-message { 63 | color: red; 64 | } 65 | .button { 66 | display: block; 67 | margin: 20px auto; 68 | padding: 10px 20px; 69 | border: none; 70 | border-radius: 5px; 71 | background-color: #333; 72 | color: #fff; 73 | font-size: 16px; 74 | cursor: pointer; 75 | } 76 | 77 | .button:hover { 78 | background-color: #555; 79 | } 80 | -------------------------------------------------------------------------------- /Projects/AddUser/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-family: sans-serif; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | } -------------------------------------------------------------------------------- /Projects/AddUser/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/Screenshot from 2023-01-14 18-35-59.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Create-Read-React-Frontend-Backend-Communication/Screenshot from 2023-01-14 18-35-59.png -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-the-complete-guide", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.4.1", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.0", 10 | "react-dom": "^16.13.0", 11 | "react-scripts": "3.4.0" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Create-Read-React-Frontend-Backend-Communication/public/favicon.ico -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Create-Read-React-Frontend-Backend-Communication/public/logo192.png -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Create-Read-React-Frontend-Backend-Communication/public/logo512.png -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/readme.md: -------------------------------------------------------------------------------- 1 | 2 |
    3 | 4 |
    5 | 6 | # React Movie Tracker (Firebase Backend) 7 | 8 | ## I developed this project without the help of an instructor. 9 | A react app to `GET` and `POST` requests, connecting to databse(firebase) 10 | 11 | ## Features 12 | 13 | - Add movie description to database 14 | - Retrieve Data from the database 15 | - Frontend-Backend Communication 16 | 17 | ## Getting Started 18 | 19 | To get started, clone the repository and `install` the dependencies: 20 | 21 | ```sh 22 | 23 | git clone https://github.com/muhib7353/React-js-Blogs-and-Projects.git 24 | cd Projects 25 | cd Create-Read-React-Frontend-Backend-Communication 26 | npm install 27 | ``` 28 | 29 | Then, you can start the development server with the following command: 30 | 31 | ```sh 32 | npm start 33 | ``` 34 | 35 | This will start the development server and open the app in your default web browser. The app will automatically reload whenever you make changes to the code. 36 | 37 | ## For Production 38 | 39 | npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file. For more information see the production build section. 40 | 41 | For environments using Node, the easiest way to handle this would be to install serve and let it handle the rest 42 | 43 | ```sh 44 | npm install -g serve 45 | serve -s build 46 | ``` 47 | -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/src/App.css: -------------------------------------------------------------------------------- 1 | section { 2 | margin: 1rem auto; 3 | width: 90%; 4 | max-width: 40rem; 5 | text-align: center; 6 | background-color: white; 7 | padding: 2rem; 8 | border-radius: 12px; 9 | } 10 | 11 | button { 12 | font: inherit; 13 | cursor: pointer; 14 | background: #230052; 15 | border: 1px solid #230052; 16 | color: white; 17 | padding: 0.75rem 2rem; 18 | border-radius: 20px; 19 | } 20 | 21 | button:focus { 22 | outline: none; 23 | } 24 | 25 | button:hover, 26 | button:active { 27 | background-color: #460897; 28 | border-color: #460897; 29 | } 30 | -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useCallback } from "react"; 2 | import AddMovie from "./components/AddMovie"; 3 | import MoviesList from "./components/MoviesList"; 4 | import "./App.css"; 5 | 6 | function App() { 7 | const [movieData, updateMoviesData] = useState([]); 8 | const [isLoading, setLoading] = useState(false); 9 | const [error, setError] = useState(null); 10 | //Get Method by default 11 | const fetchingMoviesHandler = useCallback(async () => { 12 | try { 13 | setLoading(true); 14 | setError(null); 15 | const response = await fetch( 16 | "https://react-muhib-default-rtdb.firebaseio.com/movies.json" 17 | ); 18 | if (!response.ok) { 19 | throw new Error("Something went wrong"); 20 | } 21 | const data = await response.json(); 22 | console.log(data) 23 | let loadedMovies = []; 24 | for (const key in data) { 25 | loadedMovies.push({ 26 | id: key, 27 | title: data[key].title, 28 | openingText: data[key].openingText, 29 | releaseDate: data[key].releaseDate, 30 | }); 31 | } 32 | updateMoviesData(loadedMovies); 33 | } catch (error) { 34 | setError(error.message); 35 | } 36 | setLoading(false); 37 | }, []); 38 | 39 | useEffect(() => { 40 | fetchingMoviesHandler(); 41 | }, [fetchingMoviesHandler]); 42 | 43 | async function addMovieHandler(movie) { 44 | const response = await fetch( 45 | "https://react-muhib-default-rtdb.firebaseio.com/movies.json", 46 | { 47 | method: "POST", 48 | body: JSON.stringify(movie), 49 | headers: { 50 | "content-type": "application/json", 51 | }, 52 | } 53 | ); 54 | const data = response.json(); 55 | console.log(data); 56 | } 57 | 58 | let content =

    Found no Movies

    ; 59 | if (movieData.length > 0) { 60 | content = ; 61 | } 62 | if (error) { 63 | content =

    {error}

    ; 64 | } 65 | if (isLoading) { 66 | content =

    Loading....

    ; 67 | } 68 | 69 | return ( 70 | 71 |
    72 | 73 |
    74 |
    75 | 76 |
    77 | 78 |
    {content}
    79 |     80 | ); 81 | } 82 | 83 | export default App; 84 | -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/src/components/AddMovie.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react'; 2 | 3 | import classes from './AddMovie.module.css'; 4 | 5 | function AddMovie(props) { 6 | const titleRef = useRef(''); 7 | const openingTextRef = useRef(''); 8 | const releaseDateRef = useRef(''); 9 | 10 | function submitHandler(event) { 11 | event.preventDefault(); 12 | 13 | // could add validation here... 14 | 15 | const movie = { 16 | title: titleRef.current.value, 17 | openingText: openingTextRef.current.value, 18 | releaseDate: releaseDateRef.current.value, 19 | }; 20 | 21 | props.onAddMovie(movie); 22 | } 23 | 24 | return ( 25 |
    26 |
    27 | 28 | 29 |
    30 |
    31 | 32 | 33 |
    34 |
    35 | 36 | 37 |
    38 | 39 |
    40 | ); 41 | } 42 | 43 | export default AddMovie; 44 | -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/src/components/AddMovie.module.css: -------------------------------------------------------------------------------- 1 | .control { 2 | margin: 1rem 0; 3 | } 4 | 5 | .control label { 6 | display: block; 7 | font-weight: bold; 8 | margin-bottom: 0.5rem; 9 | text-align: left; 10 | } 11 | 12 | .control input, 13 | .control textarea { 14 | display: block; 15 | width: 100%; 16 | font: inherit; 17 | padding: 0.2rem; 18 | border-radius: 12px; 19 | border: 1px solid #ccc; 20 | } 21 | 22 | .control input:focus, 23 | .control textarea:focus { 24 | outline: none; 25 | border-color: #230052; 26 | } -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/src/components/Movie.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import classes from './Movie.module.css'; 4 | 5 | const Movie = (props) => { 6 | return ( 7 |
  • 8 |

    {props.title}

    9 |

    {props.releaseDate}

    10 |

    {props.openingText}

    11 |
    • 12 | ); 13 | }; 14 | 15 | export default Movie; 16 | -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/src/components/Movie.module.css: -------------------------------------------------------------------------------- 1 | .movie { 2 | margin: 1rem; 3 | padding: 1rem; 4 | background-color: #230052; 5 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); 6 | border-radius: 12px; 7 | text-align: center; 8 | color: white; 9 | } 10 | 11 | .movie h2 { 12 | font-size: 2rem; 13 | color: #f7e702; 14 | } 15 | 16 | .movie h3 { 17 | color: #eccf77; 18 | margin: 0; 19 | font-size: 1rem; 20 | } 21 | -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/src/components/MoviesList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Movie from './Movie'; 4 | import classes from './MoviesList.module.css'; 5 | 6 | const MovieList = (props) => { 7 | return ( 8 |
      9 | {props.movies.map((movie) => ( 10 | 16 | ))} 17 |
    18 | ); 19 | }; 20 | 21 | export default MovieList; 22 | -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/src/components/MoviesList.module.css: -------------------------------------------------------------------------------- 1 | .movies-list { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-family: sans-serif; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | background-color: #272727; 12 | } -------------------------------------------------------------------------------- /Projects/Create-Read-React-Frontend-Backend-Communication/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-complete-guide", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.6", 7 | "@testing-library/react": "^11.2.2", 8 | "@testing-library/user-event": "^12.5.0", 9 | "react": "^17.0.1", 10 | "react-dom": "^17.0.1", 11 | "react-scripts": "4.0.1", 12 | "web-vitals": "^0.2.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | }, 38 | "devDependencies": { 39 | "webpack": "^4.44.2" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Expense_Tracker/public/favicon.ico -------------------------------------------------------------------------------- /Projects/Expense_Tracker/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Expense_Tracker/public/logo192.png -------------------------------------------------------------------------------- /Projects/Expense_Tracker/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Expense_Tracker/public/logo512.png -------------------------------------------------------------------------------- /Projects/Expense_Tracker/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/readme.md: -------------------------------------------------------------------------------- 1 | # Expense Tracker React App 2 | 3 | A simple expense tracking app built with React. 4 | 5 | ## Getting Started 6 | 7 | To get started, clone the repository and `install` the dependencies: 8 | 9 | ```sh 10 | git clone https://github.com/muhib7353/React-js-Blogs-and-Projects.git 11 | cd Projects 12 | cd Expense_Tracker 13 | npm install 14 | ``` 15 | 16 | Then, you can start the development server with the following command: 17 | 18 | ```sh 19 | npm start 20 | ``` 21 | 22 | This will start the development server and open the app in your default web browser. The app will automatically reload whenever you make changes to the code. 23 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Expenses from "./components/Expenses/Expenses"; 3 | import NewExpense from "./components/NewExpense/NewExpense"; 4 | let expenses = [ 5 | // { 6 | // id: "e1", 7 | // title: "Toilet Paper", 8 | // amount: 94.12, 9 | // date: new Date(2020, 7, 14), 10 | // }, 11 | // { id: "e2", title: "New TV", amount: 799.49, date: new Date(2021, 2, 12) }, 12 | // { 13 | // id: "e3", 14 | // title: "Car Insurance", 15 | // amount: 294.67, 16 | // date: new Date(2021, 2, 28), 17 | // }, 18 | // { 19 | // id: "e4", 20 | // title: "New Desk (Wooden)", 21 | // amount: 450, 22 | // date: new Date(2021, 5, 12), 23 | // }, 24 | ]; 25 | const App = () => { 26 | const [addedExpense, updateExpenses] = useState(expenses); 27 | 28 | const addExpenseData = (expense) => { 29 | console.log(expense); 30 | updateExpenses((previousExpenses) => { 31 | return [expense, ...previousExpenses]; 32 | }); 33 | }; 34 | 35 | return ( 36 |
    37 | 38 | 39 |
    40 | ); 41 | }; 42 | 43 | export default App; 44 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Chart/Chart.css: -------------------------------------------------------------------------------- 1 | .chart { 2 | padding: 1rem; 3 | border-radius: 12px; 4 | background-color: #f8dfff; 5 | text-align: center; 6 | display: flex; 7 | justify-content: space-around; 8 | height: 10rem; 9 | } -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Chart/Chart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Chart.css"; 3 | import ChartBar from "./ChartBar"; 4 | 5 | const Chart = (props) => { 6 | const dataPointValues = props.dataPoints.map((dataPoint) => dataPoint.value); 7 | const maxDataPoint = Math.max(...dataPointValues); 8 | return ( 9 |
    10 | {props.dataPoints.map((dataPoint) => ( 11 | 17 | ))} 18 |
    19 | ); 20 | }; 21 | 22 | export default Chart; 23 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Chart/ChartBar.css: -------------------------------------------------------------------------------- 1 | .chart-bar { 2 | height: 100%; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | } 7 | 8 | .chart-bar__inner { 9 | height: 100%; 10 | width: 100%; 11 | border: 1px solid #313131; 12 | border-radius: 12px; 13 | background-color: #c3b4f3; 14 | overflow: hidden; 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: flex-end; 18 | } 19 | 20 | .chart-bar__fill { 21 | background-color: #4826b9; 22 | width: 100%; 23 | transition: all 0.3s ease-out; 24 | } 25 | 26 | .chart-bar__label { 27 | font-weight: bold; 28 | font-size: 0.5rem; 29 | text-align: center; 30 | } 31 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Chart/ChartBar.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./ChartBar.css"; 3 | 4 | const ChartBar = (props) => { 5 | let barFillHeight = "0%"; 6 | if (props.maxValue > 0) { 7 | barFillHeight = Math.round((props.value / props.maxValue) * 100) + "%"; 8 | } 9 | return ( 10 |
    11 |
    12 |
    13 |
    14 |
    {props.label}
    15 |
    16 | ); 17 | }; 18 | 19 | export default ChartBar; 20 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Expenses/ExpenseChart.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Chart from "../Chart/Chart"; 3 | 4 | const ExpenseChart = (props) => { 5 | const charDataPoints = [ 6 | { label: "Jan", value: 0 }, 7 | { label: "Feb", value: 0 }, 8 | { label: "Mar", value: 0 }, 9 | { label: "Apr", value: 0 }, 10 | { label: "May", value: 0 }, 11 | { label: "Jun", value: 0 }, 12 | { label: "Jul", value: 0 }, 13 | { label: "Aug", value: 0 }, 14 | { label: "Sep", value: 0 }, 15 | { label: "Oct", value: 0 }, 16 | { label: "Nov", value: 0 }, 17 | { label: "Dec", value: 0 }, 18 | ]; 19 | for (const expense of props.expenses) { 20 | const expenseMonth = expense.date.getMonth(); 21 | charDataPoints[expenseMonth].value += expense.amount; 22 | } 23 | return ( 24 |
    25 | 26 |
    27 | ); 28 | }; 29 | 30 | export default ExpenseChart; 31 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Expenses/ExpenseDate.css: -------------------------------------------------------------------------------- 1 | .expense-date { 2 | display: flex; 3 | flex-direction: column; 4 | width: 5.5rem; 5 | height: 5.5rem; 6 | border: 1px solid #ececec; 7 | background-color: #2a2a2a; 8 | color: white; 9 | border-radius: 12px; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .expense-date__month { 15 | font-size: 0.75rem; 16 | font-weight: bold; 17 | } 18 | 19 | .expense-date__year { 20 | font-size: 0.75rem; 21 | } 22 | 23 | .expense-date__day { 24 | font-size: 1.5rem; 25 | font-weight: bold; 26 | } 27 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Expenses/ExpenseDate.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./ExpenseDate.css"; 3 | 4 | const ExpenseDate = (props) => { 5 | const month = props.date.toLocaleString("en-US", { month: "long" }); 6 | const day = props.date.toLocaleString("en-US", { day: "2-digit" }); 7 | const year = props.date.getFullYear(); 8 | 9 | return ( 10 |
    11 |
    {month}
    12 |
    {year}
    13 |
    {day}
    14 |
    15 | ); 16 | }; 17 | 18 | export default ExpenseDate; 19 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Expenses/ExpenseFilter.css: -------------------------------------------------------------------------------- 1 | .expenses-filter { 2 | color: white; 3 | padding: 0 1rem; 4 | } 5 | 6 | .expenses-filter__control { 7 | display: flex; 8 | width: 100%; 9 | align-items: center; 10 | justify-content: space-between; 11 | margin: 1rem 0; 12 | } 13 | 14 | .expenses-filter label { 15 | font-weight: bold; 16 | margin-bottom: 0.5rem; 17 | } 18 | 19 | .expenses-filter select { 20 | font: inherit; 21 | padding: 0.5rem 3rem; 22 | font-weight: bold; 23 | border-radius: 6px; 24 | } 25 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Expenses/ExpenseFilter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './ExpenseFilter.css'; 4 | 5 | const ExpensesFilter = (props) => { 6 | const dropdownChangeHandler = (event) => { 7 | props.onChangeFilter(event.target.value); 8 | }; 9 | 10 | return ( 11 |
    12 |
    13 | 14 | 20 |
    21 |
    22 | ); 23 | }; 24 | 25 | export default ExpensesFilter; -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Expenses/ExpenseITem.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import "./ExpenseItem.css"; 4 | import Card from "../UI/Card"; 5 | import ExpenseDate from "./ExpenseDate"; 6 | 7 | const ExpenseItem = (props) => { 8 | return ( 9 | 10 | 11 |
    12 |

    {props.title}

    13 |
    14 |
    $ {props.amount}
    15 |     16 | ); 17 | }; 18 | 19 | export default ExpenseItem; 20 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Expenses/ExpenseItem.css: -------------------------------------------------------------------------------- 1 | .expense-item { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | padding: 0.5rem; 6 | margin: 1rem 0; 7 | background-color: #4b4b4b; 8 | } 9 | 10 | .expense-item__description { 11 | display: flex; 12 | flex-direction: column; 13 | gap: 1rem; 14 | align-items: flex-end; 15 | flex-flow: column-reverse; 16 | justify-content: flex-start; 17 | flex: 1; 18 | } 19 | 20 | .expense-item h2 { 21 | color: #3a3a3a; 22 | font-size: 1rem; 23 | flex: 1; 24 | margin: 0 1rem; 25 | color: white; 26 | } 27 | 28 | .expense-item__price { 29 | font-size: 1rem; 30 | font-weight: bold; 31 | color: white; 32 | background-color: #40005d; 33 | border: 1px solid white; 34 | padding: 0.5rem; 35 | border-radius: 12px; 36 | } 37 | 38 | @media (min-width: 580px) { 39 | .expense-item__description { 40 | flex-direction: row; 41 | align-items: center; 42 | justify-content: flex-start; 43 | flex: 1; 44 | } 45 | 46 | .expense-item__description h2 { 47 | font-size: 1.25rem; 48 | } 49 | 50 | .expense-item__price { 51 | font-size: 1.25rem; 52 | padding: 0.5rem 1.5rem; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Expenses/Expenses.css: -------------------------------------------------------------------------------- 1 | .expenses { 2 | padding: 1rem; 3 | background-color: rgb(31, 31, 31); 4 | margin: 2rem auto; 5 | width: 50rem; 6 | max-width: 95%; 7 | } -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Expenses/Expenses.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | import Card from "../UI/Card"; 4 | import "./Expenses.css"; 5 | import ExpensesFilter from "./ExpenseFilter"; 6 | import ExpensesList from "./ExpensesList"; 7 | import ExpenseChart from "./ExpenseChart"; 8 | const Expenses = (props) => { 9 | const [filteredYear, setFilteredYear] = useState("2020"); 10 | 11 | const filterChangeHandler = (selectedYear) => { 12 | setFilteredYear(selectedYear); 13 | }; 14 | const filteredExpenses = props.items.filter((expense) => { 15 | return expense.date.getFullYear().toString() === filteredYear; 16 | }); 17 | 18 | return ( 19 |
  • 20 | 21 | 25 | 26 | 27 | 28 |
    • 29 | ); 30 | }; 31 | 32 | export default Expenses; 33 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Expenses/ExpensesList.css: -------------------------------------------------------------------------------- 1 | .expenses-list { 2 | list-style: none; 3 | padding: 0; 4 | } 5 | 6 | .expenses-list__fallback { 7 | color: white; 8 | text-align: center; 9 | } -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/Expenses/ExpensesList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./ExpensesList.css"; 3 | import ExpenseItem from "./ExpenseITem"; 4 | 5 | const ExpensesList = (props) => { 6 | if (props.items.length === 0) { 7 | return

    Found no Expenses

    ; 8 | } 9 | return ( 10 |
      11 | {props.items.map((expense) => ( 12 | 18 | ))} 19 |
    20 | ); 21 | }; 22 | 23 | export default ExpensesList; 24 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/NewExpense/ExpenseForm.css: -------------------------------------------------------------------------------- 1 | .new-expense__controls { 2 | display: flex; 3 | flex-wrap: wrap; 4 | gap: 1rem; 5 | margin-bottom: 1rem; 6 | text-align: left; 7 | } 8 | 9 | .new-expense__control label { 10 | font-weight: bold; 11 | margin-bottom: 0.5rem; 12 | display: block; 13 | } 14 | 15 | .new-expense__control input { 16 | font: inherit; 17 | padding: 0.5rem; 18 | border-radius: 6px; 19 | border: 1px solid #ccc; 20 | width: 20rem; 21 | max-width: 100%; 22 | } 23 | 24 | .new-expense__actions { 25 | text-align: right; 26 | } 27 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/NewExpense/ExpenseForm.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import "./ExpenseForm.css"; 3 | const ExpenseForm = (props) => { 4 | const [changedTitle, setTitleChanged] = useState(""); 5 | const [changedPrice, setPriceChanged] = useState(""); 6 | const [changedDate, setDateChanged] = useState(""); 7 | 8 | const titleChangeHandler = (e) => { 9 | setTitleChanged(e.target.value); 10 | }; 11 | const priceChangeHandler = (e) => { 12 | setPriceChanged(e.target.value); 13 | }; 14 | const dateChangeHandler = (e) => { 15 | setDateChanged(e.target.value); 16 | }; 17 | const submitHandler = (e) => { 18 | e.preventDefault(); 19 | const expenseData = { 20 | title: changedTitle, 21 | amount: changedPrice, 22 | date: new Date(changedDate), 23 | }; 24 | props.onSaveExpenseDate(expenseData); 25 | setTitleChanged(""); 26 | setPriceChanged(""); 27 | setDateChanged(""); 28 | }; 29 | 30 | return ( 31 |
    32 |
    33 | 34 | 35 |
    36 |
    37 | 38 | 45 |
    46 |
    47 | 48 | 55 |
    56 |
    57 | 58 |
    59 |
    60 | ); 61 | }; 62 | 63 | export default ExpenseForm; 64 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/NewExpense/NewExpense.css: -------------------------------------------------------------------------------- 1 | .new-expense { 2 | background-color: #a892ee; 3 | padding: 1rem; 4 | margin: 2rem auto; 5 | width: 50rem; 6 | max-width: 95%; 7 | border-radius: 12px; 8 | text-align: center; 9 | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); 10 | } 11 | 12 | .new-expense button { 13 | font: inherit; 14 | cursor: pointer; 15 | padding: 1rem 2rem; 16 | border: 1px solid #40005d; 17 | background-color: #40005d; 18 | color: white; 19 | border-radius: 12px; 20 | margin-right: 1rem; 21 | } 22 | 23 | .new-expense button:hover, 24 | .new-expense button:active { 25 | background-color: #510674; 26 | border-color: #510674; 27 | } 28 | 29 | .new-expense button.alternative { 30 | color: #220131; 31 | border-color: transparent; 32 | background-color: transparent; 33 | } 34 | 35 | .new-expense button.alternative:hover, 36 | .new-expense button.alternative:active { 37 | background-color: #ddb3f8; 38 | } 39 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/NewExpense/NewExpense.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ExpenseForm from "./ExpenseForm"; 3 | import "./NewExpense.css"; 4 | const NewExpense = (props) => { 5 | const expenseDataHandler = (expenseData) => { 6 | const expense = { 7 | ...expenseData, 8 | id: Math.random().toString(), 9 | }; 10 | props.afterAddNewExpense(expense); 11 | }; 12 | return ( 13 |
    14 | 15 |
    16 | ); 17 | }; 18 | 19 | export default NewExpense; 20 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/UI/Card.css: -------------------------------------------------------------------------------- 1 | .card { 2 | border-radius: 12px; 3 | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); 4 | } -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/components/UI/Card.js: -------------------------------------------------------------------------------- 1 | //This is the wrapper function 2 | import React from "react"; 3 | import "./Card.css"; 4 | 5 | const Card = (props) => { 6 | const classes = "card " + props.className; 7 | return
    {props.children}
    ; 8 | }; 9 | 10 | export default Card; 11 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: 'Noto Sans JP', sans-serif; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | background-color: #3f3f3f; 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Projects/Expense_Tracker/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "login-form", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Firebase Custom Hooks Task Manager/public/favicon.ico -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Firebase Custom Hooks Task Manager/public/logo192.png -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Firebase Custom Hooks Task Manager/public/logo512.png -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from 'react'; 2 | 3 | import Tasks from './components/Tasks/Tasks'; 4 | import NewTask from './components/NewTask/NewTask'; 5 | import useHttp from './hooks/use-http'; 6 | 7 | 8 | function App() { 9 | const [tasks, setTasks] = useState([]); 10 | 11 | const { isLoading, error, sendRequest: fetchTasks } = useHttp(); 12 | 13 | useEffect(() => { 14 | const transformTasks = (tasksObj) => { 15 | const loadedTasks = []; 16 | 17 | for (const taskKey in tasksObj) { 18 | loadedTasks.push({ id: taskKey, text: tasksObj[taskKey].text }); 19 | } 20 | 21 | setTasks(loadedTasks); 22 | }; 23 | 24 | fetchTasks( 25 | { url: 'https://react-http-53317-default-rtdb.firebaseio.com/tasks.json' }, 26 | transformTasks 27 | ); 28 | }, [fetchTasks]); 29 | 30 | const taskAddHandler = (task) => { 31 | setTasks((prevTasks) => prevTasks.concat(task)); 32 | }; 33 | 34 | return ( 35 | 36 | 37 | 43 | 44 | ); 45 | } 46 | 47 | export default App; 48 | -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/src/components/NewTask/NewTask.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | import Section from '../UI/Section'; 4 | import TaskForm from './TaskForm'; 5 | import useHttp from '../../hooks/use-http'; 6 | 7 | const NewTask = (props) => { 8 | 9 | 10 | const { isLoading, error, sendRequest: sendTaskRequest } = useHttp(); 11 | 12 | const createTask = (taskText, taskData) => { 13 | const generatedId = taskData.name; 14 | const createdTask = { id: generatedId, text: taskText }; 15 | 16 | props.onAddTask(createdTask); 17 | }; 18 | 19 | const enterTaskHandler = async (taskText) => { 20 | 21 | sendTaskRequest( 22 | { 23 | url: 'https://react-http-53317-default-rtdb.firebaseio.com/tasks.json' 24 | , 25 | method: 'POST', 26 | headers: { 27 | 'Content-Type': 'application/json', 28 | }, 29 | body: { text: taskText }, 30 | }, createTask.bind(null, taskText)) 31 | 32 | }; 33 | 34 | return ( 35 |
    36 | 37 | {error &&

    {error}

    } 38 |
    39 | ); 40 | }; 41 | 42 | export default NewTask; 43 | -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/src/components/NewTask/TaskForm.js: -------------------------------------------------------------------------------- 1 | import { useRef } from 'react'; 2 | 3 | import classes from './TaskForm.module.css'; 4 | 5 | const TaskForm = (props) => { 6 | const taskInputRef = useRef(); 7 | 8 | const submitHandler = (event) => { 9 | event.preventDefault(); 10 | 11 | const enteredValue = taskInputRef.current.value; 12 | 13 | if (enteredValue.trim().length > 0) { 14 | props.onEnterTask(enteredValue); 15 | } 16 | }; 17 | 18 | return ( 19 |
    20 | 21 | 22 |
    23 | ); 24 | }; 25 | 26 | export default TaskForm; 27 | -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/src/components/NewTask/TaskForm.module.css: -------------------------------------------------------------------------------- 1 | .form { 2 | display: flex; 3 | justify-content: space-between; 4 | } 5 | 6 | .form input { 7 | font:inherit; 8 | padding: 0.25rem; 9 | border: none; 10 | border-bottom: 3px solid #ccc; 11 | flex: 1; 12 | margin-right: 2rem; 13 | } 14 | 15 | .form input:focus { 16 | outline: none; 17 | border-color: #7a0144; 18 | } -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/src/components/Tasks/TaskItem.js: -------------------------------------------------------------------------------- 1 | import classes from './TaskItem.module.css'; 2 | 3 | const TaskItem = (props) => { 4 | return
  • {props.children}
    • 5 | }; 6 | 7 | export default TaskItem; -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/src/components/Tasks/TaskItem.module.css: -------------------------------------------------------------------------------- 1 | .task { 2 | border-bottom: 1px solid #ccc; 3 | padding: 1rem; 4 | font-weight: bold; 5 | font-size: 1.25rem; 6 | } 7 | 8 | .task:last-of-type { 9 | border-bottom: none; 10 | } -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/src/components/Tasks/Tasks.js: -------------------------------------------------------------------------------- 1 | import Section from '../UI/Section'; 2 | import TaskItem from './TaskItem'; 3 | import classes from './Tasks.module.css'; 4 | 5 | const Tasks = (props) => { 6 | let taskList =

    No tasks found. Start adding some!

    ; 7 | 8 | if (props.items.length > 0) { 9 | taskList = ( 10 |
      11 | {props.items.map((task) => ( 12 | {task.text} 13 | ))} 14 |
    15 | ); 16 | } 17 | 18 | let content = taskList; 19 | 20 | if (props.error) { 21 | content = ; 22 | } 23 | 24 | if (props.loading) { 25 | content = 'Loading tasks...'; 26 | } 27 | 28 | return ( 29 |
    30 |
    {content}
    31 |
    32 | ); 33 | }; 34 | 35 | export default Tasks; 36 | -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/src/components/Tasks/Tasks.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | text-align: center; 3 | } 4 | 5 | .container ul { 6 | list-style: none; 7 | margin: 0; 8 | padding: 0; 9 | text-align: left; 10 | } 11 | -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/src/components/UI/Section.js: -------------------------------------------------------------------------------- 1 | import classes from './Section.module.css'; 2 | 3 | const Section = (props) => { 4 | return
    {props.children}
    ; 5 | }; 6 | 7 | export default Section; 8 | -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/src/components/UI/Section.module.css: -------------------------------------------------------------------------------- 1 | .section { 2 | max-width: 40rem; 3 | margin: 2rem auto; 4 | background-color: white; 5 | padding: 1rem; 6 | border-radius: 12px; 7 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); 8 | } 9 | -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/src/hooks/use-http.js: -------------------------------------------------------------------------------- 1 | import { useState, useCallback } from 'react'; 2 | 3 | const useHttp = () => { 4 | const [isLoading, setIsLoading] = useState(false); 5 | const [error, setError] = useState(null); 6 | 7 | const sendRequest = useCallback(async (requestConfig, applyData) => { 8 | setIsLoading(true); 9 | setError(null); 10 | try { 11 | const response = await fetch(requestConfig.url, { 12 | method: requestConfig.method ? requestConfig.method : 'GET', 13 | headers: requestConfig.headers ? requestConfig.headers : {}, 14 | body: requestConfig.body ? JSON.stringify(requestConfig.body) : null, 15 | }); 16 | 17 | if (!response.ok) { 18 | throw new Error('Request failed!'); 19 | } 20 | 21 | const data = await response.json(); 22 | applyData(data); 23 | } catch (err) { 24 | setError(err.message || 'Something went wrong!'); 25 | } 26 | setIsLoading(false); 27 | }, []); 28 | 29 | return { 30 | isLoading, 31 | error, 32 | sendRequest, 33 | }; 34 | }; 35 | 36 | export default useHttp; -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: 'Noto Sans JP', sans-serif; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | background-color: #3f3f3f; 14 | } 15 | 16 | button { 17 | cursor: pointer; 18 | font: inherit; 19 | background-color: #7a0144; 20 | border: 1px solid #7a0144; 21 | border-radius: 20px; 22 | padding: 0.5rem 2rem; 23 | color: white; 24 | } 25 | 26 | button:hover, 27 | button:active { 28 | background-color: #9c095a; 29 | border-color: #9c095a; 30 | } 31 | -------------------------------------------------------------------------------- /Projects/Firebase Custom Hooks Task Manager/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/Screenshot from 2023-01-14 18-26-26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Food Ordering App/Screenshot from 2023-01-14 18-26-26.png -------------------------------------------------------------------------------- /Projects/Food Ordering App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-complete-guide", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.6", 7 | "@testing-library/react": "^11.2.2", 8 | "@testing-library/user-event": "^12.5.0", 9 | "react": "^17.0.1", 10 | "react-dom": "^17.0.1", 11 | "react-scripts": "4.0.1", 12 | "web-vitals": "^0.2.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Food Ordering App/public/favicon.ico -------------------------------------------------------------------------------- /Projects/Food Ordering App/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 |
    33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Food Ordering App/public/logo192.png -------------------------------------------------------------------------------- /Projects/Food Ordering App/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Food Ordering App/public/logo512.png -------------------------------------------------------------------------------- /Projects/Food Ordering App/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/readme.md: -------------------------------------------------------------------------------- 1 | 2 |
    3 | 4 |
    5 | 6 | # React FOOD ORDERING APP (CRUD-Functionality) 7 | 8 | ## I developed this project without the help of an instructor. 9 | A simple ADD Food to Cart built with React. 10 | 11 | ## Features 12 | 13 | - Add food to cart 14 | - Delete carts 15 | - more add carts 16 | - Read carts 17 | - Input Validations(model-windows on specific errors) 18 | 19 | ## Getting Started 20 | 21 | To get started, clone the repository and `install` the dependencies: 22 | 23 | ```sh 24 | 25 | git clone https://github.com/muhib7353/React-js-Blogs-and-Projects.git 26 | cd Projects 27 | cd Food Ordering App 28 | npm install 29 | ``` 30 | 31 | Then, you can start the development server with the following command: 32 | 33 | ```sh 34 | npm start 35 | ``` 36 | 37 | This will start the development server and open the app in your default web browser. The app will automatically reload whenever you make changes to the code. 38 | 39 | ## For Production 40 | 41 | npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /static/js/main..js file. For more information see the production build section. 42 | 43 | For environments using Node, the easiest way to handle this would be to install serve and let it handle the rest 44 | 45 | ```sh 46 | npm install -g serve 47 | serve -s build 48 | ``` 49 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Cart from "./Components/Cart/Cart"; 3 | import Header from "./Components/Layout/Header"; 4 | import Meals from "./Components/Meals/Meals"; 5 | import CartProvider from "./Store/CartProvider"; 6 | function App() { 7 | const [isCartShown, updateCartShown] = useState(false); 8 | 9 | const showCartHandler = () => { 10 | updateCartShown(true); 11 | }; 12 | const hideCartHandler = () => { 13 | updateCartShown(false); 14 | }; 15 | 16 | return ( 17 | 18 | {isCartShown && } 19 |
    20 |
    21 | 22 |
    23 | 24 | ); 25 | } 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Assets/meals.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/Food Ordering App/src/Assets/meals.jpg -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Cart/Cart.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react"; 2 | import cartContext from "../../Store/cart-context"; 3 | import Model from "../UI/Model"; 4 | import * as cartStyle from "./Cart.module.css"; 5 | import CartItem from "./CartItem"; 6 | 7 | const Cart = (props) => { 8 | const ctx = useContext(cartContext); 9 | const itemsLength = ctx.item.length > 0; 10 | const totalAmount = `$ ${ctx.totalAmount.toFixed(2)}`; 11 | const onRemoveHandler = (id) => { 12 | ctx.removeItem(id); 13 | }; 14 | const onAddHandler = (item) => { 15 | ctx.addItem({ ...item, amount: 1 }); 16 | }; 17 | const cartItems = ( 18 |
      19 | {ctx.item.map((items) => { 20 | return ( 21 | 29 | ); 30 | })} 31 |
    32 | ); 33 | return ( 34 | 35 | {cartItems} 36 |
    37 | Total Amount 38 | {totalAmount} 39 |
    40 |
    41 | 44 | {itemsLength && } 45 |
    46 |     47 | ); 48 | }; 49 | export default Cart; 50 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Cart/Cart.module.css: -------------------------------------------------------------------------------- 1 | .cart-items { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | max-height: 20rem; 6 | overflow: scroll; 7 | } 8 | 9 | .total { 10 | display: flex; 11 | justify-content: space-between; 12 | align-items: center; 13 | font-weight: bold; 14 | font-size: 1.5rem; 15 | margin: 1rem 0; 16 | } 17 | 18 | .actions { 19 | text-align: right; 20 | } 21 | 22 | .actions button { 23 | font: inherit; 24 | cursor: pointer; 25 | background-color: transparent; 26 | border: 1px solid #8a2b06; 27 | padding: 0.5rem 2rem; 28 | border-radius: 25px; 29 | margin-left: 1rem; 30 | } 31 | 32 | .actions button:hover, 33 | .actions button:active { 34 | background-color: #5a1a01; 35 | border-color: #5a1a01; 36 | color: white; 37 | } 38 | 39 | .actions .button--alt { 40 | color: #8a2b06; 41 | } 42 | 43 | .actions .button { 44 | background-color: #8a2b06; 45 | color: white; 46 | } 47 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Cart/CartIcon.js: -------------------------------------------------------------------------------- 1 | const CartIcon = () => { 2 | return ( 3 | 8 | 9 | 10 | ); 11 | }; 12 | 13 | export default CartIcon; 14 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Cart/CartItem.js: -------------------------------------------------------------------------------- 1 | import classes from "./CartItem.module.css"; 2 | 3 | const CartItem = (props) => { 4 | const price = `$ ${props.price.toFixed(2)}`; 5 | 6 | return ( 7 |
  • 8 |
    9 |

    {props.name}

    10 |
    11 | {price} 12 | x {props.amount} 13 |
    14 |
    15 |
    16 | 17 | 18 |
    19 |
    • 20 | ); 21 | }; 22 | 23 | export default CartItem; 24 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Cart/CartItem.module.css: -------------------------------------------------------------------------------- 1 | .cart-item { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | border-bottom: 2px solid #8a2b06; 6 | padding: 1rem 0; 7 | margin: 1rem 0; 8 | } 9 | 10 | .cart-item h2 { 11 | margin: 0 0 0.5rem 0; 12 | color: #363636; 13 | } 14 | 15 | .summary { 16 | width: 10rem; 17 | display: flex; 18 | justify-content: space-between; 19 | align-items: center; 20 | } 21 | 22 | .price { 23 | font-weight: bold; 24 | color: #8a2b06; 25 | } 26 | 27 | .amount { 28 | font-weight: bold; 29 | border: 1px solid #ccc; 30 | padding: 0.25rem 0.75rem; 31 | border-radius: 6px; 32 | color: #363636; 33 | } 34 | 35 | .actions { 36 | display: flex; 37 | flex-direction: column; 38 | } 39 | 40 | @media (min-width: 768px) { 41 | .actions { 42 | flex-direction: row; 43 | } 44 | } 45 | 46 | .cart-item button { 47 | font: inherit; 48 | font-weight: bold; 49 | font-size: 1.25rem; 50 | color: #8a2b06; 51 | border: 1px solid #8a2b06; 52 | width: 3rem; 53 | text-align: center; 54 | border-radius: 6px; 55 | background-color: transparent; 56 | cursor: pointer; 57 | margin-left: 1rem; 58 | margin: 0.25rem; 59 | } 60 | 61 | .cart-item button:hover, 62 | .cart-item button:active { 63 | background-color: #8a2b06; 64 | color: white; 65 | } 66 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Layout/Header.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import * as headerStyle from "./Header.module.css"; 3 | import image from "../../Assets/meals.jpg"; 4 | import HeaderCartButton from "./HeaderCartButton"; 5 | const Header = (props) => { 6 | return ( 7 | 8 |
    9 |

    Muhib Food Orders

    10 | 11 |
    12 |
    13 | Food PIC 14 |
    15 |     16 | ); 17 | }; 18 | 19 | export default Header; 20 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Layout/Header.module.css: -------------------------------------------------------------------------------- 1 | .header { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 5rem; 7 | background-color: #8a2b06; 8 | color: white; 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | padding: 0 10%; 13 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); 14 | z-index: 10; 15 | } 16 | 17 | .main-image { 18 | width: 100%; 19 | height: 25rem; 20 | z-index: 0; 21 | overflow: hidden; 22 | } 23 | 24 | .main-image img { 25 | width: 110%; 26 | height: 100%; 27 | object-fit: cover; 28 | transform: rotateZ(-5deg) translateY(-4rem) translateX(-1rem); 29 | } 30 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Layout/HeaderCartButton.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useContext, useEffect, useState } from "react"; 2 | import * as buttonStyle from "./HeaderCartButton.module.css"; 3 | import CartIcon from "../Cart/CartIcon"; 4 | import cartContext from "../../Store/cart-context"; 5 | const HeaderCartButton = (props) => { 6 | const cartCtx = useContext(cartContext); 7 | const numberOfCarts = cartCtx.item.reduce((num, item) => { 8 | return num + item.amount; 9 | }, 0); 10 | const items = cartCtx.item; 11 | const [isBump, updateBump] = useState(false); 12 | useEffect(() => { 13 | updateBump(true); 14 | const timer = setTimeout(() => { 15 | updateBump(false); 16 | }, 300); 17 | return () => { 18 | clearTimeout(timer); 19 | }; 20 | }, [items]); 21 | 22 | const buttonClass = `${buttonStyle.button} ${isBump ? buttonStyle.bump : ""}`; 23 | return ( 24 | 25 | 32 | 33 | ); 34 | }; 35 | 36 | export default HeaderCartButton; 37 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Layout/HeaderCartButton.module.css: -------------------------------------------------------------------------------- 1 | .button { 2 | cursor: pointer; 3 | font: inherit; 4 | border: none; 5 | background-color: #4d1601; 6 | color: white; 7 | padding: 0.75rem 3rem; 8 | display: flex; 9 | justify-content: space-around; 10 | align-items: center; 11 | border-radius: 25px; 12 | font-weight: bold; 13 | } 14 | 15 | .button:hover, 16 | .button:active { 17 | background-color: #2c0d00; 18 | } 19 | 20 | .icon { 21 | width: 1.35rem; 22 | height: 1.35rem; 23 | margin-right: 0.5rem; 24 | } 25 | 26 | .badge { 27 | background-color: #b94517; 28 | padding: 0.25rem 1rem; 29 | border-radius: 25px; 30 | margin-left: 1rem; 31 | font-weight: bold; 32 | } 33 | 34 | .button:hover .badge, 35 | .button:active .badge { 36 | background-color: #92320c; 37 | } 38 | 39 | .bump { 40 | animation: bump 300ms ease-out; 41 | } 42 | 43 | @keyframes bump { 44 | 0% { 45 | transform: scale(1); 46 | } 47 | 10% { 48 | transform: scale(0.9); 49 | } 50 | 30% { 51 | transform: scale(1.1); 52 | } 53 | 50% { 54 | transform: scale(1.15); 55 | } 56 | 100% { 57 | transform: scale(1); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Meals/AvailableMeals.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import * as availableMealsStyle from "./AvailableMeals.module.css"; 3 | import MealItem from "./MealItem/MealItem"; 4 | import Card from "../UI/Card"; 5 | const DUMMY_MEALS = [ 6 | { 7 | id: "m1", 8 | name: "Sushi", 9 | description: "Finest fish and veggies", 10 | price: 22.99, 11 | }, 12 | { 13 | id: "m2", 14 | name: "Schnitzel", 15 | description: "A german specialty!", 16 | price: 16.5, 17 | }, 18 | { 19 | id: "m3", 20 | name: "Barbecue Burger", 21 | description: "American, raw, meaty", 22 | price: 12.99, 23 | }, 24 | { 25 | id: "m4", 26 | name: "Green Bowl", 27 | description: "Healthy...and green...", 28 | price: 18.99, 29 | }, 30 | ]; 31 | const AvailableMeals = () => { 32 | const meals = DUMMY_MEALS.map((meal) => ( 33 | 40 | )); 41 | return ( 42 | 43 |
    44 | 45 |
      {meals}
    46 |     47 |     48 | ); 49 | }; 50 | 51 | export default AvailableMeals; 52 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Meals/AvailableMeals.module.css: -------------------------------------------------------------------------------- 1 | .meals { 2 | max-width: 60rem; 3 | width: 90%; 4 | margin: 2rem auto; 5 | animation: meals-appear 1s ease-out forwards; 6 | } 7 | 8 | .meals ul { 9 | list-style: none; 10 | margin: 0; 11 | padding: 0; 12 | } 13 | 14 | @keyframes meals-appear { 15 | from { 16 | opacity: 0; 17 | transform: translateY(3rem); 18 | } 19 | 20 | to { 21 | opacity: 1; 22 | transform: translateY(0); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Meals/MealItem/MealForm.js: -------------------------------------------------------------------------------- 1 | import * as formStyle from "./MealForm.module.css"; 2 | import React, { Fragment, useRef } from "react"; 3 | import Input from "../../UI/Input"; 4 | const MealForm = (props) => { 5 | const amountEntered = useRef(); 6 | 7 | const formHandler = (e) => { 8 | e.preventDefault(); 9 | const amountEnteredNumber = amountEntered.current.value; 10 | const pos = +amountEnteredNumber; 11 | props.onAddToCart(pos); 12 | }; 13 | return ( 14 | 15 |
    16 | 28 | 29 |
    30 |     31 | ); 32 | }; 33 | export default MealForm; 34 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Meals/MealItem/MealForm.module.css: -------------------------------------------------------------------------------- 1 | .form { 2 | text-align: right; 3 | } 4 | 5 | .form button { 6 | font: inherit; 7 | cursor: pointer; 8 | background-color: #8a2b06; 9 | border: 1px solid #8a2b06; 10 | color: white; 11 | padding: 0.25rem 2rem; 12 | border-radius: 20px; 13 | font-weight: bold; 14 | } 15 | 16 | .form button:hover, 17 | .form button:active { 18 | background-color: #641e03; 19 | border-color: #641e03; 20 | } 21 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Meals/MealItem/MealItem.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useContext } from "react"; 2 | import * as mealItemStyle from "./MealItem.module.css"; 3 | import MealForm from "./MealForm"; 4 | import cartContext from "../../../Store/cart-context"; 5 | 6 | const MealItem = (props) => { 7 | const price = `$ ${props.price.toFixed(2)}`; 8 | const ctx = useContext(cartContext); 9 | const onAdd = (amount) => { 10 | ctx.addItem({ 11 | id: props.id, 12 | name: props.name, 13 | price: props.price, 14 | amount: amount, 15 | }); 16 | }; 17 | return ( 18 | 19 |
  • 20 |
    21 |

    {props.name}

    22 |
    {props.description}
    23 |
    {price}
    24 |
    25 |
    26 | 27 |
    28 |
    • 29 |     30 | ); 31 | }; 32 | 33 | export default MealItem; 34 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Meals/MealItem/MealItem.module.css: -------------------------------------------------------------------------------- 1 | .meal { 2 | display: flex; 3 | justify-content: space-between; 4 | margin: 1rem; 5 | padding-bottom: 1rem; 6 | border-bottom: 1px solid #ccc; 7 | } 8 | 9 | .meal h3 { 10 | margin: 0 0 0.25rem 0; 11 | } 12 | 13 | .description { 14 | font-style: italic; 15 | } 16 | 17 | .price { 18 | margin-top: 0.25rem; 19 | font-weight: bold; 20 | color: #ad5502; 21 | font-size: 1.25rem; 22 | } 23 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Meals/Meals.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import AvailableMeals from "./AvailableMeals"; 3 | import MealsSummary from "./MealsSummary"; 4 | 5 | const Meals = (props) => { 6 | return ( 7 | 8 | 9 | 10 | 11 | ); 12 | }; 13 | 14 | export default Meals; 15 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Meals/MealsSummary.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import * as mealsSummaryStyle from "./MealsSummary.module.css"; 3 | const MealsSummary = () => { 4 | return ( 5 | 6 |
    7 |

    Delicious Food, Delivered To You

    8 |

    9 | Choose your favorite meal from our broad selection of available meals 10 | and enjoy a delicious lunch or dinner at home. 11 |

    12 |

    13 | All our meals are cooked with high-quality ingredients, just-in-time 14 | and of course by experienced chefs! 15 |

    16 |
    17 |     18 | ); 19 | }; 20 | export default MealsSummary; 21 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/Meals/MealsSummary.module.css: -------------------------------------------------------------------------------- 1 | .summary { 2 | text-align: center; 3 | max-width: 45rem; 4 | width: 90%; 5 | margin: auto; 6 | margin-top: -10rem; 7 | position: relative; 8 | background-color: #383838; 9 | color: white; 10 | border-radius: 14px; 11 | padding: 1rem; 12 | box-shadow: 0 1px 18px 10px rgba(0, 0, 0, 0.25); 13 | } 14 | 15 | .summary h2 { 16 | font-size: 2rem; 17 | margin-top: 0; 18 | } 19 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/UI/Card.js: -------------------------------------------------------------------------------- 1 | import classes from "./Card.module.css"; 2 | 3 | const Card = (props) => { 4 | return
    {props.children}
    ; 5 | }; 6 | 7 | export default Card; 8 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/UI/Card.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | padding: 1rem; 3 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); 4 | border-radius: 14px; 5 | background-color: white; 6 | } -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/UI/Input.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import * as inputStyle from "./Input.module.css"; 3 | 4 | const Input = React.forwardRef((props, ref) => { 5 | return ( 6 | 7 |
    8 | 9 | 10 |
    11 |     12 | ); 13 | }); 14 | 15 | export default Input; 16 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/UI/Input.module.css: -------------------------------------------------------------------------------- 1 | .input { 2 | display: flex; 3 | align-items: center; 4 | margin-bottom: 0.5rem; 5 | } 6 | 7 | .input label { 8 | font-weight: bold; 9 | margin-right: 1rem; 10 | } 11 | 12 | .input input { 13 | width: 3rem; 14 | border-radius: 5px; 15 | border: 1px solid #ccc; 16 | font: inherit; 17 | padding-left: 0.5rem; 18 | } 19 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/UI/Model.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import ReactDOM from "react-dom"; 3 | import * as modelStyle from "./Model.module.css"; 4 | 5 | const Backdrop = (props) => { 6 | return
    ; 7 | }; 8 | 9 | const ModelWindow = (props) => { 10 | return ( 11 |
    12 |
    {props.children}
    13 |
    14 | ); 15 | }; 16 | const portalElement = document.getElementById("overlays"); 17 | const Model = (props) => { 18 | return ( 19 | 20 | {ReactDOM.createPortal(, portalElement)} 21 | {ReactDOM.createPortal( 22 | {props.children}, 23 | portalElement 24 | )} 25 | 26 | ); 27 | }; 28 | export default Model; 29 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Components/UI/Model.module.css: -------------------------------------------------------------------------------- 1 | .backdrop { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 100vh; 7 | z-index: 20; 8 | background-color: rgba(0, 0, 0, 0.75); 9 | } 10 | 11 | .modal { 12 | position: fixed; 13 | top: 20vh; 14 | left: 5%; 15 | width: 90%; 16 | background-color: white; 17 | padding: 1rem; 18 | border-radius: 14px; 19 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); 20 | z-index: 30; 21 | animation: slide-down 300ms ease-out forwards; 22 | } 23 | 24 | @media (min-width: 768px) { 25 | .modal { 26 | width: 40rem; 27 | left: calc(50% - 20rem); 28 | } 29 | } 30 | 31 | @keyframes slide-down { 32 | from { 33 | opacity: 0; 34 | transform: translateY(-3rem); 35 | } 36 | to { 37 | opacity: 1; 38 | transform: translateY(0); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Store/CartProvider.js: -------------------------------------------------------------------------------- 1 | import React, { useReducer } from "react"; 2 | import cartContext from "./cart-context"; 3 | 4 | const defaultCartState = { 5 | item: [], 6 | totalAmount: 0, 7 | }; 8 | 9 | const cartReducer = (state, action) => { 10 | if (action.type === "ADD") { 11 | const existingCartItemIndex = state.item.findIndex( 12 | (items) => items.id === action.item.id 13 | ); 14 | const existingCartItem = state.item[existingCartItemIndex]; 15 | let updatedItems; 16 | if (existingCartItem) { 17 | const updatedItem = { 18 | ...existingCartItem, 19 | amount: existingCartItem.amount + action.item.amount, 20 | }; 21 | updatedItems = [...state.item]; 22 | updatedItems[existingCartItemIndex] = updatedItem; 23 | } else { 24 | updatedItems = state.item.concat(action.item); 25 | } 26 | const updatedAmount = 27 | state.totalAmount + action.item.amount * action.item.price; 28 | 29 | return { 30 | item: updatedItems, 31 | totalAmount: updatedAmount, 32 | }; 33 | } 34 | if (action.type === "REMOVE") { 35 | const existingCartItemIndex = state.item.findIndex( 36 | (items) => items.id === action.id 37 | ); 38 | const existingItem = state.item[existingCartItemIndex]; 39 | const updatedTotalAmount = state.totalAmount - existingItem.price; 40 | let updatedItems; 41 | if (existingItem.amount === 1) { 42 | updatedItems = state.item.filter((items) => items.id !== action.id); 43 | } else { 44 | const updatedItem = { ...existingItem, amount: existingItem.amount - 1 }; 45 | updatedItems = [...state.item]; 46 | updatedItems[existingCartItemIndex] = updatedItem; 47 | } 48 | 49 | return { 50 | item: updatedItems, 51 | totalAmount: updatedTotalAmount, 52 | }; 53 | } 54 | return defaultCartState; 55 | }; 56 | 57 | const CartProvider = (props) => { 58 | const [cartState, dispatchCartReducer] = useReducer( 59 | cartReducer, 60 | defaultCartState 61 | ); 62 | const addItemhandler = (item) => { 63 | dispatchCartReducer({ 64 | type: "ADD", 65 | item: item, 66 | }); 67 | }; 68 | const removeItemhandler = (id) => { 69 | dispatchCartReducer({ 70 | type: "REMOVE", 71 | id: id, 72 | }); 73 | }; 74 | const cartValue = { 75 | item: cartState.item, 76 | totalAmount: cartState.totalAmount, 77 | addItem: addItemhandler, 78 | removeItem: removeItemhandler, 79 | }; 80 | return ( 81 | 82 | {props.children} 83 | 84 | ); 85 | }; 86 | 87 | export default CartProvider; 88 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/Store/cart-context.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const cartContext = React.createContext({ 4 | item: [], 5 | totalAmount: 0, 6 | addItem: (item) => {}, 7 | removeItem: (id) => {}, 8 | }); 9 | 10 | export default cartContext; 11 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | html { 8 | font-family: 'Noto Sans JP', sans-serif; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | background-color: #3f3f3f; 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Projects/Food Ordering App/src/index.js: -------------------------------------------------------------------------------- 1 | import ReactDOM from 'react-dom'; 2 | 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /Projects/FormValidation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-complete-guide", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.6", 7 | "@testing-library/react": "^11.2.2", 8 | "@testing-library/user-event": "^12.5.0", 9 | "react": "^17.0.1", 10 | "react-dom": "^17.0.1", 11 | "react-scripts": "4.0.1", 12 | "web-vitals": "^0.2.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /Projects/FormValidation/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/FormValidation/public/favicon.ico -------------------------------------------------------------------------------- /Projects/FormValidation/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Projects/FormValidation/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/FormValidation/public/logo192.png -------------------------------------------------------------------------------- /Projects/FormValidation/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/FormValidation/public/logo512.png -------------------------------------------------------------------------------- /Projects/FormValidation/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Projects/FormValidation/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Projects/FormValidation/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | 3 | import Login from "./components/Login/Login"; 4 | import Home from "./components/Home/Home"; 5 | import MainHeader from "./components/MainHeader/MainHeader"; 6 | import AuthContext from "./Store/auth-context"; 7 | 8 | function App() { 9 | const ctx = useContext(AuthContext); 10 | return ( 11 | 12 | 13 |
    14 | {!ctx.isLoggedIn && } 15 | {ctx.isLoggedIn && } 16 |
    17 |     18 | ); 19 | } 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /Projects/FormValidation/src/Store/auth-context.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | 3 | const AuthContext = React.createContext({ 4 | isLoggedIn: false, 5 | onLogout: () => {}, 6 | onLogIn: (email, password) => {}, 7 | }); 8 | 9 | export const AuthuntificationProvider = (props) => { 10 | const [isLoggedIn, setIsLoggedIn] = useState(false); 11 | 12 | useEffect(() => { 13 | const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn"); 14 | 15 | if (storedUserLoggedInInformation === "1") { 16 | setIsLoggedIn(true); 17 | } 18 | }, []); 19 | 20 | const loginHandler = (email, password) => { 21 | // We should of course check email and password 22 | // But it's just a dummy/ demo anyways 23 | localStorage.setItem("isLoggedIn", "1"); 24 | setIsLoggedIn(true); 25 | }; 26 | 27 | const logoutHandler = () => { 28 | localStorage.removeItem("isLoggedIn"); 29 | setIsLoggedIn(false); 30 | }; 31 | 32 | return ( 33 | 40 | {props.children} 41 | 42 | ); 43 | }; 44 | export default AuthContext; 45 | -------------------------------------------------------------------------------- /Projects/FormValidation/src/components/Home/Home.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import AuthContext from "../../Store/auth-context"; 3 | import Button from "../UI/Button/Button"; 4 | 5 | import Card from "../UI/Card/Card"; 6 | import classes from "./Home.module.css"; 7 | 8 | const Home = () => { 9 | const ctx = useContext(AuthContext); 10 | return ( 11 | 12 |

    Welcome back!

    13 | 14 |     15 | ); 16 | }; 17 | 18 | export default Home; 19 | -------------------------------------------------------------------------------- /Projects/FormValidation/src/components/Home/Home.module.css: -------------------------------------------------------------------------------- 1 | .home { 2 | width: 90%; 3 | max-width: 40rem; 4 | padding: 3rem; 5 | margin: 2rem auto; 6 | text-align: center; 7 | } -------------------------------------------------------------------------------- /Projects/FormValidation/src/components/Login/Login.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect, useReducer, useContext } from "react"; 2 | 3 | import Card from "../UI/Card/Card"; 4 | import classes from "./Login.module.css"; 5 | import Button from "../UI/Button/Button"; 6 | import AuthContext from "../../Store/auth-context"; 7 | 8 | const emailReducer = (state, action) => { 9 | if (action.type === "USER_INPUT") { 10 | return { value: action.val, isValid: action.val.includes("@") }; 11 | } 12 | if (action.type === "INPUT_BLUR") { 13 | return { value: state.value, isValid: state.value.includes("@") }; 14 | } 15 | return { value: "", isValid: false }; 16 | }; 17 | 18 | const passwordReducer = (state, action) => { 19 | if (action.type === "USER_INPUT") { 20 | return { value: action.val, isValid: action.val.trim().length > 6 }; 21 | } 22 | if (action.type === "INPUT_BLUR") { 23 | return { value: state.value, isValid: state.value.trim().length > 6 }; 24 | } 25 | return { value: "", isValid: false }; 26 | }; 27 | 28 | const Login = (props) => { 29 | const [formIsValid, setFormIsValid] = useState(false); 30 | 31 | const [emailState, dispatchEmail] = useReducer(emailReducer, { 32 | value: "", 33 | isValid: null, 34 | }); 35 | const [passwordState, dispatchPassword] = useReducer(passwordReducer, { 36 | value: "", 37 | isValid: null, 38 | }); 39 | 40 | useEffect(() => { 41 | console.log("EFFECT RUNNING"); 42 | 43 | return () => { 44 | console.log("EFFECT CLEANUP"); 45 | }; 46 | }, []); 47 | 48 | const { isValid: emailIsValid } = emailState; 49 | const { isValid: passwordIsValid } = passwordState; 50 | 51 | useEffect(() => { 52 | const identifier = setTimeout(() => { 53 | console.log("Checking form validity!"); 54 | setFormIsValid(emailIsValid && passwordIsValid); 55 | }, 500); 56 | return () => { 57 | console.log("CLEANUP"); 58 | clearTimeout(identifier); 59 | }; 60 | }, [emailIsValid, passwordIsValid]); 61 | 62 | const emailChangeHandler = (event) => { 63 | dispatchEmail({ type: "USER_INPUT", val: event.target.value }); 64 | }; 65 | 66 | const passwordChangeHandler = (event) => { 67 | dispatchPassword({ type: "USER_INPUT", val: event.target.value }); 68 | }; 69 | 70 | const validateEmailHandler = () => { 71 | dispatchEmail({ type: "INPUT_BLUR" }); 72 | }; 73 | 74 | const validatePasswordHandler = () => { 75 | dispatchPassword({ type: "INPUT_BLUR" }); 76 | }; 77 | 78 | const submitHandler = (event) => { 79 | event.preventDefault(); 80 | ctx.onLogIn(emailState.value, passwordState.value); 81 | }; 82 | const ctx = useContext(AuthContext); 83 | 84 | return ( 85 | 86 |
    87 |
    92 | 93 | 100 |
    101 |
    106 | 107 | 114 |
    115 |
    116 | 119 |
    120 |
    121 |     122 | ); 123 | }; 124 | 125 | export default Login; 126 | -------------------------------------------------------------------------------- /Projects/FormValidation/src/components/Login/Login.module.css: -------------------------------------------------------------------------------- 1 | .login { 2 | width: 90%; 3 | max-width: 40rem; 4 | margin: 2rem auto; 5 | padding: 2rem; 6 | } 7 | 8 | .control { 9 | margin: 1rem 0; 10 | display: flex; 11 | align-items: stretch; 12 | flex-direction: column; 13 | } 14 | 15 | .control label, 16 | .control input { 17 | display: block; 18 | } 19 | 20 | .control label { 21 | font-weight: bold; 22 | flex: 1; 23 | color: #464646; 24 | margin-bottom: 0.5rem; 25 | } 26 | 27 | .control input { 28 | flex: 3; 29 | font: inherit; 30 | padding: 0.35rem 0.35rem; 31 | border-radius: 6px; 32 | border: 1px solid #ccc; 33 | } 34 | 35 | .control input:focus { 36 | outline: none; 37 | border-color: #4f005f; 38 | background: #f6dbfc; 39 | } 40 | 41 | .control.invalid input { 42 | border-color: red; 43 | background: #fbdada; 44 | } 45 | 46 | .actions { 47 | text-align: center; 48 | } 49 | 50 | @media (min-width: 768px) { 51 | .control { 52 | align-items: center; 53 | flex-direction: row; 54 | } 55 | 56 | } -------------------------------------------------------------------------------- /Projects/FormValidation/src/components/MainHeader/MainHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Navigation from './Navigation'; 4 | import classes from './MainHeader.module.css'; 5 | 6 | const MainHeader = (props) => { 7 | return ( 8 |
    9 |

    A Typical Page

    10 | 11 |
    12 | ); 13 | }; 14 | 15 | export default MainHeader; 16 | -------------------------------------------------------------------------------- /Projects/FormValidation/src/components/MainHeader/MainHeader.module.css: -------------------------------------------------------------------------------- 1 | .main-header { 2 | position: fixed; 3 | top: 0; 4 | left: 0; 5 | width: 100%; 6 | height: 5rem; 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | background: #741188; 11 | padding: 0 2rem; 12 | } 13 | 14 | .main-header h1 { 15 | color: white; 16 | } -------------------------------------------------------------------------------- /Projects/FormValidation/src/components/MainHeader/Navigation.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import AuthContext from "../../Store/auth-context"; 3 | 4 | import classes from "./Navigation.module.css"; 5 | 6 | const Navigation = (props) => { 7 | const ctx = useContext(AuthContext); 8 | return ( 9 | 28 | ); 29 | }; 30 | 31 | export default Navigation; 32 | -------------------------------------------------------------------------------- /Projects/FormValidation/src/components/MainHeader/Navigation.module.css: -------------------------------------------------------------------------------- 1 | .nav ul { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | display: flex; 6 | align-items: center; 7 | } 8 | 9 | .nav li { 10 | margin: 0; 11 | margin-left: 2rem; 12 | } 13 | 14 | .nav a { 15 | text-decoration: none; 16 | color: white; 17 | } 18 | 19 | .nav a:hover, 20 | .nav a:active { 21 | color: #f3cafb; 22 | } 23 | 24 | .nav button { 25 | font: inherit; 26 | background: #dd0db0; 27 | border: 1px solid #dd0db0; 28 | padding: 0.5rem 1.5rem; 29 | color: white; 30 | cursor: pointer; 31 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.26); 32 | border-radius: 20px; 33 | } 34 | 35 | .nav button:focus { 36 | outline: none; 37 | } 38 | 39 | .nav button:hover, 40 | .nav button:active { 41 | color: #f3cafb; 42 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.26); 43 | } 44 | -------------------------------------------------------------------------------- /Projects/FormValidation/src/components/UI/Button/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import classes from './Button.module.css'; 4 | 5 | const Button = (props) => { 6 | return ( 7 | 15 | ); 16 | }; 17 | 18 | export default Button; 19 | -------------------------------------------------------------------------------- /Projects/FormValidation/src/components/UI/Button/Button.module.css: -------------------------------------------------------------------------------- 1 | .button { 2 | font: inherit; 3 | border: 1px solid #4f005f; 4 | background: #4f005f; 5 | color: white; 6 | padding: 0.75rem 3.5rem; 7 | cursor: pointer; 8 | font-size: 1.15rem; 9 | border-radius: 30px; 10 | } 11 | 12 | .button:hover, 13 | .button:active { 14 | background: #741188; 15 | border-color: #741188; 16 | } 17 | 18 | .button:focus { 19 | outline: none; 20 | } 21 | 22 | button:disabled, 23 | button:focus:disabled, 24 | button:hover:disabled, 25 | button:active:disabled { 26 | background: #ccc; 27 | border-color: #ccc; 28 | color: #666666; 29 | cursor: not-allowed; 30 | } 31 | -------------------------------------------------------------------------------- /Projects/FormValidation/src/components/UI/Card/Card.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import classes from './Card.module.css'; 4 | 5 | const Card = (props) => { 6 | return ( 7 |
    {props.children}
    8 | ); 9 | }; 10 | 11 | export default Card; 12 | -------------------------------------------------------------------------------- /Projects/FormValidation/src/components/UI/Card/Card.module.css: -------------------------------------------------------------------------------- 1 | .card { 2 | background: white; 3 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); 4 | border-radius: 10px; 5 | } 6 | -------------------------------------------------------------------------------- /Projects/FormValidation/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-family: sans-serif; 7 | background: #fff; 8 | } 9 | 10 | body { 11 | margin: 0; 12 | } 13 | 14 | main { 15 | margin-top: 6rem; 16 | } -------------------------------------------------------------------------------- /Projects/FormValidation/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import "./index.css"; 5 | import App from "./App"; 6 | import { AuthuntificationProvider } from "./Store/auth-context"; 7 | 8 | ReactDOM.render( 9 | 10 | 11 | , 12 | document.getElementById("root") 13 | ); 14 | -------------------------------------------------------------------------------- /Projects/ToDo-App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "course-planner", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } -------------------------------------------------------------------------------- /Projects/ToDo-App/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/ToDo-App/public/favicon.ico -------------------------------------------------------------------------------- /Projects/ToDo-App/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Projects/ToDo-App/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/ToDo-App/public/logo192.png -------------------------------------------------------------------------------- /Projects/ToDo-App/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/Projects/ToDo-App/public/logo512.png -------------------------------------------------------------------------------- /Projects/ToDo-App/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Projects/ToDo-App/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Projects/ToDo-App/readme.md: -------------------------------------------------------------------------------- 1 | # React TODO App 2 | 3 | A simple TODO app built with React. 4 | 5 | ## Getting Started 6 | 7 | To get started, clone the repository and `install` the dependencies: 8 | 9 | ```sh 10 | 11 | git clone https://github.com/muhib7353/React-js-Blogs-and-Projects.git 12 | cd Projects 13 | cd ToDo-App 14 | npm install 15 | ``` 16 | 17 | Then, you can start the development server with the following command: 18 | 19 | ```sh 20 | npm start 21 | ``` 22 | 23 | 24 | This will start the development server and open the app in your default web browser. The app will automatically reload whenever you make changes to the code. 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Projects/ToDo-App/src/App.css: -------------------------------------------------------------------------------- 1 | #goals { 2 | width: 35rem; 3 | max-width: 90%; 4 | margin: 3rem auto; 5 | } 6 | 7 | #goal-form { 8 | width: 30rem; 9 | max-width: 90%; 10 | margin: 3rem auto; 11 | padding: 2rem; 12 | box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); 13 | border-radius: 10px; 14 | } 15 | -------------------------------------------------------------------------------- /Projects/ToDo-App/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | import CourseGoalList from './components/CourseGoals/CourseGoalList/CourseGoalList'; 4 | import CourseInput from './components/CourseGoals/CourseInput/CourseInput'; 5 | import './App.css'; 6 | 7 | const App = () => { 8 | const [courseGoals, setCourseGoals] = useState([ 9 | { text: 'Do all exercises!', id: 'g1' }, 10 | { text: 'Finish the course!', id: 'g2' } 11 | ]); 12 | 13 | const addGoalHandler = enteredText => { 14 | setCourseGoals(prevGoals => { 15 | const updatedGoals = [...prevGoals]; 16 | updatedGoals.unshift({ text: enteredText, id: Math.random().toString() }); 17 | return updatedGoals; 18 | }); 19 | }; 20 | 21 | const deleteItemHandler = goalId => { 22 | setCourseGoals(prevGoals => { 23 | const updatedGoals = prevGoals.filter(goal => goal.id !== goalId); 24 | return updatedGoals; 25 | }); 26 | }; 27 | 28 | let content = ( 29 |

    No goals found. Maybe add one?

    30 | ); 31 | 32 | if (courseGoals.length > 0) { 33 | content = ( 34 | 35 | ); 36 | } 37 | 38 | return ( 39 |
    40 |
    41 | 42 |
    43 |
    44 | {content} 45 | {/* {courseGoals.length > 0 && ( 46 | 50 | ) //

    No goals found. Maybe add one?

    51 | } */} 52 |
    53 |
    54 | ); 55 | }; 56 | 57 | export default App; 58 | -------------------------------------------------------------------------------- /Projects/ToDo-App/src/components/CourseGoals/CourseGoalItem/CourseGoalItem.css: -------------------------------------------------------------------------------- 1 | .goal-item { 2 | margin: 1rem 0; 3 | background: #8b005d; 4 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); 5 | color: white; 6 | padding: 1rem 2rem; 7 | cursor: pointer; 8 | } 9 | -------------------------------------------------------------------------------- /Projects/ToDo-App/src/components/CourseGoals/CourseGoalItem/CourseGoalItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './CourseGoalItem.css'; 4 | 5 | const CourseGoalItem = props => { 6 | // const [deleteText, setDeleteText] = useState(''); 7 | 8 | const deleteHandler = () => { 9 | // setDeleteText('(Deleted!)'); 10 | props.onDelete(props.id); 11 | }; 12 | 13 | return ( 14 |
  • 15 | {props.children} 16 |
    • 17 | ); 18 | }; 19 | 20 | export default CourseGoalItem; 21 | -------------------------------------------------------------------------------- /Projects/ToDo-App/src/components/CourseGoals/CourseGoalList/CourseGoalList.css: -------------------------------------------------------------------------------- 1 | .goal-list { 2 | list-style: none; 3 | margin: 0; 4 | padding: 0; 5 | } -------------------------------------------------------------------------------- /Projects/ToDo-App/src/components/CourseGoals/CourseGoalList/CourseGoalList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import CourseGoalItem from '../CourseGoalItem/CourseGoalItem'; 4 | import './CourseGoalList.css'; 5 | 6 | const CourseGoalList = props => { 7 | return ( 8 |
      9 | {props.items.map(goal => ( 10 | 15 | {goal.text} 16 | 17 | ))} 18 |
    19 | ); 20 | }; 21 | 22 | export default CourseGoalList; 23 | -------------------------------------------------------------------------------- /Projects/ToDo-App/src/components/CourseGoals/CourseInput/CourseInput.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import Button from "../../UI/Button/Button"; 3 | import styles from "./CourseInput.module.css"; 4 | 5 | const CourseInput = (props) => { 6 | const [enteredValue, setEnteredValue] = useState(""); 7 | 8 | const [isValid, setIsValid] = useState(true); 9 | const goalInputChangeHandler = (event) => { 10 | setEnteredValue(event.target.value); 11 | }; 12 | 13 | const formSubmitHandler = (event) => { 14 | event.preventDefault(); 15 | if (enteredValue.trim().length === 0) { 16 | setIsValid(false); 17 | return; 18 | } 19 | props.onAddGoal(enteredValue); 20 | }; 21 | 22 | return ( 23 |
    24 |
    27 | 28 | 29 |
    30 | 31 |
    32 | ); 33 | }; 34 | 35 | export default CourseInput; 36 | -------------------------------------------------------------------------------- /Projects/ToDo-App/src/components/CourseGoals/CourseInput/CourseInput.module.css: -------------------------------------------------------------------------------- 1 | .form-control { 2 | margin: 0.5rem 0; 3 | } 4 | 5 | .form-control label { 6 | font-weight: bold; 7 | display: block; 8 | margin-bottom: 0.5rem; 9 | } 10 | 11 | .form-control input { 12 | display: block; 13 | width: 100%; 14 | border: 1px solid#ccc; 15 | font: inherit; 16 | line-height: 1.5rem; 17 | padding: 0 0.25rem; 18 | } 19 | 20 | .form-control input:focus { 21 | outline: none; 22 | background: #fad0ec; 23 | border-color: #8b005d; 24 | } 25 | .form-control.invalid label { 26 | color: rgb(216, 0, 0); 27 | } 28 | .form-control.invalid input { 29 | border-color: red; 30 | } 31 | -------------------------------------------------------------------------------- /Projects/ToDo-App/src/components/UI/Button/Button.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | import styles from './Button.module.css'; 4 | const Button = props => { 5 | return ( 6 | 9 | ); 10 | }; 11 | 12 | export default Button; 13 | -------------------------------------------------------------------------------- /Projects/ToDo-App/src/components/UI/Button/Button.module.css: -------------------------------------------------------------------------------- 1 | .button { 2 | width: 100%; 3 | font: inherit; 4 | padding: 0.5rem 1.5rem; 5 | border: 1px solid #8b005d; 6 | color: white; 7 | background: #8b005d; 8 | box-shadow: 0 0 4px rgba(0, 0, 0, 0.26); 9 | cursor: pointer; 10 | } 11 | 12 | .button:focus { 13 | outline: none; 14 | } 15 | 16 | .button:hover, 17 | .button:active { 18 | background: #ac0e77; 19 | border-color: #ac0e77; 20 | box-shadow: 0 0 8px rgba(0, 0, 0, 0.26); 21 | } 22 | @media (min-width:768px) { 23 | .button { 24 | width: auto; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /Projects/ToDo-App/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html { 6 | font-family: sans-serif; 7 | } 8 | 9 | body { 10 | margin: 0; 11 | } 12 | -------------------------------------------------------------------------------- /Projects/ToDo-App/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import './index.css'; 5 | import App from './App'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "React-js-Blogs-and-Projects", 3 | "lockfileVersion": 2, 4 | "requires": true, 5 | "packages": {} 6 | } 7 | -------------------------------------------------------------------------------- /react-js-logo-no.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/muhibarshad/React-js-Blogs-and-Projects/23d05834f2edb91bb4d3750b25826240705e936e/react-js-logo-no.jpg --------------------------------------------------------------------------------