{"id":19218728,"url":"https://github.com/fadilxcoder/reactjs","last_synced_at":"2025-02-23T09:14:48.629Z","repository":{"id":181208343,"uuid":"662279835","full_name":"fadilxcoder/reactjs","owner":"fadilxcoder","description":"ReactJS App / Udemy tutorials / Axios","archived":false,"fork":false,"pushed_at":"2023-07-24T17:35:05.000Z","size":674,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-04T19:23:33.839Z","etag":null,"topics":["axios","poc","reactjs","udemy"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/fadilxcoder.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,"publiccode":null,"codemeta":null}},"created_at":"2023-07-04T19:06:24.000Z","updated_at":"2023-07-14T11:41:10.000Z","dependencies_parsed_at":"2024-11-09T14:31:36.014Z","dependency_job_id":"0cc42db0-e5ad-43ff-bb26-7a69b18ac84d","html_url":"https://github.com/fadilxcoder/reactjs","commit_stats":null,"previous_names":["fadilxcoder/reactjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fadilxcoder%2Freactjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fadilxcoder%2Freactjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fadilxcoder%2Freactjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fadilxcoder%2Freactjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fadilxcoder","download_url":"https://codeload.github.com/fadilxcoder/reactjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240292395,"owners_count":19778311,"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":["axios","poc","reactjs","udemy"],"created_at":"2024-11-09T14:27:54.724Z","updated_at":"2025-02-23T09:14:48.587Z","avatar_url":"https://github.com/fadilxcoder.png","language":"HTML","readme":"# Notes\n\nReactJS application / PHP API\n\nCourse Tuto : https://www.udemy.com/course/mern-stack-front-to-back/\n\n`React Router` : This is a library that you can use to manage the routing in your React application.\n\n`Redux` : This library can help you manage state in your React application.\n\nDocs : https://github.com/facebook/create-react-app\n\n---\n\n- Install `npx create-react-app frontend`\n- Run : `npm run client`\n- Install these packages : `npm i axios react-router-dom redux react-redux redux-thunk redux-devtools-extension moment react-moment uuid`\n- Add `\"proxy\": \"http://users.php.sqlite.app.local/\"` in `package.json`\n- Components : `src/components/...`\n- Routing setup : `App.js` - `import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';`\n- Linking pages with `import {Link} from 'react-router-dom';` \u0026 `\u003cLink to=\"/register\".....`\n- Available routes :\n- - `http://localhost:3000/`\n- - `http://localhost:3000/login`\n- - `http://localhost:3000/register`\n\n## React / Redux\n\n- Redux cheatsheet : https://devhints.io/redux\n\nRedux actions are events that must have :\n\n- `type` property to indicate the type of action to be carried out\n- `payload` object that contains the information that should be used to change the state.\n\n---\n\n- `\u003cPROJ\u003e\\frontend\\src\\actions\\types.js` : Consist of variables / constant\n```js\nexport const SET_ALERT = 'SET_ALERT';\nexport const REMOVE_ALERT = 'REMOVE_ALERT';\n```\n\n- `\u003cPROJ\u003e\\frontend\\src\\actions\\alert.js` : Middlewares\n```js\nimport { SET_ALERT, REMOVE_ALERT } from './types';\nimport { v4 } from 'uuid';\n\nexport const setAlert = (msg, alertType, timeout = 5000) =\u003e dispatch =\u003e {\n    const id = v4();\n    dispatch({\n        type: SET_ALERT,\n        payload: {\n            msg,\n            alertType,\n            id\n        }\n    });\n\n    setTimeout(() =\u003e dispatch({\n        type: REMOVE_ALERT,\n        payload: id\n    }), timeout);\n}\n```\n\n- `\u003cPROJ\u003e\\frontend\\src\\reducers\\index.js` : List of reducers\n```js\nimport { combineReducers } from \"redux\";\nimport alert from './alert';\n\nexport default combineReducers({\n    alert\n});\n```\n\n- `\u003cPROJ\u003e\\frontend\\src\\reducers\\alert.js` : Reducer\n\n*Reducers take in two things: previous state and an action. Then they reduce it (read it return) to one entity: the new updated instance of state.*\n\n- `\u003cPROJ\u003e\\frontend\\src\\components` : UI\n\n```js\nimport React from 'react';\nimport { connect } from 'react-redux';\n\nconst Alert = ({ alertState }) =\u003e \n    null !== alertState \n    \u0026\u0026 alertState.length \u003e 0 \n    \u0026\u0026 alertState.map(alert =\u003e (\n        \u003cdiv \n            key={alert.id} \n            className={`alert alert-${alert.alertType}`\n        }\u003e\n            { alert.msg }\n        \u003c/div\u003e\n    ));\n\nconst mapStateToProps = state =\u003e ({\n    alertState: state.alert\n});\n\nexport default connect(\n    mapStateToProps\n)(Alert);\n\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffadilxcoder%2Freactjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffadilxcoder%2Freactjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffadilxcoder%2Freactjs/lists"}