├── materials ├── code-reviews.pdf ├── lecture-01.pdf ├── lecture-04.pdf ├── lecture-05.pdf ├── React-Intro-2021.pdf ├── fetch-and-react-2019.pdf ├── Adding-Local-Authentication.pdf ├── urls-http-request-response.pdf ├── first_project_presentation_template.pdf ├── team-project-proposal.md └── learn-react-1.md └── README.md /materials/code-reviews.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/2021-fall-web-dev/HEAD/materials/code-reviews.pdf -------------------------------------------------------------------------------- /materials/lecture-01.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/2021-fall-web-dev/HEAD/materials/lecture-01.pdf -------------------------------------------------------------------------------- /materials/lecture-04.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/2021-fall-web-dev/HEAD/materials/lecture-04.pdf -------------------------------------------------------------------------------- /materials/lecture-05.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/2021-fall-web-dev/HEAD/materials/lecture-05.pdf -------------------------------------------------------------------------------- /materials/React-Intro-2021.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/2021-fall-web-dev/HEAD/materials/React-Intro-2021.pdf -------------------------------------------------------------------------------- /materials/fetch-and-react-2019.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/2021-fall-web-dev/HEAD/materials/fetch-and-react-2019.pdf -------------------------------------------------------------------------------- /materials/Adding-Local-Authentication.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/2021-fall-web-dev/HEAD/materials/Adding-Local-Authentication.pdf -------------------------------------------------------------------------------- /materials/urls-http-request-response.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/2021-fall-web-dev/HEAD/materials/urls-http-request-response.pdf -------------------------------------------------------------------------------- /materials/first_project_presentation_template.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CUNYTechPrep/2021-fall-web-dev/HEAD/materials/first_project_presentation_template.pdf -------------------------------------------------------------------------------- /materials/team-project-proposal.md: -------------------------------------------------------------------------------- 1 | # Team Project Proposal 2 | 3 | Now that groups are formed, submit **one team project proposal** for approval. This proposal is a summary of the idea and similar to your individual proposals. The proposal requirements are listed below. 4 | 5 | ## Project Proposal Requirements 6 | 7 | _Make sure your proposal contains the following 5 sections._ 8 | 9 | _It should be **2 pages max**. You do not have to include mockups or data models at this time. We will work on those in your next assignment._ 10 | 11 | 1. **Team Name** and **Project Name** 12 | 2. **Team Members** 13 | - _Include_: Name, Email, Github username, School 14 | 3. **Executive summary** (2 paragraphs) 15 | - A summary/pitch of your project. This should include answers to the following: 16 | + What does the application do? 17 | + What is the motivation for your application? 18 | + Who would use this application? 19 | + Is there a _need_ or _want_ in the market that it fulfills (_does not have to be a for-profit, or paid need_)? 20 | + Are there similar applications and/or competitors available now? How does your idea differ? or why is there a need for a competitor? 21 | * _It is OK for your idea to be a clone of an existing application_ 22 | 4. **User-types**: 23 | - Clearly define and describe the User-types for your application. 1 or more user-types depending on your idea. 24 | - _Think of_: Sellers, Buyers, Administrator, Moderator, Content-creator, Consumer, Teachers, Students, etc... 25 | 5. **User Stories**: 26 | - List the most important actions for each user-type 27 | - What are the most important workflows for users of your application 28 | - To learn more about User stories read: 29 | + https://dzone.com/articles/writing-user-stories-web 30 | + https://www.mountaingoatsoftware.com/presentations/introduction-to-user-stories 31 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | **_CUNY Tech Prep 2021-2022_** 2 | 3 | [CUNY Tech Prep](http://cunytechprep.nyc/) is a [NYC Tech Talent Pipeline](http://www.techtalentpipeline.nyc/) program designed to provide exceptional Computer Science students in the [CUNY](https://www.cuny.edu/) senior college system with in-demand software development and professional skills. 4 | 5 | --- 6 | 7 | # Fall 2021 Web Dev Track
_Class Schedule and Materials_ 8 | 9 | ## Summer Homework 10 | 11 | > Students that participated in the summer-prep sessions and submitted the required work are exempt from parts B & C of this homework. All other students have to complete parts A, B, & C 12 | 13 | [Summer Homework](https://docs.google.com/document/d/17jS_v75Tj23JDLkrZS79BdVJHUfgB1XFcV7dpIrwK84/edit?usp=sharing) 14 | 15 | ## (8/31 - 9/3) Week 1 16 | 17 | [Lecture Slides](materials/lecture-01.pdf) 18 | 19 | [Bootstrap Lab](https://github.com/CUNYTechPrep/bootstrap-lab) 20 | 21 | Topics: 22 | 23 | - Semester Overview 24 | - Designing Web Apps 25 | - Review: HTML & CSS 26 | - Intro to Bootstrap 27 | 28 | Assignments: 29 | 30 | - **Setup your [Development Environment](https://github.com/CUNYTechPrep/guides#development-environment-setup)** 31 | + Due ASAP (nothing to submit) 32 | - **Project Ideation**: provide your idea in the ideation document 33 | + *If you did not finish this in class finish it before Week 2* 34 | - Meet your classmates and **form teams** 35 | + Read through your classmates ideas and contact them over slack 36 | + Formed teams due in Week 3 class 37 | - Make a [Professional Portfolio Website](https://github.com/CUNYTechPrep/bootstrap-lab#project-2-build-a-personal-professional-web-page-for-yourself) 38 | + Due in Week 5 class 39 | 40 | ## (9/7 - 9/10) NO CLASS 41 | 42 | 43 | ## (9/14 - 9/17) Week 2 44 | 45 | > If you can't attend Wed 9/15 or Thur 9/16 class, contact your instructor to be excused. 46 | 47 | [Lecture Slides](materials/React-Intro-2021.pdf) 48 | 49 | [Learn React 1: Step by Step](materials/learn-react-1.md) 50 | 51 | Topics: 52 | 53 | - React Intro 54 | 55 | Assignments: 56 | 57 | * Team Project Proposals (**Due before week 3 class**) 58 | * Form a **team of 3** students and submit a Team Project Propsal. 59 | * [Team Project Proposal guidelines](materials/team-project-proposal.md) 60 | * [Submit Here](https://forms.gle/7fJF6MidVoGrSvHn7) 61 | 62 | ## (9/21 - 9/24) Week 3 63 | 64 | [Lecture Slides: URL's and HTTP Request-Response](materials/urls-http-request-response.pdf) 65 | 66 | [Lecture Slides: fetch() and React](materials/fetch-and-react-2019.pdf) 67 | 68 | [Zip Code React Lab](https://github.com/CUNYTechPrep/zip-code-react-lab) 69 | 70 | Topics: 71 | 72 | - Client-Server Communication 73 | + Parts of a URL 74 | + Understanding HTTP Request-Response 75 | - `fetch(...)` and Promises 76 | - More React 77 | 78 | 79 | ## (9/28 - 10/1) Week 4 80 | 81 | Topics: 82 | 83 | - More `fetch()` and React 84 | 85 | ## (10/5 - 10/8) Week 5 86 | 87 | [Lecture Slides](materials/lecture-04.pdf) 88 | 89 | Topics: 90 | 91 | - Fullstack Review: Frontend vs Backend 92 | - About `npm` 93 | - Building a backend with Express.js 94 | + Routing 95 | + Route Parameters 96 | + Query Parameters 97 | + Body Parameters 98 | - RESTful Routing 99 | 100 | ## (10/12 - 10/15) Week 6 101 | 102 | [Lecture Slides](materials/lecture-05.pdf) 103 | 104 | [Zip Code API Lab](https://github.com/CUNYTechPrep/zip-code-api-lab) 105 | 106 | Topics: 107 | 108 | - SDLC 109 | - MVC (_Models-Views-Controllers_) Project Structure 110 | - Databases and Data Modeling 111 | - ORM's (Sequelize.js) 112 | 113 | ## (10/19 - 10/22) Week 7 114 | 115 | [Project Starter repository](https://github.com/CUNYTechPrep/project-starter) 116 | 117 | Topics: 118 | 119 | - Using MVC app structure 120 | - Project Starter setup and walkthrough 121 | 122 | Assignments: 123 | 124 | * **First Project Presentation** 125 | * During Week 9 class (11/2 - 11/5) 126 | * Presentation Guidelines 127 | * 8 minutes per team (5 min presentation, 3 min Q&A) 128 | * All team members must present at least one slide 129 | * See a presentation template here: [first_project_presentation_template.pdf](materials/first_project_presentation_template.pdf) 130 | * (_Optional_) Show a demo of work in progress if you can 131 | 132 | ## (10/26 - 10/29) Week 8 133 | 134 | [Learn Sequelize Lab](https://github.com/CUNYTechPrep/learn-sequelize) 135 | 136 | Topics: 137 | 138 | - Using Sequelize.js 139 | - Testing (Jest) 140 | 141 | ## (11/2 - 11/5) Week 9 142 | 143 | Topics: 144 | 145 | - **_Project Presentations_** 146 | - Implementing Authentication 147 | - Sessions 148 | - Passport.js, Bcrypt 149 | 150 | ## (11/9 - 11/12) Week 10 151 | 152 | [Code Reviews Slides](materials/code-reviews.pdf) 153 | 154 | Topics: 155 | 156 | - Code Reviews 157 | - Software Engineering Best Practices 158 | - [Resource link](http://web.mit.edu/6.005/www/fa16/classes/04-code-review/) 159 | 160 | ## (11/16 - 11/19) Week 11 161 | 162 | [Adding Local Authentication Slides](materials/Adding-Local-Authentication.pdf) 163 | 164 | [Project Starter: local authentication branch](https://github.com/CUNYTechPrep/project-starter/tree/local-auth) 165 | 166 | Topics: 167 | 168 | - Deploying to Heroku 169 | - _Lab Time: Work on Projects_ 170 | 171 | ## (11/23 - 11/26) NO CLASS 172 | 173 | ### Thanksgiving Break / Spring Break 174 | 175 | 176 | ## (11/30 - 12/3) Week 12 177 | 178 | Topics: 179 | 180 | - _Lab Time: Work on Projects_ 181 | 182 | ## (12/7 - 12/10) Week 13 183 | 184 | Topics: 185 | 186 | - Practice Demo Night Pitches and Demos 187 | - _Lab Time: Work on Projects_ 188 | 189 | ## (12/14) DEMO NIGHT 190 | 191 | ### Demo Night 192 | 193 | - Location: _Online_ 194 | - Time: December 14, 2021 -- 5:30pm-7pm_ 195 | -------------------------------------------------------------------------------- /materials/learn-react-1.md: -------------------------------------------------------------------------------- 1 | # Learn React 1 2 | 3 | ## Step 1. Getting started 4 | 5 | Open up your terminal. 6 | 7 | Make sure node and npm are working. Run the following commands: 8 | 9 | ```bash 10 | node --version 11 | ``` 12 | 13 | It should display version 14.x (or 16.x). 14 | 15 | ```bash 16 | npx --version 17 | ``` 18 | 19 | Any version means it is installed. 20 | 21 | If these are not installed install the latest version of node. 22 | 23 | - https://github.com/CUNYTechPrep/guides#development-environment-setup 24 | 25 | ## Step 2. Create and Launch a React project 26 | 27 | In your terminal, make a directory for your projects, and change directory to it. I like to keep my files in a directory named `ctp` under my home directory. 28 | 29 | ```bash 30 | cd ~ 31 | mkdir ctp 32 | cd ctp 33 | ``` 34 | 35 | > you only have to `mkdir ctp` if this directory doesn't already exist 36 | 37 | Now we're going to create our first react app: 38 | 39 | ```bash 40 | npx create-react-app learn-react-1 41 | cd learn-react-1 42 | npm start 43 | ``` 44 | 45 | If your browser opened up automatically and you see the spinning logo, then everything is working. 46 | 47 | ## Step 3. Look through the code 48 | 49 | Open up the `learn-react-1` directory in your text editor. 50 | 51 | Let's take a look at `/public/index.html` specifically the `
` 52 | 53 | Now let's go to the `/src/index.js` and let's delete all of the code in this file. This is the entry point to our React app. No need to worry about the rest of the files in src for now. We will eventually delete them all, and create new files ourselves. 54 | 55 | > When you delete all of the code and save the file, what happened in the browser? 56 | 57 | ## Step 4. Hello World 58 | 59 | In `/src/index.js` add the following code: 60 | 61 | ```JSX 62 | import React from 'react' 63 | import ReactDOM from 'react-dom' 64 | 65 | ReactDOM.render( 66 |

Hello World!

, 67 | document.getElementById("root") 68 | ); 69 | ``` 70 | 71 | Let's break this code down. 72 | 73 | - import statements 74 | - ReactDOM.render(reactElement, htmlDOMContainer) 75 | - JSX 76 | 77 | > This is not HTML, it is JSX. 78 | 79 | Try to change the HTML, add some other tags. Try the following examples and observe the results. 80 | 81 | ```JSX 82 |

