{"id":19598519,"url":"https://github.com/kaplanh/react-context-api-example-1","last_synced_at":"2025-02-26T15:16:05.768Z","repository":{"id":223753327,"uuid":"761445543","full_name":"kaplanh/react-context-api-example-1","owner":"kaplanh","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-21T22:04:59.000Z","size":398,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-09T07:47:53.175Z","etag":null,"topics":["react","react-context-api","react-login","react-router-dom","react-useeffect","react-usestate-and-conditonal-rendering"],"latest_commit_sha":null,"homepage":"https://react-context-api-example-1.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaplanh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-21T21:29:58.000Z","updated_at":"2024-02-21T21:53:24.000Z","dependencies_parsed_at":"2024-02-21T22:45:55.233Z","dependency_job_id":null,"html_url":"https://github.com/kaplanh/react-context-api-example-1","commit_stats":null,"previous_names":["kaplanh/react-context-api-example-1"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2Freact-context-api-example-1","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2Freact-context-api-example-1/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2Freact-context-api-example-1/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaplanh%2Freact-context-api-example-1/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaplanh","download_url":"https://codeload.github.com/kaplanh/react-context-api-example-1/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240876855,"owners_count":19871903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-context-api","react-login","react-router-dom","react-useeffect","react-usestate-and-conditonal-rendering"],"created_at":"2024-11-11T09:06:33.876Z","updated_at":"2025-02-26T15:16:05.742Z","avatar_url":"https://github.com/kaplanh.png","language":"JavaScript","readme":"# React Context API Example-1\n\n[:point_right: Click here to see on browser](https://react-context-api-example-1.vercel.app/)\n\n![react-context-api](https://github.com/kaplanh/React-Context-Api-Example-2/assets/101884444/5599ad8a-4b59-4b2c-9467-e9af74d72104)\n\n\n\n\n---\n\n| **What's used in this app ?**                                                           | **How use third party libraries** | **Author**                                                                       |\n| --------------------------------------------------------------------------------------- | --------------------------------- | -------------------------------------------------------------------------------- |\n| [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/) |\n| [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/)   |\n| [useEfect() Hook componentDidUpdate()](https://react.dev/learn#using-hooks)             |                                   |                    |\n| [useState() Hook](https://react.dev/learn#using-hooks)                                  |                                   |                                                                                  |\n| [fetch API](https://www.npmjs.com/package/react-fetch)         | npm i/yarn add fetch              |                                                                                  |\n| [react-events](https://react.dev/learn#responding-to-events)                            |                                   |                                                                                  |\n| [Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/)            | npm i / yarn add bootstrap        |                                                                                  |\n| [React-icons](https://react-icons.github.io/react-icons/)                               | npm i / yarn add react-icons      |                                                                                  |\n| [lifting state up](https://react.dev/learn/sharing-state-between-components)              |                                   |                                                                                  |\n| [props-drilling](https://react.dev/learn#sharing-data-between-components)               |                                   |                                                                                  |\n| [Semantic-Commits](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716) |                                   |                                                                                  |\n| Deploy with [Vercel](https://vercel.com/kaplanh)                                        |                                   |                                                                                  |\n| API [reqres](https://reqres.in/api/users)      |                                   |                                                                                  |\n\n---\n\n## How To Run This Project 🚀\n\n\u003cbr/\u003e\n\n### 💻 Install React 👇\n\n```bash\nyarn create react-app .  or npx create-react-app .\n```\n\n### 💻 Install Sass 👇\n\n```bash\nyarn add sass  or npm i sass\n```\n\n## 🔴 Delete these files and delete the imports👇\n\n    - App.test.js\n    - reportWebVitals.js\n    - setupTests.js\n    - favicon.ico\n    - logo192.png\n    - logo512.png\n    - manifest.json\n    - robots.txt\n\n### 💻 Start the project 👇\n\n```bash\nyarn start or npm start\n```\n\nOR\n\n-   \u003cstrong\u003eClone the Repo\u003c/strong\u003e\n\n    ```sh\n    git clone\n    ```\n\n-   \u003cstrong\u003eInstall NPM packages\u003c/strong\u003e\n\n    ```sh\n    npm install or yarn\n    ```\n\n-   \u003cstrong\u003eRun the project\u003c/strong\u003e\n\n    ```sh\n    npm start or yarn start\n    ```\n\n-   \u003cstrong\u003eOpen the project on your browser\u003c/strong\u003e\n\n    ```sh\n    http://localhost:3000/\n    ```\n\n-   ### \u003cstrong\u003eEnjoy! 🎉\u003c/strong\u003e\n\n---\n\n## Project Skeleton\n\n```\n React-Context-Api-example(folder)\n|\n|----public (folder)\n│     └── index.html\n|----src (folder)\n|    |--- components (folder)\n│    │       ├── Courses.jsx\n│    │       ├── Footer.jsx\n│    │       ├── Navs.jsx\n│    │\n|    |--- img (folder)\n│    │\n│    |--- pages (folder)\n|    |      ├── About.jsx\n|    |      ├── Home.jsx\n|    |      ├── Logın.jsx\n|    |      ├── People.jsx\n|    |      ├── PersonDetaıl.jsx\n|    |      ├── PrivateRouter.jsx\n|    |\n|    |--- context (folder)\n│    │       ├── LoginContext.jsx\n|    |\n|    |\n│    ├--- App.js\n│    |--- index.js\n│    |--- index.css\n│\n│\n|── .gitignore\n|── package-lock.json\n├── package.json\n|── README.md\n|── yarn.lock\n\n\n```\n\n---\n\n### At the end of the project, the following topics are to be covered;\n\n- useContext()/ Context Api\n\n```jsx\n//! 1.Adim\n\n//context/LoginContext.jsx\nimport { createContext } from \"react\";\n\n//! Login Context'i olusuturuldu\nexport const LoginContext = createContext();\n\n\n//! 2.adim\n//App.jsx\n\nimport Footer from \"./components/Footer\";\nimport Navs from \"./components/Navs\";\nimport About from \"./pages/About\";\nimport Home from \"./pages/Home\";\nimport People from \"./pages/People\";\nimport { BrowserRouter, Routes, Route, Navigate } from \"react-router-dom\";\nimport PersonDetail from \"./pages/PersonDetail\";\nimport Login from \"./pages/Login\";\nimport { LoginContext } from \"./context/LoginContext\";\nimport { useState } from \"react\";\nimport PrivateRouter from \"./pages/PrivateRouter\";\n\nfunction App() {\n    // //! Local State\n    const [user, setUser] = useState({ email: \"\", password: \"\" });\n\n    console.log(user);\n    return (\n        \u003cLoginContext.Provider value={{ user, setUser }}\u003e\n            \u003cBrowserRouter\u003e\n                \u003cNavs /\u003e\n                \u003cRoutes\u003e\n                    \u003cRoute index element={\u003cHome /\u003e} /\u003e\n                    \u003cRoute path=\"about\" element={\u003cAbout /\u003e} /\u003e\n                    \u003cRoute path=\"login\" element={\u003cLogin /\u003e} /\u003e\n\n                    \u003cRoute path=\"people\" element={\u003cPrivateRouter /\u003e}\u003e\n                        \u003cRoute path=\"\" element={\u003cPeople /\u003e} /\u003e\n                        \u003cRoute path=\":id\" element={\u003cPersonDetail /\u003e} /\u003e\n                    \u003c/Route\u003e\n\n                    \u003cRoute path=\"*\" element={\u003cNavigate to=\"/\" /\u003e} /\u003e\n                \u003c/Routes\u003e\n                \u003cFooter /\u003e\n            \u003c/BrowserRouter\u003e\n        \u003c/LoginContext.Provider\u003e\n    );\n}\n\nexport default App;\n\n\n//! 3.adim\n\nimport { useContext } from \"react\";\nimport { Outlet, Navigate } from \"react-router-dom\";\nimport { LoginContext } from \"../context/LoginContext\";\n\nconst PrivateRouter = () =\u003e {\n    const { user } = useContext(LoginContext);\n    return user.email \u0026\u0026 user.password ? \u003cOutlet /\u003e : \u003cNavigate to=\"/login\" /\u003e;\n};\n\nexport default PrivateRouter;\n\n\n```\n\n-   Private Router\n\n```jsx\n//PrivateRouter.jsx\n\nimport { useContext } from \"react\";\nimport { Outlet, Navigate } from \"react-router-dom\";\nimport { LoginContext } from \"../context/LoginContext\";\n\nconst PrivateRouter = () =\u003e {\n    const { user } = useContext(LoginContext);\n    return user.email \u0026\u0026 user.password ? \u003cOutlet /\u003e : \u003cNavigate to=\"/login\" /\u003e;\n};\n\nexport default PrivateRouter;\n\n\n\n```\n\n- Login\u0026 Logout\n\n    ```jsx\n    import { useContext } from \"react\";\n    import Container from \"react-bootstrap/Container\";\n    import Button from \"react-bootstrap/Button\";\n    import Form from \"react-bootstrap/Form\";\n    import { LoginContext } from \"../context/LoginContext\";\n    import { useNavigate } from \"react-router-dom\";\n    \n    const Login = () =\u003e {\n        // //! Local State\n        // const [user, setUser] = useState({ email: \"\", password: \"\" })\n\n    //? Consuming of login context\n    const { user, setUser } = useContext(LoginContext);\n\n    const navigate = useNavigate();\n\n    const handleSubmit = (e) =\u003e {\n        e.preventDefault();\n        navigate(-1);\n        // setUser({ email: \"\", password: \"\" })\n    };\n\n    return (\n        \u003cContainer\u003e\n            \u003ch1 className=\"text-center mt-4\"\u003eLOGIN PAGE\u003c/h1\u003e\n            \u003cForm onSubmit={(e) =\u003e handleSubmit(e)}\u003e\n                \u003cForm.Group className=\"mb-3\" controlId=\"username\"\u003e\n                    \u003cForm.Label\u003eEmail\u003c/Form.Label\u003e\n                    \u003cForm.Control\n                        type=\"email\"\n                        placeholder=\"Enter your email\"\n                        name=\"email\"\n                        value={user?.email}\n                        required\n                        onChange={(e) =\u003e\n                            setUser({ ...user, email: e.target.value })\n                        }\n                    /\u003e\n                \u003c/Form.Group\u003e\n\n                \u003cForm.Group className=\"mb-3\" controlId=\"password\"\u003e\n                    \u003cForm.Label\u003ePassword\u003c/Form.Label\u003e\n                    \u003cForm.Control\n                        type=\"password\"\n                        placeholder=\"Enter your password\"\n                        name=\"password\"\n                        value={user?.password}\n                        required\n                        onChange={(e) =\u003e\n                            setUser({ ...user, password: e.target.value })\n                        }\n                    /\u003e\n                \u003c/Form.Group\u003e\n                \u003cContainer className=\"text-center\"\u003e\n                    \u003cButton variant=\"danger\" type=\"submit\"\u003e\n                        Submit\n                    \u003c/Button\u003e\n                \u003c/Container\u003e\n            \u003c/Form\u003e\n        \u003c/Container\u003e\n    );\n    };\n\n    export default Login;\n\n\n\n\n    ```\n\n-   Semantic Commit Messages\n    See how a minor change to your commit message style can make you a better programmer.\n\n    Format: \u003ctype\u003e(\u003cscope\u003e): \u003csubject\u003e\n\n    \u003cscope\u003e is optional\n\n    -   Example\n\n    ```\n                feat: add hat wobble\n        ^--^  ^------------^\n        |     |\n        |     +-\u003e Summary in present tense.\n        |\n        +-------\u003e Type: chore, docs, feat, fix, refactor, style, or test.\n    ```\n\n-   More Examples:\n    -   `feat`: (new feature for the user, not a new feature for build script)\n    -   `fix`: (bug fix for the user, not a fix to a build script)\n    -   `docs`: (changes to the documentation)\n    -   `style`: (formatting, missing semi colons, etc; no production code change)\n    -   `refactor`: (refactoring production code, eg. renaming a variable)\n    -   `test`: (adding missing tests, refactoring tests; no production code change)\n    -   `chore`: (updating grunt tasks etc; no production code change)\n\n---\n\n## Feedback and Collaboration\n\nI 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.\nI'm always open to collaboration and welcome the opportunity to work on exciting projects together.\nThank you for visiting my project. I hope you have a wonderful experience exploring it, and I look forward to connecting with you soon!\n\n\u003cp align=\"center\"\u003e ⌛\u003cstrong\u003e Happy Coding \u003c/strong\u003e ✍ \u003c/p\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Freact-context-api-example-1","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaplanh%2Freact-context-api-example-1","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaplanh%2Freact-context-api-example-1/lists"}