├── .devcontainer
    ├── devcontainer.json
    └── icon.svg
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    └── PULL_REQUEST_TEMPLATE.md
├── .gitignore
├── .tours
    └── main.tour
├── .vscode
    └── launch.json
├── CODEOWNERS
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── SECURITY.md
├── SUPPORT.MD
├── ownership.yaml
├── package-lock.json
├── package.json
├── public
    ├── Octocat.png
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js


/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "image": "mcr.microsoft.com/devcontainers/universal:2",
 3 |   "hostRequirements": {
 4 |     "cpus": 4
 5 |   },
 6 |   "waitFor": "onCreateCommand",
 7 |   "updateContentCommand": "npm install",
 8 |   "postCreateCommand": "",
 9 |   "postAttachCommand": {
10 |     "server": "npm start"
11 |   },
12 |   "customizations": {
13 |     "codespaces": {
14 |       "openFiles": [
15 |         "src/App.js"
16 |       ]
17 | 	},
18 | 	"vscode": {
19 | 		"extensions": [
20 | 			"vsls-contrib.codetour"
21 | 		]
22 | 	}
23 |   },
24 |   "portsAttributes": {
25 |     "3000": {
26 |       "label": "Application",
27 |       "onAutoForward": "openPreview"
28 |     }
29 |   },
30 |   "forwardPorts": [3000]
31 | }
32 | 


--------------------------------------------------------------------------------
/.devcontainer/icon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="-11.5 -10.23174 23 20.46348">
 2 |   <title>React Logo</title>
 3 |   <circle cx="0" cy="0" r="2.05" fill="#61dafb"/>
 4 |   <g stroke="#61dafb" stroke-width="1" fill="none">
 5 |     <ellipse rx="11" ry="4.2"/>
 6 |     <ellipse rx="11" ry="4.2" transform="rotate(60)"/>
 7 |     <ellipse rx="11" ry="4.2" transform="rotate(120)"/>
 8 |   </g>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 🐛 Bug report
 3 | about: Create a report to help us improve
 4 | title: "Bug: "
 5 | labels: 👀 needs triage, 🐛 bug
 6 | ---
 7 | 
 8 | <!-- Before creating a bug report, try disabling browser extensions to see if the bug is still present. -->
 9 | 
10 | ### Describe the bug
11 | 
12 | <!-- A clear and concise description of what the bug is. -->
13 | 
14 | ### To Reproduce
15 | 
16 | <!-- Steps to reproduce the behavior: -->
17 | 
18 | <!-- 1. Go to '...' -->
19 | <!-- 2. Click on '....' -->
20 | <!-- 3. Scroll down to '....' -->
21 | <!-- 4. See error -->
22 | 
23 | ### Expected behavior
24 | 
25 | <!-- A clear and concise description of what you expected to happen. -->
26 | 
27 | ### Screenshots
28 | 
29 | <!-- If applicable, add screenshots to help explain your problem. -->
30 | 
31 | ### Desktop
32 | 
33 | - OS:
34 | - Browser:
35 | - Version:
36 | 
37 | ### Smartphone
38 | 
39 | - Device:
40 | - OS:
41 | - Browser:
42 | - Version:
43 | 
44 | ### Additional context
45 | 
46 | <!-- Add any other context about the problem or helpful links here. -->
47 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 🚀 Feature request
 3 | about: Suggest an idea for this project 💡
 4 | title: "Feature: "
 5 | labels: 👀 needs triage, 💡 feature
 6 | ---
 7 | 
 8 | ### Is your feature request related to a problem? Please describe.
 9 | 
10 | <!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
11 | 
12 | ### Describe the solution you'd like
13 | 
14 | <!-- A clear and concise description of what you want to happen. -->
15 | 
16 | ### Describe alternatives you've considered
17 | 
18 | <!-- A clear and concise description of any alternative solutions or features you've considered. -->
19 | 
20 | ### Additional context
21 | 
22 | <!-- Add any other context or screenshots about the feature request here. -->
23 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 |   For Work In Progress Pull Requests, please use the Draft PR feature,
 3 |   see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for further details.
 4 |   
 5 |   For a timely review/response, please avoid force-pushing additional
 6 |   commits if your PR already received reviews or comments.
 7 |   
 8 |   Before submitting a Pull Request, please ensure you've done the following:
 9 |   - 📖 Read the Contributing Guide: https://github.com/github/codespaces-learn-with-me/blob/HEAD/CONTRIBUTING.md
