{"id":19753889,"url":"https://github.com/trisha/react-notes","last_synced_at":"2026-03-05T00:04:16.860Z","repository":{"id":167392212,"uuid":"335084745","full_name":"trisha/react-notes","owner":"trisha","description":"Notes on everything we're learning about React and creating a React app","archived":false,"fork":false,"pushed_at":"2024-02-28T05:58:14.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T08:56:39.216Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/trisha.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":"2021-02-01T21:09:17.000Z","updated_at":"2021-10-18T22:59:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"39906350-f598-485e-a830-5823ddc9a4be","html_url":"https://github.com/trisha/react-notes","commit_stats":null,"previous_names":["trisha/react-notes"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/trisha/react-notes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trisha%2Freact-notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trisha%2Freact-notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trisha%2Freact-notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trisha%2Freact-notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trisha","download_url":"https://codeload.github.com/trisha/react-notes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trisha%2Freact-notes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30101761,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T23:59:36.199Z","status":"ssl_error","status_checked_at":"2026-03-04T23:56:48.556Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-12T02:55:35.228Z","updated_at":"2026-03-05T00:04:16.135Z","avatar_url":"https://github.com/trisha.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-notes\nNotes on everything we're learning about React and creating a React app\n\n\nnpx create-react-app \u003cname-of-folder\u003e // Doesn't take capitalized letters, and npx allows you to install something without installing it/downloading it locally.\nAbove now no longer works. Have to run `npm -g create-react-app` and then you can run `npx create-react-app sitename`\nSource: https://github.com/facebook/create-react-app/issues/10495\nAbove solution no longer works. Use below:\n`npx create-react-app@latest your-project-name --use-npm`\nFrom: https://stackoverflow.com/questions/64963796/create-react-app-is-not-working-since-version-4-0-1\n\n`npm start` to run \n\nWe create components that we export. Each component returns something that is contained within one parent set of tags. \n\nWithin our App.js, we can pass through properties such as this.props within a component.\n\nConstructors are something that are added to classes. Constructor method allows us to run new instances of a class \n\nthis.state is designed to change/react to user process and flow thru application, which is why we set it in constructor\n\n\n\nnpm i react-router-dom to install react router\nnpx create-react-app . to create a react app in a folder that already exists\n\nTo create a new github branch, \n`git checkout -b [nameOfBranch]`\nIn bottom left of VSCode, you can see which branch you're on as well as the names of your other branches.\n\n\n[Group git notes](https://hackmd.io/8eIt6vTgS5q3ZJakZy9SpQ?view):\n\nhttps://hackmd.io/8eIt6vTgS5q3ZJakZy9SpQ?view\n\nHOW TO GROUP GIT: \n\n- Local repo = On your computer\n\n- Remote repo = Github.com repo\n\n- Origin = Your forked and cloned remote repo\n\n- Upstream = The source of your remote repo, i.e. the manager's repo\n\nAfter forking and creating a `git clone [forked URL]` on your computer...\n1. `git remote add upstream [upstream URL]`\n2. `git remote -v` *To ensure you have an origin and a now an upstream link.*\n3. `git checkout -b [mybranchname]` \n4. \\* Work on your project *\n5. Push changes to your remote repo: `git add .` (or `git add -A to add everything in current file and below`), `git commit -m \"Commit message\"`, `git push`\n6. Go to github.com and submit a pull request from your development branch to the manager's main branch\n7. Manager accepts request\n\n*Then, manager merges a pull request:*\n\n8. `git checkout main`\n9. `git pull upstream main` (Manager uses `git pull origin main`)\n10. `git push origin main` (Manager doesn't need to do this step)\n11. `git checkout [mybranchname]`\n12. `git merge main`\n13. `git push`\n\n\n[How to add commit messages when merging branches](https://gist.github.com/kenandersen/2042103942473af82dd2):\n\n\n// You'll see this message if you git commit without a message (-m)\n\n// You can get out of it with two steps:\n\n// 1.a. Type a multi-line message to move foward with the commit.\n\n// 1.b. Leave blank to abort the commit.\n\n// 2. Hit \"esc\" then type \":wq\" and hit enter to save your choice. Viola!\n\n# Using Axios in React.\n```javascript\nuseEffect( () =\u003e {\n    fetch('http://acnhapi.com/v1/villagers')\n    .then(response =\u003e response.json())\n    .then(rData =\u003e {\n      rData = Object.values(rData) // Converts object of objects to array of objects.\n      // console.log(rData) // responseData\n      // console.log(rData[0].name['name-USen']) // responseData\n      // let characterNames = rData.map( (char, i) =\u003e {\n      //   return char.name['name-USen']\n      // })\n      setCharacters(rData)\n    })\n  }, [])\n```\n\n\nbrew services start mongodb-community@4.4\nmongo (to enter shell)\nquit() (to quit shell)\n\nbrew services stop mongodb-community@4.4\n\nbrew services start postgresql \n\nbrew services list (to see what's active)\n\n\n# MONGODB\n\nshow dbs // Show databases\n\nuse users // Either switches to a database named 'users' or creates a new db named 'users'\n\nshow collections // Show collections\n\ndb.people.insert({ // Create a new collection called people.\n    ... name: 'Fred', // mongo shell provides us with ... to indicate that we're continuing.\n    age: 21\n})\n\ndb.people.find() // Returns all documents (what we called 'rows' in Sequelize) in people collection\n\ndb.people.find({name: \"Kenny\"}) // To find a specific page\n\n### Conditional queries: \ndb.people.find({age: {$gte: 21}}) // Greater than or equal to\ndb.people.find({age: {$lte: 35}}) // Less than or equal to\n\n\ndb.people.find({age: {$gte: 45, $lte: 47}}).sort({name: 1}) // 1 sorts ascending, -1 sorts descending.\n\ndb.people.update({name: \"Adrian\"}, {$set: {age: 77}}) // Modifies one page (the first one) where the name = \"Adrian\"; set age to 77.\n\n\n// Update is only for updating pre-existing fields. Add is used for adding new fields.\n\ndb.people.update( {name: {$lt: \"M\"}}, {$inc: {age: 10}}, {multi: true}) // Find people whose names beging with a letter before M, increase their age by 10, and do this for every result you find, not just the first search result.\n\ndb.people.find().pretty()\n\ndb.people.update( { name: {$lt: \"M\"} }, { $mul: {age: 2} }, {multi: true} ) // If their name starts with a letter before M, multiply their age by 2, and do it for all results found and not must the first one.\n\ndb.people.update( { age: {$gt: 55}}, { $set: {age: \"old\" } } , {multi: true})\n\ndb.people.remove( { name: \"Emma\" } ) // Deletes/removes Emma. No need to use \"multi\"\n\nODM = Object Document Mapper (instead of ORM, since Mongo isn't a relational database)\n\n\n\n\n//// Using Mongoose in Express\nunit 3 \u003e labs and codealongs \u003e family-tree\nmkdir\nTo create an Express app, npm init -y\nthen npm i express\ntouch index.js\nnpm i mongoose \n\nInside index.js,\nconst express = require('express')\nconst app = express()\napp.get('/', (req, res) =\u003e {\n    res.send('It is working') // sanity check\n})\n\napp.listen(3000, () =\u003e console.log(\"Listening on Port 3k\"))\n\nthen in terminal: nodemon\n\nMake sure console.logs are working and that brew services start mongodb-community@4.4\n\n\n\nHow to view your database and models in mongo:\n\nTerminal: \nmongo\nshow dbs\nuse familyTree\nshow collections\n\n\n\ncors = cross origin resource sharing, so that you can API fom other places such as a react app\n\nHow to update mongoose version to not have terminal error messages:\nhttps://stackoverflow.com/questions/66185671/warning-accessing-non-existent-property-mongoerror-of-module-exports-inside-c\n\n`npm install mongoose@5.11.15`\n\nAuthentication, simply another way to do this, not necessarily tied to what we're doing now\nJWT = JSON web token, instead of sessions. Still uses secret, uses a complex algorithm to both hash and encrypt to return a string that includes information on when it should expire, etc.\n\nSomething about a signature\n\nServer generates a token that it sends to the client, client has to always send that token to the server whenever sending info \n\n(Btw, JWT token is redundant--JSON web token token, similar to how CSS stylesheets is also redundant)\n\n\nToken only relies on secret\n\n///// Passport, JWT tokens, MERN auth apps\nWe'll use passport, but remember how we had the Local Strategy thing we used in Passport? This time we'll use a JWT strategy which will take the place of sessions.\n\n- Will create an environment variable to store our secret, where the secret will be a string value\n- Every time our app generates a token (by hashing and encrypting user data with our secret), it spits out a token that includes a 'signature,' which is the part of the token that has the secret in it encrypted\n\nTo reiterate: Signature is the encrypted secret part of a token (third part), other part includes encoded header and encoded payload data (actual user data)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrisha%2Freact-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrisha%2Freact-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrisha%2Freact-notes/lists"}