├── README.md
└── materials
├── React-Intro-2019.pdf
├── code-reviews.pdf
├── fetch-and-React-2019.pdf
├── first_project_presentation_template.pdf
├── learn-react-1.md
├── lecture-01.pdf
├── lecture-03.pdf
├── lecture-04.pdf
├── lecture-05.pdf
└── team-project-proposal.md
/README.md:
--------------------------------------------------------------------------------
1 | **_CUNY Tech Prep 2020-2021_**
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 2020 Web Dev Track _Class Schedule and Materials_
8 |
9 | ## Summer Prep Work
10 |
11 | [Summer Homework](https://docs.google.com/document/d/1sVWDAxWoFSsgaG8eIDmZ7eqD1bvMH-Ac8c-Rbt2Dj5s/edit?usp=sharing)
12 |
13 | ## (9/1 - 9/4) Week 1
14 |
15 | [Lecture Slides](materials/lecture-01.pdf)
16 |
17 | [Bootstrap Lab](https://github.com/CUNYTechPrep/bootstrap-lab)
18 |
19 | Topics:
20 |
21 | - Semester Overview
22 | - Designing Web Apps
23 | - Review: HTML & CSS
24 | - Intro to Bootstrap
25 |
26 | Assignments:
27 |
28 | - Project Ideation: provide your idea in the ideation document
29 | - Meet your classmates and form teams
30 |
31 | ## (9/8 - 9/11) Week 2
32 |
33 | [Lecture Slides](materials/React-Intro-2019.pdf)
34 |
35 | [Learn React 1: Step by Step](materials/learn-react-1.md)
36 |
37 | Topics:
38 |
39 | - React Intro
40 |
41 | Assignments:
42 |
43 | - Form a team of 3
44 |
45 | ## (9/15 - 9/18) Week 3
46 |
47 | > Note: _CUNY has no classes on Friday 9/18. CTP WILL have class. If you can't attend let your instructor know._
48 |
49 | [Lecture Slides (URL's and http)](materials/lecture-03.pdf)
50 |
51 | [Lecture Slides (fetch() and React)](materials/fetch-and-React-2019.pdf)
52 |
53 | [Zip Code React Lab](https://github.com/CUNYTechPrep/zip-code-react-lab)
54 |
55 | Topics:
56 |
57 | - Client-Server Communication
58 | + Parts of a URL
59 | + Understanding HTTP Request-Response
60 | - `fetch(...)` and Promises
61 | - More React
62 |
63 | Assignments:
64 |
65 | * Team Project Proposals (**Due before week 4 class**)
66 | * Form a **team of 3** students and submit a Team Project Propsal.
67 | * [Team Project Proposal guidelines](materials/team-project-proposal.md)
68 | * [Submit Here](https://forms.gle/GozZ1fk6P4c4Cpfs7)
69 |
70 |
71 | ## (9/22 - 9/25) Week 4
72 |
73 | Topics:
74 |
75 | - More `fetch()` and React
76 | - React Router
77 |
78 | ## (9/29 - 10/2) Week 5
79 |
80 | [Lecture Slides (Full Stack, npm, express.js intro)](materials/lecture-04.pdf)
81 |
82 | [Zip Code API Lab](https://github.com/CUNYTechPrep/zip-code-api-lab)
83 |
84 | Topics:
85 |
86 | - Fullstack Review: Frontend vs Backend
87 | - About `npm`
88 | - Building a backend with Express.js
89 | + Routing
90 | + Route Parameters
91 | + Query Parameters
92 | + Body Parameters
93 | - RESTful Routing
94 |
95 | ## (10/6 - 10/9) Week 6
96 |
97 | [Lecture Slides (SDLC, MVC, Data modeling, ORM's)](materials/lecture-05.pdf)
98 |
99 | Topics:
100 |
101 | - _Career Coach Workshop 1_
102 | - SDLC
103 | - MVC (_Models-Views-Controllers_) Project Structure
104 | - Databases and Data Modeling
105 | - ORM's (Sequelize.js)
106 | - Views and Templates (Handlebars)
107 |
108 | ## (10/13 - 10/16) Week 7
109 |
110 | > Note: _Wednesday 10/14 is a Monday schedule. If you can't attend class let your instructor know._
111 |
112 | [Project Starter](https://github.com/CUNYTechPrep/project-starter)
113 |
114 | Topics:
115 |
116 | - Using MVC app structure
117 | - Using Sequelize.js
118 | - How to design an app using: mockups, models, and routes
119 |
120 | Assignments:
121 |
122 | * **First Project Presentation**
123 | * During Week 9 class (10/27-10/30)
124 | * Presentation Guidelines
125 | * 8 minutes per team (5 min presentation, 3 min Q&A)
126 | * All team members must present at least one slide
127 | * See a presentation template here: [first_project_presentation_template.pdf](materials/first_project_presentation_template.pdf)
128 | * (_Optional_) Show a demo of work in progress if you can
129 |
130 | ## (10/20 - 10/23) Week 8
131 |
132 | [Learn Sequelize lab](https://github.com/CUNYTechPrep/learn-sequelize)
133 |
134 | Topics:
135 |
136 | - Using Sequelize.js
137 | - Testing (Jest)
138 |
139 | ## (10/27 - 10/30) Week 9
140 |
141 | [Authentication in Project Starter](https://github.com/CUNYTechPrep/project-starter/commits/authentication)
142 |
143 | Topics:
144 |
145 | - **_Project Presentations_**
146 | - Implementing Authentication
147 | - Sessions
148 | - Passport.js, Bcrypt
149 |
150 | ## (11/3 - 11/6) Week 10
151 |
152 | [Lecture Slides (code reviews)](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/10 - 11/13) Week 11
161 |
162 | Topics:
163 |
164 | - _Lab Time: Work on Projects_
165 |
166 | ## (11/17 - 11/20) Week 12
167 |
168 | Topics:
169 |
170 | - _Career Coach Workshop 2_
171 | - _Lab Time: Work on Projects_
172 |
173 |
174 | ## (11/24 - 11/27) NO CLASS
175 |
176 | ### Thanksgiving Break
177 |
178 | ## (12/1 - 12/4) Week 13
179 |
180 | Topics:
181 |
182 | - Practice Demo Night Pitches and Demos
183 | - _Lab Time: Work on Projects_
184 |
185 | ## (TBA) DEMO NIGHT
186 |
187 | ### Demo Night
188 |
189 | - Location: _TBA_
190 | - Time: _TBA_
191 |
--------------------------------------------------------------------------------
/materials/React-Intro-2019.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CUNYTechPrep/2020-fall-web-dev/91722c44e79a30942d91ad80eb69805df2b082d2/materials/React-Intro-2019.pdf
--------------------------------------------------------------------------------
/materials/code-reviews.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CUNYTechPrep/2020-fall-web-dev/91722c44e79a30942d91ad80eb69805df2b082d2/materials/code-reviews.pdf
--------------------------------------------------------------------------------
/materials/fetch-and-React-2019.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CUNYTechPrep/2020-fall-web-dev/91722c44e79a30942d91ad80eb69805df2b082d2/materials/fetch-and-React-2019.pdf
--------------------------------------------------------------------------------
/materials/first_project_presentation_template.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CUNYTechPrep/2020-fall-web-dev/91722c44e79a30942d91ad80eb69805df2b082d2/materials/first_project_presentation_template.pdf
--------------------------------------------------------------------------------
/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 10.x or higher.
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
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
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. Exercise: Toggle Boards
355 |
356 | In the following example, we have 3 boards, and a toggle button.
357 |
358 | - Initially, the first board is active and has a green border.
359 | - When you press the toggle button, the second board should be active, and the first one should be inactive.
360 | - When you reach the end, the first one should become active again.
361 |
362 | To start off and understand the desired toggle effect, try changing
363 | `let isSelected = ii === 0;`
364 | to
365 | `let isSelected = ii === 1;`
366 |
367 | https://glitch.com/edit/#!/spice-banana?path=src/BoardSwitcher.js:21:6
368 |
369 | You can import the JS code and its CSS into you local react-app so that you don't have to use glitch.
370 |
371 | > I recommend downloading the code and css locally to try this example out. If you prefer an online environment I've also made a glitch version (https://glitch.com/edit/#!/spice-banana?path=src/BoardSwitcher.js:21:6) here you can code and the code will be compiled and run for you. Make sure to 1) click "Remix to edit" button on the top right and then 2) click the "Show" button on the top left to see the output.
372 |
--------------------------------------------------------------------------------
/materials/lecture-01.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CUNYTechPrep/2020-fall-web-dev/91722c44e79a30942d91ad80eb69805df2b082d2/materials/lecture-01.pdf
--------------------------------------------------------------------------------
/materials/lecture-03.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CUNYTechPrep/2020-fall-web-dev/91722c44e79a30942d91ad80eb69805df2b082d2/materials/lecture-03.pdf
--------------------------------------------------------------------------------
/materials/lecture-04.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CUNYTechPrep/2020-fall-web-dev/91722c44e79a30942d91ad80eb69805df2b082d2/materials/lecture-04.pdf
--------------------------------------------------------------------------------
/materials/lecture-05.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CUNYTechPrep/2020-fall-web-dev/91722c44e79a30942d91ad80eb69805df2b082d2/materials/lecture-05.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 |
--------------------------------------------------------------------------------