10 |   - 📖 Read the Open Sauced Code of Conduct: https://github.com/github/codespaces-learn-with-me/blob/HEAD/CODE_OF_CONDUCT.md
11 |   - 👷‍♀️ Create small PRs. In most cases, this will be possible.
12 |   - ✅ Provide tests for your changes.
13 |   - 📝 Use descriptive commit messages.
14 |   - 📗 Update any related documentation and include any relevant screenshots.
15 | -->
16 | 
17 | ## What type of PR is this? (check all applicable)
18 | 
19 | - [ ] ♻️ Refactor
20 | - [ ] ✨ Feature
21 | - [ ] 🐛 Bug Fix
22 | - [ ] 👷 Optimization
23 | - [ ] 📝 Documentation Update
24 | - [ ] 🔖 Release
25 | - [ ] 🚩 Other
26 | 
27 | ## Description
28 | 
29 | 
30 | 
31 | ## Related Tickets & Documents
32 | 
33 | 
34 | 
35 | ## Mobile & Desktop Screenshots/Recordings (if there are UI changes)
36 | 
37 | 
38 | 
39 | ## Added to documentation?
40 | 
41 | - [ ] 📜 readme
42 | - [ ] 🙅 no documentation needed
43 | 
44 | ## [optional] Are there any post-deployment tasks we need to perform?
45 | 
46 | 
47 | 
48 | ## [optional] What gif best describes this PR or how it makes you feel?
49 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
106 | 
107 | # dependencies
108 | /node_modules
109 | /.pnp
110 | .pnp.js
111 | 
112 | # testing
113 | /coverage
114 | 
115 | # production
116 | /build
117 | 
118 | # misc
119 | .DS_Store
120 | .env.local
121 | .env.development.local
122 | .env.test.local
123 | .env.production.local
124 | 
125 | npm-debug.log*
126 | yarn-debug.log*
127 | yarn-error.log*
128 | 


--------------------------------------------------------------------------------
/.tours/main.tour:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://aka.ms/codetour-schema",
 3 |   "title": "Navigate your first Codespace",
 4 |   "steps": [
 5 |     {
 6 |       "title": "Introduction",
 7 |       "description": "Hey! 👋 You've opened your first GitHub Codespaces template. This template is written in React. To get familiar with the code, we'll ask you to edit it! But don't worry, we'll give you directions each step of the way\n\nClick the `Next` link below to keep learning 👇"
 8 |     },
 9 |     {
10 |       "file": "src/App.js",
11 |       "line": 9,
12 |       "description": "Our app says GitHub Codespaces loves React, but we know you love React, too! \n\nLine 9 currently says:\n\n`<p> GitHub Codespaces <span className='heart'>♥️</span> React </p>`  \n\nInstead, update the line 9 to say:\n\n`<p> @Your_username_here <span className='heart'>♥️</span> React </p>`\n\nSave your changes and then click `Next` to move forward. ⬇️"
13 |     },
14 |     {
15 |       "file": "src/App.css",
16 |       "line": 11,
17 |       "description": "Great job at updating the words on your web app. Now let's update the background colors for this app. On line 11, the background color is currently `#282c34`, which is the color code for dark grey. Let's update it to `purple`.\n\nDon't forget to press save and check your updated changes in the browser! 💜"
18 |     },
19 |     {
20 |       "title": "Completed",
21 |       "description": "Mission complete! You added code to you first GitHub Codespace. Feel free to continue experimenting.\n\nBonus tip: If you click the three-dot menu associated with your current Codespace, you will see the option to 'Publish Codespace'. Once you publish your current codespace, you can share it with friends to show off your awesome creation!"
22 |     }
23 |   ],
24 |   "isPrimary": true
25 | }
26 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "name": "Run application",
 6 |       "type": "node",
 7 |       "request": "launch",
 8 |       "cwd": "${workspaceFolder}",
 9 |       "console": "integratedTerminal",