Hello World!

83 | ``` 84 | 85 | ```JSX 86 |
87 |

Hello World!

88 |

Hi Again

89 |
90 | ``` 91 | 92 | ```JSX 93 |
94 |

Hello World! 95 |

Hi Again

96 |
97 | ``` 98 | 99 | ```JSX 100 |

Hello World!

101 |

Hi Again

102 | ``` 103 | 104 | - all standard HTML tags are available in lowercase version 105 | - all tags must be closed 106 | - all JSX must have a single parent tag 107 | 108 | ## Step 5. Functional Components 109 | 110 | The point of a component based system is to create reusable componenets. Let's make the following changes to our code: 111 | 112 | ```JSX 113 | import React from 'react' 114 | import ReactDOM from 'react-dom' 115 | 116 | function Welcome() { 117 | return ( 118 |
119 |

Welcome CTP Class

120 |

My first component

121 |
122 | ); 123 | } 124 | 125 | ReactDOM.render( 126 | , 127 | document.getElementById("root") 128 | ); 129 | ``` 130 | 131 | What did we just do? 132 | 133 | - components must begin with capital letters 134 | - notice the `( )` in the return 135 | - Try 136 | - is a standard HTML tag? 137 | 138 | We can and should create many small components, that we put together. Let's make the following changes: 139 | 140 | ```JSX 141 | ... 142 | 143 | function Student() { 144 | return
- Sally is in class
; 145 | } 146 | 147 | function Welcome() { 148 | return ( 149 |
150 |

Welcome CTP Class

151 |

Who is in class?

152 | 153 |
154 | ); 155 | } 156 | 157 | ... 158 | ``` 159 | 160 | - Try adding multiple `Student` tags in the Welcome component. What happens? 161 | 162 | ## Step 6. Props and embedding JavaScript in JSX 163 | 164 | A component like Student is a lot more useful if we can dynamically change its content. We will do that now: 165 | 166 | ```JSX 167 | ... 168 | 169 | function Student(props) { 170 | return
- { props.name } is in class
; 171 | } 172 | 173 | function Welcome() { 174 | return ( 175 |
176 |

Welcome CTP Class

177 |

Who is in class?

178 | 179 | 180 | 181 |
182 | ); 183 | } 184 | 185 | ... 186 | ``` 187 | 188 | - add different names to the last two `Student` tags 189 | - `{ }` allows us to embed javascript within JSX 190 | - `props` are always passed to components 191 | - `props` are immutable, what does that mean? 192 | - try changing `props.name = "Jose"`, what happens? 193 | 194 | ## Step 7. HTML Attributes like `
` and adding CSS 195 | 196 | JSX is not HTML, but it does allow you to set standard HTML attributes with slightly different names. 197 | 198 | Instead of `class` we use `className`. React's designers did this on purpose to differnetiate JSX from HTML. 199 | 200 | There are many ways to handle CSS in React. For now we will keep it simple and use the file `/src/index.css` 201 | 202 | in `/src/index.css` add the following to the bottom of the file: 203 | ```css 204 | .red-text { 205 | color: red; 206 | } 207 | ``` 208 | 209 | in `/src/index.js` add the following below your import statements: 210 | 211 | ```JSX 212 | import './index.css' 213 | ``` 214 | 215 | and make the following change: 216 | 217 | ```JSX 218 | ... 219 | 220 | function Student(props) { 221 | return
- { props.name } is in class
; 222 | } 223 | 224 | ... 225 | ``` 226 | 227 | Functional components are really great and powerful, but sometimes we have to store a lot more logic in our components, and we would like to follow best practices and use separate functions for that. In the next step we will see how we can do that. 228 | 229 | ## Step 8. Class Components 230 | 231 | In `/src/index.js` replace all code with the following: 232 | 233 | ```JSX 234 | import React from 'react' 235 | import ReactDOM from 'react-dom' 236 | import './index.css' 237 | 238 | class App extends React.Component { 239 | render() { 240 | return ( 241 |
242 |

The button has been clicked 0 times

243 | 244 |
245 | ); 246 | } 247 | } 248 | 249 | ReactDOM.render( 250 | , 251 | document.getElementById("root") 252 | ); 253 | ``` 254 | 255 | - notice the use of new ES6 syntax: `class`, `extends` 256 | - all class components require a `render()` method, it should return JSX 257 | 258 | **Props** are still available in class components, but they are now part available throughout the class via `this.props` 259 | 260 | ```JSX 261 | ... 262 | 263 | class App extends React.Component { 264 | render() { 265 | return ( 266 |
267 |

The button has been clicked 0 times

268 | 269 |
270 | ); 271 | } 272 | } 273 | 274 | ReactDOM.render( 275 | , 276 | document.getElementById("root") 277 | ); 278 | 279 | ... 280 | ``` 281 | 282 | In our current example, our intent is to update the app with the number of times that the button has been pressed. We will do this by introducing two new concepts in the following two steps. 283 | 284 | ## Step 9. Event Handling 285 | 286 | First, let's do something when the button is clicked. 287 | 288 | ```JSX 289 | class App extends React.Component { 290 | render() { 291 | return ( 292 |
293 |

The button has been clicked 0 times

294 | 295 |
296 | ); 297 | } 298 | } 299 | ``` 300 | 301 | In regular HTML, we can use the attribute `
` to run some javascript event handling code. In react we will use the `onClick` prop instead. 302 | 303 | - notice the camel casing of standard html attributes `className`, `onClick` in react 304 | - onClick receives a function that will run in response to the event 305 | - what happens if you change it to just `onClick={ alert('The button was pressed!) }` 306 | - `onClick` works with other html tags, such as img, div, h1, etc. 307 | - `e` stands for event, it contains information about the user event, such as which mouse button was used to click. 308 | 309 | 310 | ## Step 10. State and Constructors 311 | 312 | Now that we can handle the events like a button being clicked, we want to keep track of how many times the user has clicked the button. 313 | 314 | Props are immutable (read-only) so we cannot use them to do that. So now we introduce another core react object that **is mutable, `state`**. 315 | 316 | ```JSX 317 | class App extends React.Component { 318 | constructor(props) { 319 | super(props); // required so that props work 320 | this.state = { 321 | clicks: 0, 322 | }; 323 | } 324 | 325 | handleClick(event) { 326 | this.setState({ 327 | clicks: this.state.clicks + 1 328 | }); 329 | } 330 | 331 | render() { 332 | return ( 333 |
334 |

The button has been clicked { this.state.clicks } times

335 | 336 |
337 | ); 338 | } 339 | } 340 | ``` 341 | 342 | In this example we initialize state in the constructor and update it in the `handleClick` function. 343 | 344 | - the constructor receives the props 345 | - `super(props)` must be called in the constructor for class components to work properly 346 | - `this.state` is initialized with an object, provide initial values to all state properties you will use. 347 | - `handleClick` is our own function. We can call it anything we like. 348 | - state can only be updated with the `this.setState({...})` property 349 | - `this.state.clicks = 42` will not work as expected, try this. 350 | 351 | Check out a similar and funny example: 352 | https://jsbin.com/xemiboniye/1/edit?html,js,output 353 | 354 | ## Step 11. Lab: Toggle Boards 355 | 356 | Complete the lab in this repository: https://github.com/CUNYTechPrep/react-lab-1 357 | --------------------------------------------------------------------------------