Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kaplanh/react-context-api-example-1
https://github.com/kaplanh/react-context-api-example-1
react react-context-api react-login react-router-dom react-useeffect react-usestate-and-conditonal-rendering
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/kaplanh/react-context-api-example-1
- Owner: kaplanh
- Created: 2024-02-21T21:29:58.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-02-21T22:04:59.000Z (9 months ago)
- Last Synced: 2024-02-22T22:39:11.164Z (9 months ago)
- Topics: react, react-context-api, react-login, react-router-dom, react-useeffect, react-usestate-and-conditonal-rendering
- Language: JavaScript
- Homepage: https://react-context-api-example-1.vercel.app
- Size: 389 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Context API Example-1
[:point_right: Click here to see on browser](https://react-context-api-example-1.vercel.app/)
---
| **What's used in this app ?** | **How use third party libraries** | **Author** |
| --------------------------------------------------------------------------------------- | --------------------------------- | -------------------------------------------------------------------------------- |
| [useContext()/Context APi](https://react.dev/reference/react/useContext) | npm i / yarn add react-router-dom | [Take a look at my portfolio](https://kaplanh.github.io/Portfolio_with_CssFlex/) |
| [React-Router-Dom](https://reactrouter.com/en/main/start/overview) | npm i / yarn add react-router-dom |[Visit me on Linkedin](https://www.linkedin.com/in/kaplan-h/) |
| [useEfect() Hook componentDidUpdate()](https://react.dev/learn#using-hooks) | | |
| [useState() Hook](https://react.dev/learn#using-hooks) | | |
| [fetch API](https://www.npmjs.com/package/react-fetch) | npm i/yarn add fetch | |
| [react-events](https://react.dev/learn#responding-to-events) | | |
| [Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/) | npm i / yarn add bootstrap | |
| [React-icons](https://react-icons.github.io/react-icons/) | npm i / yarn add react-icons | |
| [lifting state up](https://react.dev/learn/sharing-state-between-components) | | |
| [props-drilling](https://react.dev/learn#sharing-data-between-components) | | |
| [Semantic-Commits](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716) | | |
| Deploy with [Vercel](https://vercel.com/kaplanh) | | |
| API [reqres](https://reqres.in/api/users) | | |
---
## How To Run This Project π
### π» Install React π
```bash
yarn create react-app . or npx create-react-app .
```
### π» Install Sass π
```bash
yarn add sass or npm i sass
```
## π΄ Delete these files and delete the importsπ
- App.test.js
- reportWebVitals.js
- setupTests.js
- favicon.ico
- logo192.png
- logo512.png
- manifest.json
- robots.txt
### π» Start the project π
```bash
yarn start or npm start
```
OR
- Clone the Repo
```sh
git clone
```
- Install NPM packages
```sh
npm install or yarn
```
- Run the project
```sh
npm start or yarn start
```
- Open the project on your browser
```sh
http://localhost:3000/
```
- ### Enjoy! π
---
## Project Skeleton
```
React-Context-Api-example(folder)
|
|----public (folder)
β βββ index.html
|----src (folder)
| |--- components (folder)
β β βββ Courses.jsx
β β βββ Footer.jsx
β β βββ Navs.jsx
β β
| |--- img (folder)
β β
β |--- pages (folder)
| | βββ About.jsx
| | βββ Home.jsx
| | βββ LogΔ±n.jsx
| | βββ People.jsx
| | βββ PersonDetaΔ±l.jsx
| | βββ PrivateRouter.jsx
| |
| |--- context (folder)
β β βββ LoginContext.jsx
| |
| |
β β--- App.js
β |--- index.js
β |--- index.css
β
β
|ββ .gitignore
|ββ package-lock.json
βββ package.json
|ββ README.md
|ββ yarn.lock
```
---
### At the end of the project, the following topics are to be covered;
- useContext()/ Context Api
```jsx
//! 1.Adim
//context/LoginContext.jsx
import { createContext } from "react";
//! Login Context'i olusuturuldu
export const LoginContext = createContext();
//! 2.adim
//App.jsx
import Footer from "./components/Footer";
import Navs from "./components/Navs";
import About from "./pages/About";
import Home from "./pages/Home";
import People from "./pages/People";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import PersonDetail from "./pages/PersonDetail";
import Login from "./pages/Login";
import { LoginContext } from "./context/LoginContext";
import { useState } from "react";
import PrivateRouter from "./pages/PrivateRouter";
function App() {
// //! Local State
const [user, setUser] = useState({ email: "", password: "" });
console.log(user);
return (
} />
} />
} />
}>
} />
} />
} />
);
}
export default App;
//! 3.adim
import { useContext } from "react";
import { Outlet, Navigate } from "react-router-dom";
import { LoginContext } from "../context/LoginContext";
const PrivateRouter = () => {
const { user } = useContext(LoginContext);
return user.email && user.password ? : ;
};
export default PrivateRouter;
```
- Private Router
```jsx
//PrivateRouter.jsx
import { useContext } from "react";
import { Outlet, Navigate } from "react-router-dom";
import { LoginContext } from "../context/LoginContext";
const PrivateRouter = () => {
const { user } = useContext(LoginContext);
return user.email && user.password ? : ;
};
export default PrivateRouter;
```
- Login& Logout
```jsx
import { useContext } from "react";
import Container from "react-bootstrap/Container";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import { LoginContext } from "../context/LoginContext";
import { useNavigate } from "react-router-dom";
const Login = () => {
// //! Local State
// const [user, setUser] = useState({ email: "", password: "" })
//? Consuming of login context
const { user, setUser } = useContext(LoginContext);
const navigate = useNavigate();
const handleSubmit = (e) => {
e.preventDefault();
navigate(-1);
// setUser({ email: "", password: "" })
};
return (
LOGIN PAGE
handleSubmit(e)}>
Email
setUser({ ...user, email: e.target.value })
}
/>
Password
setUser({ ...user, password: e.target.value })
}
/>
Submit
);
};
export default Login;
```
- Semantic Commit Messages
See how a minor change to your commit message style can make you a better programmer.
Format: ():
is optional
- Example
```
feat: add hat wobble
^--^ ^------------^
| |
| +-> Summary in present tense.
|
+-------> Type: chore, docs, feat, fix, refactor, style, or test.
```
- More Examples:
- `feat`: (new feature for the user, not a new feature for build script)
- `fix`: (bug fix for the user, not a fix to a build script)
- `docs`: (changes to the documentation)
- `style`: (formatting, missing semi colons, etc; no production code change)
- `refactor`: (refactoring production code, eg. renaming a variable)
- `test`: (adding missing tests, refactoring tests; no production code change)
- `chore`: (updating grunt tasks etc; no production code change)
---
## Feedback and Collaboration
I value your feedback and suggestions. If you have any comments, questions, or ideas for improvement regarding this project or any of my other projects, please don't hesitate to reach out.
I'm always open to collaboration and welcome the opportunity to work on exciting projects together.
Thank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!
β Happy Coding β