├── src ├── index.js ├── BasicApp.js ├── TaskComponent.js ├── SubmitComponent.js └── App.js ├── public └── index.html ├── .gitignore ├── package.json └── README.md /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | // import BasicApp from './BasicApp.js'; 4 | import App from './App.js'; 5 | 6 | ReactDOM.render( 7 | // , 8 | , 9 | document.getElementById('root') 10 | ); -------------------------------------------------------------------------------- /src/BasicApp.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class BasicApp extends Component { 4 | render () { 5 | return ( 6 | 7 |

Welcome To This Tutorial

8 | 9 | ) 10 | } 11 | 12 | } 13 | 14 | export default BasicApp; -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | To Do List Tutorial 8 | 9 | 10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/TaskComponent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class TaskComponent extends Component { 4 | render () { 5 | return ( 6 |
7 | {this.props.task} 8 | 9 | 10 |
11 | ) 12 | } 13 | 14 | }; 15 | 16 | export default TaskComponent; -------------------------------------------------------------------------------- /src/SubmitComponent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class SubmitComponent extends Component { 4 | render () { 5 | return ( 6 |
7 | 8 | 9 |

{this.props.text}

10 |
11 | ) 12 | }; 13 | // test 14 | }; 15 | 16 | export default SubmitComponent; 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 7 | "@testing-library/react": "^13.3.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.1.0", 10 | "react-dom": "^18.1.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build" 17 | 18 | }, 19 | "eslintConfig": { 20 | "extends": [ 21 | "react-app", 22 | "react-app/jest" 23 | ] 24 | }, 25 | "browserslist": { 26 | "production": [ 27 | ">0.2%", 28 | "not dead", 29 | "not op_mini all" 30 | ], 31 | "development": [ 32 | "last 1 chrome version", 33 | "last 1 firefox version", 34 | "last 1 safari version" 35 | ] 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import TaskComponent from './TaskComponent'; 3 | import SubmitComponent from './SubmitComponent'; 4 | 5 | class App extends Component { 6 | 7 | constructor(props){ 8 | super(props); 9 | this.state = { 10 | text: '', 11 | tasks:['walk the dog', 'finish homework'], 12 | 13 | }; 14 | 15 | this.handleChange = this.handleChange.bind(this) 16 | this.handleSubmit = this.handleSubmit.bind(this) 17 | this.handleDelete = this.handleDelete.bind(this) 18 | }; 19 | 20 | //track changes in the text bar 21 | 22 | handleChange(event) { 23 | this.setState({text: event.target.value}); 24 | } 25 | 26 | handleSubmit (){ 27 | this.setState({tasks:[...this.state.tasks, this.state.text]}); 28 | this.setState({text: ''}); 29 | }; 30 | 31 | handleDelete (id){ 32 | //make a shallow copy of state 33 | let copy = [...this.state.tasks]; 34 | copy.splice(id, 1); 35 | this.setState({tasks:copy}); 36 | }; 37 | 38 | render () { 39 | 40 | return ( 41 |
42 | 46 | 47 | {this.state.tasks.map((currTask, index) =>{ 48 | return 49 | })} 50 | 51 |
52 | ) 53 | } 54 | }; 55 | 56 | 57 | export default App; -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dev Environment Set Up 2 | 3 | In order to propertly work with this repo you will need the following installed on your computer: 4 | 5 | [Node](https://nodejs.org/en/), [Git](http://git-scm.com/download/mac), [Create React App](https://www.npmjs.com/package/create-react-app) 6 | 7 | I use VS Code as my IDE. 8 | 9 | # Getting Started with GitHub 10 | 11 | For those of you unfamiliar with GitHub, here is a helpful [link] (https://docs.github.com/en/get-started/quickstart) on getting started. Hello World, Setting Up Git, and Fork a Repo are most relevant to this project. 12 | 13 | # Getting Started with `This Repo` 14 | 15 | Once everything is set up, `fork` and `clone` this repo. 16 | 17 | To download dependencies: 18 | 19 | $ npm install 20 | 21 | 22 | # Available Scripts 23 | 24 | In the project directory, you can run: 25 | 26 | ## `npm start` 27 | 28 | Runs the app in the development mode.\ 29 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser. 30 | 31 | The page will reload when you make changes.\ 32 | You may also see any lint errors in the console. 33 | 34 | 35 | ## `npm run build` 36 | 37 | Builds the app for production to the `build` folder.\ 38 | It correctly bundles React in production mode and optimizes the build for the best performance. 39 | 40 | The build is minified and the filenames include the hashes.\ 41 | Your app is ready to be deployed! 42 | 43 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 44 | 45 | 46 | # Learn More about NPM Scripts and the Package JSON 47 | 48 | An intro to [NPM Scripts is here](https://medium.com/@mariokandut/what-are-npm-scripts-cde15d275a9f). The docs are located [here](https://docs.npmjs.com/cli/v8/using-npm/scripts). 49 | 50 | # This project is set up with Create React App 51 | The React Docs give a pretty good explaination as to why Create React App is a great tool for setting up a React App in a learning environment. https://reactjs.org/docs/create-a-new-react-app.html#:~:text=Flexible%20Toolchains.-,Create%20React%20App,-Create%20React%20App 52 | --------------------------------------------------------------------------------