This is a Codespaces React template that leverages a Code Tour to guide beginners through writing their first lines of React.

Overview

Learn React with Codespaces 📝

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.

A template for your project README.

License

This project is licensed under the terms of the MIT open source license. Please refer to MIT for the full terms.

Maintainers

Please see CODEOWNERS.

Support

Please see SUPPORT.

Room for Improvement

There's always room for improvement in any project.

  • If you have a suggestion feel free to open an issue.

  • If you have a solution, feel free to open a pull request.

Learn how in the Contributing Guidelines.

How to Use

Open in Codespace

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:

Screen Shot 2023-02-02 at 10 21 55 PM

Change some words

Currently, the web app states that "GitHub Codespaces ♥️ React." Let's replace the words “GitHub Codespaces” with our GitHub username by following these steps:

  1. Navigate to the App.js file in the src folder. This is where the content for the web app lives.
  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 <p></p>.
  3. Change the words “GitHub Codespaces” on line 9 to your GitHub username.
  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.
  5. Check for the reflected changes in your simple browser tab

My GitHub username is blackgirlbytes, so my web app says “blackgirlbytes ♥️ React.”

Screen Shot 2023-02-02 at 10 37 01 PM

Change the background color

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:

  1. Navigate to the App.css file in the src folder. This is where the styles of the web app live.

  2. On line 11 of the App.css file, you will see the following code:

    background-color: #282c34; #282c34 is the hex code for the color gray.

  3. Try replacing the #282c34 with the word purple. (That’s my favorite color!)

  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.

  5. Check for the reflected changes in your simple browser tab.

The final version should resemble the image below:

Screen Shot 2023-02-02 at 10 44 26 PM

You might also like...
Small React app that filter through 100k records users on memory

In-Memory filter pagination + React Small React app that calls an external API with 100k user records, stores all the records on memory and filter and

A Frontend CRM based on React and managing the state through the redux toolkit
A Frontend CRM based on React and managing the state through the redux toolkit

Getting Started with Front end CRM VITE This project has been created with the purpose of providing the community a Frontend CRM based on React and ma

An online quiz app that force yourself to master a topic through continuous feedback.
An online quiz app that force yourself to master a topic through continuous feedback.

An online quiz app that force yourself to master a topic through continuous feedback.

A MERN-based collaborative virtual learning platform to help learners find like-minded peer groups and filter through the available plethora of resources.
A MERN-based collaborative virtual learning platform to help learners find like-minded peer groups and filter through the available plethora of resources.

A MERN-based collaborative virtual learning platform to help learners find like-minded peer groups and filter through the available plethora of resources.

The Remote Keyboard Tutoring System is a web-based system that can be attached to any (electronic) keyboard synthesizer through a MIDI connector
The Remote Keyboard Tutoring System is a web-based system that can be attached to any (electronic) keyboard synthesizer through a MIDI connector

The Remote Keyboard Tutoring System is a web-based system that can be attached to any (electronic) keyboard synthesizer through a MIDI connector. Once our system is connected to the keyboard, the user can interactively learn, play or teach in combination with the web application that we provide.

A web app built using Javascript, communicating with a MongoDB database through express
A web app built using Javascript, communicating with a MongoDB database through express

Educational app for kids focussing on our solar system. Interactive elements along with 3D models, quizzes and audio to help keep them engaged.

 A GTA V Hard Roleplay server that runs through RAGE Multiplayer
A GTA V Hard Roleplay server that runs through RAGE Multiplayer

A GTA V Hard Roleplay server that runs through RAGE Multiplayer. First founded on December 21, 2011, as evidenced by new systems, frequent updates, and the advanced User Control Panel. Considering those mentioned above, the Romanian hard roleplay community immediately rose to the top, being the first and only one to reach the number of 500 online players simultaneously.

Frontend for Reguleque, a search engine for chilean public workers records' as obtained through transparency databases.

Frontend for Reguleque, a search engine for chilean public workers records' as obtained through transparency databases.

Owner
GitHub
How people build software.
GitHub
Daily Tasks - Opinionated MacOS-first task app to help you get through the day

Daily Tasks Opinionated task app for MacOS to help you get through the day Screen.Recording.2022-03-27.at.14.20.48.mov Installation At the moment, the

Ondřej Bárta 6 Sep 12, 2022
CatchingSunset is a web application created by React.js. The application allows users to randomly pick their destination and plan their budget for the trip.

Catching Sunset CatchingSunset is a web application created by React.js. The application allows users to randomly pick their destination and plan thei

Thiratikan 3 Feb 12, 2023
Sentry - a developer-first error tracking and performance monitoring platform that helps developers see what actually matters, solve quicker, and learn continuously about their applications

Sentry is a developer-first error tracking and performance monitoring platform that helps developers see what actually matters, solve quicker, and learn continuously about their applications.

Sentry 33k Jan 4, 2023
React Native Nested/Thread Comments with line indicators, collapse views with Reanimated 2 and draw lines with react-native-svg

## React Native Nested Comments With Line Indicators ### Uses reanimated 2 to collapse comments via [`reanimated-collapsible-helpers`](https://github

Efstathios Ntonas 30 Feb 10, 2023
Signs for Trucks is an online store to buy pre-designed vinyls with custom lines of letters

Signs for Trucks is an online store to buy custom vinyl designs for trucks. This repo contains the fronted app developed using Next Js for a better React js experience

J.D. 7 Dec 5, 2022
The game wordle made with ReactJS, without writing a line of CSS

I made Wordle XD Hello everyone ?? , I am glad to see you here I know it ain't much but this is the game wordle (popular in twitter recently!) I made

null 26 Nov 30, 2022
A platform to enhance English writing skill as a learner or give feedback to others' essay as a tutor

English Writing Response Platform - BONUFO A platform to enhance English writing skill as a learner or give feedback to others' essay as a tutor Live

Feena Fung 1 Jun 1, 2022
A guide to building your own React stack, explaining options and tradeoffs along the way

Custom React Stack React has a very rich ecosystem. For anything you want to do, there is probably a library or a framework available for it. That's g

Naresh Bhatia 13 Nov 23, 2022
A React SPA with react-router page navigation and add functionality through json-server endpoints

A React SPA with react-router page navigation and add functionality through json-server endpoints. A custom useFetch hook includes methods for getting and posting data. Search functionality with URLQueryParams. Context Providers allow for theme selection and Reducers for dark/light mode toggling.

null 1 Nov 18, 2021
React Icons Viewer - allows you to search through the react-icons and it allows you to download the icon as png/svg

React Icons Viewer - allows you to search through the react-icons and it allows you to download the icon as png/svg

null 2 Jul 14, 2022