React Context API Example-2

👉 Click here to see on browser

---

What's used in this app ?	How use third party libraries	Author
useContext()/Context APi	npm i / yarn add react-router-dom	Take a look at my portfolio
React-Router-Dom	npm i / yarn add react-router-dom	Visit me on Linkedin
useEfect() Hook componentDidUpdate()
useState() Hook
fetch API	npm i/yarn add fetch
react-events
Bootstrap	npm i / yarn add bootstrap
React-icons	npm i / yarn add react-icons
lifting state up
props-drilling
Semantic-Commits
Deploy with Vercel
API reqres

---

How To Run This Project 🚀

💻 Install React 👇

yarn create react-app .  or npx create-react-app .

💻 Install Sass 👇

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 👇

yarn start or npm start

OR

• Clone the Repo

  git clone

• Install NPM packages

  npm install or yarn

• Run the project

  npm start or yarn start

• Open the project on your browser

  http://localhost:3000/

• 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)
│    │       ├── LoginProvider.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

//! 1.Adim

//context/LoginProvider.jsx
import { createContext, useState, useContext } from "react";

//! 1- Login Context'i olusuturuldu
const LoginContext = createContext();

//! 2-Sarmalayici (Provider) Component
const LoginProvider = ({ children }) => {
    // //! Local State
    const [user, setUser] = useState({ email: "", password: "" });

    const values = {
        user,
        setUser,
    };

    return (
        <LoginContext.Provider value={values}>{children}</LoginContext.Provider>
    );
};

//! 3- consuming custom hook
export const useLoginContext = () => {
    return useContext(LoginContext);
};

export default LoginProvider;


//! 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 LoginProvider from "./context/LoginProvider";
import PrivateRouter from "./pages/PrivateRouter";

function App() {
    return (
        <LoginProvider>
            <BrowserRouter>
                <Navs />
                <Routes>
                    <Route index element={<Home />} />
                    <Route path="about" element={<About />} />
                    <Route path="login" element={<Login />} />

                    <Route path="people" element={<PrivateRouter />}>
                        <Route path="" element={<People />} />
                        <Route path=":id" element={<PersonDetail />} />
                    </Route>

                    <Route path="*" element={<Navigate to="/" />} />
                </Routes>
                <Footer />
            </BrowserRouter>
        </LoginProvider>
    );
}

export default App;

//! 3.adim

import { Outlet, Navigate } from "react-router-dom";
import { useLoginContext } from "../context/LoginProvider";

const PrivateRouter = () => {
    const { user } = useLoginContext();
    return user?.email && user?.password ? (
        <Outlet />
    ) : (
        <Navigate to="/login" />
    );
};

export default PrivateRouter;

• Private Router

//PrivateRouter.jsx

import { Outlet, Navigate } from "react-router-dom";
import { useLoginContext } from "../context/LoginProvider";

const PrivateRouter = () => {
    const { user } = useLoginContext();
    return user?.email && user?.password ? (
        <Outlet />
    ) : (
        <Navigate to="/login" />
    );
};

export default PrivateRouter;

• Login& Logout

  //Nav.jsx
  import { Link } from "react-router-dom";
  import Container from "react-bootstrap/Container";
  import Nav from "react-bootstrap/Nav";
  import Navbar from "react-bootstrap/Navbar";
  import Image from "react-bootstrap/Image";
  
  import { useLoginContext } from "../context/LoginProvider";
  
  function Navs() {
      // ! Consuming login context
      const { user, setUser } = useLoginContext();
  
  return (
      <Navbar expand="md">
          <Container>
              <Navbar.Brand>
                  <Link className="nav-link" to="/">
                      <Image
                          width={"200px"}
                          src="https://clarusway.com/wp-content/uploads/2022/02/Adsiz-tasarim-4-1024x265.png"
                          alt="logo"
                      />
                  </Link>
              </Navbar.Brand>
              <Navbar.Toggle aria-controls="basic-navbar-nav" />
              <Navbar.Collapse id="basic-navbar-nav">
                  <Nav className="ms-auto">
                      <Link className="nav-link" to="/">
                          Home
                      </Link>
                      <Link className="nav-link" to="/about">
                          About
                      </Link>
                      <Link className="nav-link" to="/people">
                          People
                      </Link>
  
                      {user?.email && user?.password ? (
                          <Link
                              className="nav-link"
                              to="/login"
                              onClick={() =>
                                  setUser({ email: "", password: "" })
                              }
                          >
                              Logout
                          </Link>
                      ) : (
                          <Link className="nav-link" to="/login">
                              Login
                          </Link>
                      )}
                  </Nav>
              </Navbar.Collapse>
          </Container>
      </Navbar>
  );
  }
  
  export default Navs;
  
  

• 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 ✍