10 |       "runtimeExecutable": "npm",
11 |       "runtimeArgs": [
12 |         "run-script",
13 |         "start"
14 |       ],
15 |       "skipFiles": [
16 |         "<node_internals>/**"
17 |       ]
18 |     }
19 |   ]
20 | }


--------------------------------------------------------------------------------
/CODEOWNERS:
--------------------------------------------------------------------------------
1 | @ladykerr
2 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
 9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 |  advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |  address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |  professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at support@github.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 | 
73 | [homepage]: https://www.contributor-covenant.org
74 | 
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | ## Contributing
 2 | 
 3 | [fork]: https://github.com/codespaces-learn-with-m/codes/fork
 4 | [pr]: https://github.com/github/codespaces-learn-with-m/compare
 5 | [code-of-conduct]: CODE_OF_CONDUCT.md
 6 | 
 7 | Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
 8 | 
 9 | Contributions to this project are [released](https://help.github.com/articles/github-terms-of-service/#6-contributions-under-repository-license) to the public under the [project's open source license](LICENSE.md).
10 | 
11 | Please note that this project is released with a [Contributor Code of Conduct][code-of-conduct]. By participating in this project you agree to abide by its terms.
12 | 
13 | ## Submitting a pull request
14 | 
15 | 1. [Fork][fork] and clone the repository
16 | 1. Configure and install the dependencies: `script/bootstrap`
17 | 1. Make sure the tests pass on your machine: `rake`
18 | 1. Create a new branch: `git checkout -b my-branch-name`
19 | 1. Make your change, add tests, and make sure the tests still pass
20 | 1. Push to your fork and [submit a pull request][pr]
21 | 1. Pat your self on the back and wait for your pull request to be reviewed and merged.
22 | 
23 | Here are a few things you can do that will increase the likelihood of your pull request being accepted:
24 | 
25 | - Keep your change as focused as possible. If there are multiple changes you would like to make that are not dependent upon each other, consider submitting them as separate pull requests.
26 | - Write a [good commit message](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html).
27 | 
28 | ## Resources
29 | 
30 | - [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
31 | - [Using Pull Requests](https://help.github.com/articles/about-pull-requests/)
32 | - [GitHub Help](https://help.github.com)
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Rizel Scarlett
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Learn React with Codespaces 📝
 2 | 
 3 | Welcome to your first Codespace running a popular UI framework called React! We've got everything fired up and running for you to explore React and Codespaces for the first time.
 4 | 
 5 | A template for your project README.
 6 | 
 7 | ## License
 8 | 
 9 | This project is licensed under the terms of the MIT open source license. Please refer to [MIT](https://github.com/github/codespaces-learn-with-me/blob/main/LICENSE) for the full terms.
10 | 
11 | ## Maintainers
12 | 
13 | Please see [CODEOWNERS](CODEOWNERS).
14 | 
15 | ## Support
16 | 
17 | Please see [SUPPORT](https://github.com/github/codespaces-learn-with-me/blob/main/SUPPORT.MD).
18 | 
19 | ## Room for Improvement
20 | 
21 | There's always room for improvement in any project.
22 | 
23 | - If you have a suggestion feel free to [open an issue](https://github.com/github/codespaces-learn-with-me/issues/new).
24 | 
25 | - If you have a solution, feel free to open a pull request.
26 | 
27 | Learn how in the [Contributing Guidelines](https://github.com/github/codespaces-learn-with-me/blob/main/CONTRIBUTING.md).
28 | 
29 | ## How to Use
30 | 
31 | ### Open in Codespace
32 | 
33 | Once our codespace is fully loaded, you will see a live preview of your web app on a tab titled "Simple Browser." (If you don’t see the “Simple Browser” tab yet, give it a few minutes to load.) It should look like the image below:
34 | 
35 | <img width="1505" alt="Screen Shot 2023-02-02 at 10 21 55 PM" src="https://user-images.githubusercontent.com/22990146/219676048-6fe22c06-f84e-4aac-953b-1e28481570d3.png">
36 | 
37 | ### Change some words
38 | 
39 | Currently, the web app states that "GitHub Codespaces ♥️ React." Let's replace the words “GitHub Codespaces” with our GitHub username by following these steps:
40 | 
41 | 1. Navigate to the App.js file in the src folder. This is where the content for the web app lives.
42 | 2. On line 9 of the App.js file, you will see the words “GitHub Codespaces ♥️ React” wrapped in a paragraph tag represented by these characters `&lt;p>&lt;/p>`.
43 | 3. Change the words “GitHub Codespaces” on line 9 to your GitHub username.
44 | 4. Save the changes you made in your App.js file by pressing the keys “command and s” for Mac or “control and s” for Windows.
45 | 5. Check for the reflected changes in your simple browser tab
46 | 
47 | My GitHub username is blackgirlbytes, so my web app says “blackgirlbytes ♥️ React.”
48 | 
49 | <img width="1502" alt="Screen Shot 2023-02-02 at 10 37 01 PM" src="https://user-images.githubusercontent.com/22990146/219675942-616c1645-b8da-41a6-aaa0-a6cfdb15c0ef.png">
50 | 
51 | ### Change the background color
52 | 
53 | The background color for the React app is currently gray. Gray might be someone’s favorite color, but it’s not mine. Let’s brighten it up by following the steps below:
54 | 
55 | 1. Navigate to the App.css file in the src folder. This is where the styles of the web app live.
56 | 2. On line 11 of the App.css file, you will see the following code:
57 | 
58 |    `background-color: #282c34;` #282c34 is the hex code for the color gray.
59 | 
60 | 3. Try replacing the `#282c34` with the word `purple`. (That’s my favorite color!)
61 | 4. Save the changes you made in your App.css file by pressing the keys “command and s” for Mac or “control and s” for Windows.
62 | 5. Check for the reflected changes in your simple browser tab.
63 | 
64 | The final version should resemble the image below:
65 | 
66 | <img width="1506" alt="Screen Shot 2023-02-02 at 10 44 26 PM" src="https://user-images.githubusercontent.com/22990146/219675851-6e5449d4-cb5d-4576-8e6f-1f5c73b88fae.png">
67 | 


--------------------------------------------------------------------------------
/SECURITY.md:
--------------------------------------------------------------------------------
 1 | Thanks for helping make GitHub safe for everyone.
 2 | 
 3 | # Security
 4 | 
 5 | GitHub takes the security of our software products and services seriously, including all of the open source code repositories managed through our GitHub organizations, such as [GitHub](https://github.com/GitHub).
 6 | 
 7 | Even though [open source repositories are outside of the scope of our bug bounty program](https://bounty.github.com/index.html#scope) and therefore not eligible for bounty rewards, we will ensure that your finding gets passed along to the appropriate maintainers for remediation. 
 8 | 
 9 | ## Reporting Security Issues
10 | 
11 | If you believe you have found a security vulnerability in any GitHub-owned repository, please report it to us through coordinated disclosure.
12 | 
13 | **Please do not report security vulnerabilities through public GitHub issues, discussions, or pull requests.**
14 | 
15 | Instead, please send an email to opensource-security[@]github.com.
16 | 
17 | Please include as much of the information listed below as you can to help us better understand and resolve the issue:
18 | 
19 |   * The type of issue (e.g., buffer overflow, SQL injection, or cross-site scripting)
20 |   * Full paths of source file(s) related to the manifestation of the issue
21 |   * The location of the affected source code (tag/branch/commit or direct URL)
22 |   * Any special configuration required to reproduce the issue
23 |   * Step-by-step instructions to reproduce the issue
24 |   * Proof-of-concept or exploit code (if possible)
25 |   * Impact of the issue, including how an attacker might exploit the issue
26 | 
27 | This information will help us triage your report more quickly.
28 | 
29 | ## Policy
30 | 
31 | See [GitHub's Safe Harbor Policy](https://docs.github.com/en/github/site-policy/github-bug-bounty-program-legal-safe-harbor#1-safe-harbor-terms)
32 | 


--------------------------------------------------------------------------------
/SUPPORT.MD:
--------------------------------------------------------------------------------
 1 | # Support 
 2 | 
 3 | ## How to file issues and get help
 4 | 
 5 | This project uses GitHub issues to track bugs and feature requests. Please search the existing issues before filing new issues to avoid duplicates. For new issues, file your bug or feature request as a new issue.
 6 | 
 7 | For help or questions about using this project, please reach out in the project [Discussions](https://github.com/github/codespaces-learn-with-me/discussions). We're here to help!
 8 | 
 9 | **TODO: REPO MAINTAINERS** Please include one of the following statements file:
10 | 
11 | - **Codespaces Learn with Me** is under active development and maintained by GitHub staff **AND THE COMMUNITY**. We will do our best to respond to support, feature requests, and community questions in a timely manner.
12 | 
13 | ## GitHub Support Policy
14 | 
15 | Support for this project is limited to the resources listed above.
16 | 


--------------------------------------------------------------------------------
/ownership.yaml:
--------------------------------------------------------------------------------
 1 | ---
 2 | version: 1
 3 | ownership:
 4 | # ownership.yaml describes who is responsible for a service, and how to contact them. If your service is made up
 5 | # of multiple components, you can define multiple entries in this file.
 6 | #
 7 | # Additional documentation on ownership.yaml fields is available at: https://thehub.github.com/engineering/products/service-catalog/service-ownership/#attributes-of-durable-ownership
 8 | # Questions? Ask in #sre on Slack.
 9 | - team: github/devrel
10 |   repo: https://github.com/github/codespaces-learn-with-me
11 |   name: codespaces-learn-with-me
12 |   kind: moda
13 |   long_name: Codespaces Learn with Me
14 |   description: This is a Codespaces React template that leverages a Code Tour to guide beginners through writing their first lines of React.
15 |   maintainer: ladykerr
16 |   exec_sponsor: martinwoodward
17 |   product_manager: thisiskirsch
18 |   qos: experimental
19 |   tier: 3
20 |   sev3:
21 |     slack: developer-relations
22 |     issue: https://github.com/github/codespaces-learn-with-me/issues
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "codespaces-react",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^6.1.4",
 7 |     "@testing-library/react": "^14.0.0",
 8 |     "@testing-library/user-event": "^14.5.1",
 9 |     "react": "^18.2.0",
10 |     "react-dom": "^18.2.0",
11 |     "web-vitals": "^3.5.0"
12 |   },
13 |   "devDependencies": {
14 |     "react-scripts": "^5.0.1",
15 |     "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
16 |   },
17 |   "overrides": {
18 |     "nth-check": "2.1.1"
19 | },
20 |   "scripts": {
21 |     "start": "BROWSER=none WDS_SOCKET_PORT=0 react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/public/Octocat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/github/codespaces-learn-with-me/7a627ceca1e66c96ddd2fd33fc29ddfc41040770/public/Octocat.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/github/codespaces-learn-with-me/7a627ceca1e66c96ddd2fd33fc29ddfc41040770/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/github/codespaces-learn-with-me/7a627ceca1e66c96ddd2fd33fc29ddfc41040770/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/github/codespaces-learn-with-me/7a627ceca1e66c96ddd2fd33fc29ddfc41040770/public/logo512.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | .App-header {
11 |   background-color: #282c34;
12 |   min-height: 100vh;
13 |   display: flex;
14 |   flex-direction: column;
15 |   align-items: center;
16 |   justify-content: center;
17 |   font-size: calc(10px + 2vmin);
18 |   color: white;
19 | }
20 | 
21 | .App-link {
22 |   color: #61dafb;
23 | }
24 | 
25 | .heart {
26 |   color: #ff0000;
27 | }
28 | 
29 | .small {
30 |   font-size: 0.75rem;
31 | }


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.css';
 2 | 
 3 | function App() {
 4 |   return (
 5 |     <div className="App">
 6 |       <header className="App-header">
 7 |         <img src="Octocat.png" className="App-logo" alt="logo" />
 8 |         <p>
 9 |           GitHub Codespaces <span className="heart">♥️</span> React
10 |         </p>
11 |         <p className="small">
12 |           Edit <code>src/App.js</code> and save to reload.
13 |         </p>
14 |         <p>
15 |           <a
16 |             className="App-link"
17 |             href="https://reactjs.org"
18 |             target="_blank"
19 |             rel="noopener noreferrer"
20 |           >
21 |             Learn React
22 |           </a>
23 |         </p>
24 |       </header>
25 |     </div>
26 |   );
27 | }
28 | 
29 | export default App;
30 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById('root'));
 8 | root.render(
 9 |   <React.StrictMode>
10 |     <App />
11 |   </React.StrictMode>
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------