Introduction

Welcome To Popular Github Repos

Welcome HopeWorks Code Day 2021

HopeWorks Students

This project highlights some of the fundamental concepts of ReactJS. Please feel free to be curious after you have cloned the repository to your local computer, poke around the files and see what parts makes sense and research the parts that may still be a little fuzzy. As with any thing else the repetitions you get the more comfortable you will feel.

Getting Started

In this section I'll take you through the pre requisites to get this application on your local computer

1. You'll need a text editor -----> VS Code link: https://code.visualstudio.com/
2. Next you'll need to install Node JS -----> NodeJS link: https://nodejs.org/en/
3. Check to make sure Node installed correctly -----> Run node -v and npm -v from your terminal. If you see a version number returned in your terminal you're ready to clone this repository.

Without Github

1. Create a React app using npx create-react-app my-app
2. Right click App.js and open in integrated terminal
3. Run npm run start ----> should see the React logo in browser
4. From there create a Todo List

Using Git and Github

In order to clone the repo and make your first contribution you'll need to watch 2 videos on using Git a versioning software that allows you to track your project, and Github a place to store your projects and collaborate with other developers.

Git Setup Link -----> A video by Colt Steele: https://www.youtube.com/watch?v=USjZcfj8yxE Github Setup Link -----> A Video by Colt Steele: https://www.youtube.com/watch?v=nhNq2kIvi9s&t=253s

Clone the Repo

1. Create a folder on your local desktop machine to store code in.
2. copy and paste git clone link from github.
3. Once project has finished installing run -----> npm init to download the packages the project requires onto your local machine
4. Run ----> npm run start to build project
5. Once project has been launched you should see it inside default browser

Adding a Contribution

This section will take you through the process of adding your first React Component.

1. Open the HopeWorks Component
2. Give this component a Label Tag i.e ----> Enter Todo
3. Add an Input tag to the Component
4. Make the input field editable i.e. give it a value
5. Add the value to the components local state instance
6. Add an OnChange Event Handler
7. Add A button Element to the page
8. Add a Function to call setState() that will fire when the button is clicked
9. Add a todos array to the HopeWorks Component
10. The current Item in the input should be added to the Todos Array when the button is clicked
11. Display all current todos in the HopeWorks Component

Having Trouble?

Feel Free to reach out to me if you have any problems with this set up process. The first time can be tricky but once you get the hang of Git and Github you'll see these tools are impossible to live without. The easiest way to reach me is through LinkedIn https://www.linkedin.com/in/brandon-grayson-858032152/ send me a dm and I'll get back to you ASAP. If needed we can always jump on a zoom call or google meet.

Links

https://gracious-hermann-cd989f.netlify.app