`
79 |
80 | > This is not HTML, it is JSX.
81 |
82 | Try to change the JSX, add some other tags. Try the following examples and observe the results.
83 |
84 | ```JSX
85 |
Hello World!
86 | ```
87 |
88 | ```JSX
89 |
90 |
Hello World!
91 |
Hi Again
92 |
93 | ```
94 |
95 | ```JSX
96 |
97 |
Hello World!
98 |
Hi Again
99 |
100 | ```
101 |
102 | ```JSX
103 |
Hello World!
104 |
Hi Again
105 | ```
106 |
107 | ```JSX
108 | <>
109 |
Hello World!
110 |
Hi Again
111 |
112 | ```
113 |
114 | - all standard HTML tags are available in lowercase version
115 | - can nest multiple components
116 | - all tags must be closed
117 | - all JSX must have a single parent tag
118 | - can use a fragment tag `<>`
119 |
120 | ## Step 5. Functional Components
121 |
122 | The point of a component based system is to create reusable componenets. Let's make the following changes to our code:
123 |
124 | ```JSX
125 | import React from "react";
126 | import ReactDOM from "react-dom/client";
127 |
128 | function ClassList() {
129 | return (
130 |
131 |
Welcome to CTP
132 |
List of Students
133 |
134 | );
135 | }
136 |
137 | const htmlContainer = document.getElementById("root");
138 | const root = ReactDOM.createRoot(htmlContainer);
139 | root.render();
140 | ```
141 |
142 | What did we just do?
143 |
144 | - components should begin with capital letters
145 | - notice the `( )` in the return
146 | - Try , did it work?
147 | - is a standard HTML tag?
148 |
149 | We can and should create many small components, that we put together. Let's make the following changes:
150 |
151 | ```JSX
152 | ...
153 |
154 | function StudentInfo() {
155 | return (
156 |
182 | );
183 | }
184 |
185 | ...
186 | ```
187 |
188 | - Try adding multiple `StudentInfo` tags in the ClassList component. What happens?
189 |
190 | ## Step 6. Props and embedding JavaScript in JSX
191 |
192 | A component like StudentInfo is a lot more useful if we can dynamically change its content. We will do that now:
193 |
194 | ```JSX
195 | ...
196 |
197 | function StudentInfo(props) {
198 | return (
199 |
300 | );
301 | }
302 | ...
303 | ```
304 |
305 | - we can destructure objects `{...student}` to pass them as props (keys and prop-names must match)
306 | - when rendering lists of components we must provide unique keys
307 |
308 | ## Step 8. HTML Attributes like `
` and adding CSS
309 |
310 | JSX is not HTML, but it does allow you to set standard HTML attributes with slightly different names.
311 |
312 | Instead of `class` we use `className`. React's designers did this on purpose to differentiate JSX from HTML.
313 |
314 | There are many ways to handle CSS in React. For now we will keep it simple and use the file `/src/index.css`
315 |
316 | in `/src/index.css` add the following to the bottom of the file:
317 | ```css
318 | .red-text {
319 | color: red;
320 | }
321 | ```
322 |
323 | in `/src/index.js` add the following below your import statements:
324 |
325 | ```JSX
326 | import './index.css'
327 | ```
328 |
329 | and make the following change:
330 |
331 | ```JSX
332 | ...
333 |
334 | function ClassList() {
335 | return (
336 |
343 | );
344 | }
345 | ...
346 | ```
347 |
348 | ## Step 9. Event Handling
349 |
350 | Let's change our example app to explore the concept of events. What we ideally want to do now is keep track of how many times a user has clicked a button. It will take us two steps to get there.
351 |
352 | ```JSX
353 | ...
354 | function CountApp() {
355 | return (
356 |
357 |
The button has been clicked 0 times
358 |
361 |
362 | );
363 | }
364 |
365 | // replace the root.render() call with this
366 | root.render();
367 | ```
368 |
369 | In regular HTML, we can use the attribute `
` to run some javascript event handling code. In react we will use the `onClick` prop instead.
370 |
371 | - notice the camel casing of standard html attributes `className`, `onClick` in react
372 | - onClick receives a function (callback) that will run in response to the event
373 | - what happens if you change it to just `onClick={ alert('The button was pressed!) }`
374 | - `onClick` works with other html tags, such as img, div, h1, etc.
375 | - `e` stands for event, it contains information about the user event, such as which mouse button was used to click.
376 |
377 |
378 | ## Step 10. State and hooks
379 |
380 | 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.
381 |
382 | 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`**.
383 |
384 | ```JSX
385 | // Update your import to this
386 | import React, { useState } from "react";
387 |
388 | ...
389 |
390 | function CountApp() {
391 | const [numClicks, setNumClicks] = useState(0);
392 |
393 | const handleClick = (event) => {
394 | setNumClicks(numClicks + 1);
395 | };
396 |
397 | return (
398 |
399 |
The button has been clicked {numClicks} times
400 |
401 |
402 | );
403 | }
404 | ```
405 |
406 | In this example we initialize and access state by calling the `useState` hook and we update the state in the `handleClick` function.
407 |
408 | - We can continue to use props if needed.
409 | - the useState hook always returns an array of two things
410 | + `const [currentValue, setValueFunction] = useState(initialValue)`
411 | - `handleClick` is our own function. We can call it anything we like.
412 | - state can only be updated with the setValueFunction provided by the hook
413 | - `numClicks = 42` will not work as expected, try this.
414 |
--------------------------------------------------------------------------------
/materials/mvc-data-modeling-2022.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CUNYTechPrep/2022-fall-web-dev/bf3e9a633a46dd7fe97c4af45d671032aec0a6b0/materials/mvc-data-modeling-2022.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 team 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 | + Which types of people would want to use this application? (don't say everyone)
19 | + Are there similar applications and/or competitors available now? How does your idea differ? or why is there a need for a competitor?
20 | * _It is OK for your idea to be a clone of an existing application_
21 | 4. **User-types**:
22 | - Clearly define and describe the User-types for your application. 1 or more user-types depending on your idea.
23 | - _Think of_: Sellers, Buyers, Administrator, Moderator, Content-creator, Consumer, Teachers, Students, etc...
24 | 5. **User Stories**:
25 | - List the most important actions for each user-type
26 | - What are the most important workflows for users of your application
27 | - To learn more about User stories read:
28 | + https://dzone.com/articles/writing-user-stories-web
29 | + https://www.mountaingoatsoftware.com/presentations/introduction-to-user-stories
30 |
31 | ## Submit
32 |
33 | Submit your team proposal here: https://forms.gle/TijnKEjW7n9eLhFU9
34 |
35 | **Due:** Week 4
36 |
--------------------------------------------------------------------------------
/thursday.md:
--------------------------------------------------------------------------------
1 |
2 | # Fall 2022 Web Dev Track _Class Schedule and Materials_
3 |
4 | Thursday 6:30-9pm Section
5 |
6 | ## (9/1) Week 1
7 |
8 | [Slides Week 1: Welcome, Project Ideation, Bootstrap](https://docs.google.com/presentation/d/1x3ZgpUU78Szlv2MYEurGWT2MGifaogVynjpbzqjBofg/edit?usp=sharing)
9 |
10 | [Bootstrap Lab](https://github.com/CUNYTechPrep/lab-bootstrap-5.2)
11 |
12 | Topics:
13 |
14 | - Semester Overview
15 | - Designing Web Apps
16 | - Review: HTML & CSS
17 | - Lab Bootstrap 5.2
18 |
19 | Assignments:
20 |
21 |
22 | - **Project Ideation**: provide your idea in the ideation document
23 | + *If you did not finish this in class finish it before Week 2*
24 | - Meet your classmates and **form teams**
25 | + Read through your classmates ideas and contact them over slack
26 | + Formed teams due in Week 3 class
27 |
28 |
29 | ## (9/8) Week 2
30 |
31 | [Slides: React Intro](https://docs.google.com/presentation/d/1Irg_ScxrLVN425nsA1vn7rZ-vv83G0XsB3jQPodXnfA/edit?usp=sharing)
32 |
33 | [Tutorial: Learn React 1](https://github.com/CUNYTechPrep/2022-fall-web-dev/blob/main/materials/learn-react-1.md)
34 |
35 | Topics:
36 |
37 | - React Intro
38 |
39 | Assignments:
40 |
41 | - Form teams by Week 3
42 |
43 |
44 |
45 | ## (9/15) Week 3
46 |
47 | [Slides: URL's & HTTP Request and Response](https://docs.google.com/presentation/d/1hJgCCh3UiygFQ6q8_G7_KCn332rGuo6VPHlM49JM4Ao/edit?usp=sharing)
48 |
49 | [Slides: fetch() & fetching in React](https://docs.google.com/presentation/d/1ctGUH2sYpqDjo268t_nL0A3u1t6tzAqwk-mw5WIxwnM/edit?usp=sharing)
50 |
51 | [Lab: React Toggle](https://github.com/CUNYTechPrep/lab-react-toggle)
52 |
53 | [Lab: React Trivia](https://github.com/CUNYTechPrep/lab-react-trivia)
54 |
55 |
56 | Topics:
57 |
58 | - Client-Server Communication
59 | + Parts of a URL
60 | + Understanding HTTP Request-Response
61 | - `fetch(...)` and Promises
62 | - More React
63 |
64 | Assignments:
65 |
66 | - Teams should submit a [team project proposal](https://github.com/CUNYTechPrep/2022-fall-web-dev/blob/main/materials/team-project-proposal.md) by start of Week 4 class
67 | - Complete and submit [Lab: React Toggle](https://github.com/CUNYTechPrep/lab-react-toggle)
68 |
69 |
70 | ## (9/22) Week 4
71 |
72 | Topics:
73 |
74 | - More `fetch()` and React
75 |
76 | Assignments:
77 |
78 | - Complete and submit [Lab: React Trivia](https://github.com/CUNYTechPrep/lab-react-trivia)
79 |
80 | ## (9/29) NO CLASS
81 |
82 |
83 | ## (10/6) Week 5
84 |
85 | [Slides: Full Stack Overview](https://docs.google.com/presentation/d/1x6mtEjdU2JhhJuUaoP0LC4_uMtTUEpNDxD6NIabnkKM/edit?usp=sharing)
86 |
87 | [Slides: NPM & Express.js](https://docs.google.com/presentation/d/1oWHbjoTU3BdrCpZ51I73D3YRLkManTQtkUheegribg4/edit?usp=sharing)
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 | Assignments:
101 |
102 | - Complete and submit [Lab: React Zip Search](https://github.com/CUNYTechPrep/lab-react-zip-search) by week 6
103 |
104 |
105 |
106 | ## (10/13) Week 6
107 |
108 | Topics:
109 |
110 | - SDLC (software development lifecycle)
111 | - MVC (_Models-Views-Controllers_) Project Structure
112 | - Databases and Data Modeling
113 | - ORM's (Sequelize.js)
114 |
115 | ## (10/20) Week 7
116 |
117 |
118 | Topics:
119 |
120 | - Using MVC app structure
121 | - Project Starter setup and walkthrough
122 |
123 |
124 | ## (10/27) Week 8
125 |
126 |
127 | Topics:
128 |
129 | - Using Sequelize.js
130 | - Testing (Jest)
131 |
132 | ## (11/3) Week 9
133 |
134 | Topics:
135 |
136 | - **_Project Presentations_**
137 | - Implementing Authentication
138 | - Sessions
139 | - Passport.js, Bcrypt
140 |
141 | ## (11/10) Week 10
142 |
143 |
144 | Topics:
145 |
146 | - Code Reviews
147 | - Software Engineering Best Practices
148 | - [Resource link](http://web.mit.edu/6.005/www/fa16/classes/04-code-review/)
149 |
150 | ## (11/17) Week 11
151 |
152 |
153 | Topics:
154 |
155 | - Deploying to ~Heroku~ ??
156 | - _Lab Time: Work on Projects_
157 |
158 | ## (11/24) NO CLASS
159 |
160 | ### Thanksgiving Break
161 |
162 |
163 | ## (12/1) Week 12
164 |
165 | Topics:
166 |
167 | - _Lab Time: Work on Projects_
168 |
169 | ## (12/8) Week 13
170 |
171 | Topics:
172 |
173 | - Practice Demo Night Pitches and Demos
174 | - _Lab Time: Work on Projects_
175 |
176 | ## (12/14 - tentatively) DEMO NIGHT
177 |
178 | ### Demo Night
179 |
180 | - Location: TBD
181 | - Time: TBD
182 |
--------------------------------------------------------------------------------
/tuesday.md:
--------------------------------------------------------------------------------
1 |
2 | # Fall 2022 Web Dev Track _Class Schedule and Materials_
3 |
4 | Tuesday 6:30-9pm Section
5 |
6 | ## (8/30) Week 1
7 |
8 | [Slides Week 1: Welcome, Project Ideation, Bootstrap](https://docs.google.com/presentation/d/1x3ZgpUU78Szlv2MYEurGWT2MGifaogVynjpbzqjBofg/edit?usp=sharing)
9 |
10 | [Bootstrap Lab](https://github.com/CUNYTechPrep/lab-bootstrap-5.2)
11 |
12 | Topics:
13 |
14 | - Semester Overview
15 | - Designing Web Apps
16 | - Review: HTML & CSS
17 | - Lab Bootstrap 5.2
18 |
19 | Assignments:
20 |
21 |
22 | - **Project Ideation**: provide your idea in the ideation document
23 | + *If you did not finish this in class finish it before Week 2*
24 | + Ideation slides are bookmarked in your Slack channel
25 | - Meet your classmates and **form teams**
26 | + Read through your classmates ideas and contact them over slack
27 | + Formed teams due in Week 3 class
28 | - Complete and submit the Boostrap Lab by Week 2
29 |
30 |
31 | ## (9/6) Week 2
32 |
33 | [Slides: React Intro](https://docs.google.com/presentation/d/1Irg_ScxrLVN425nsA1vn7rZ-vv83G0XsB3jQPodXnfA/edit?usp=sharing)
34 |
35 | [Tutorial: Learn React 1](https://github.com/CUNYTechPrep/2022-fall-web-dev/blob/main/materials/learn-react-1.md)
36 |
37 | Topics:
38 |
39 | - React Intro
40 |
41 | Assignments:
42 |
43 | - Form teams by Week 3
44 |
45 |
46 |
47 | ## (9/13) Week 3
48 |
49 | [Slides: URL's & HTTP Request and Response](https://docs.google.com/presentation/d/1hJgCCh3UiygFQ6q8_G7_KCn332rGuo6VPHlM49JM4Ao/edit?usp=sharing)
50 |
51 | [Slides: fetch() & fetching in React](https://docs.google.com/presentation/d/1ctGUH2sYpqDjo268t_nL0A3u1t6tzAqwk-mw5WIxwnM/edit?usp=sharing)
52 |
53 | [Lab: React Toggle](https://github.com/CUNYTechPrep/lab-react-toggle)
54 |
55 | [Lab: React Trivia](https://github.com/CUNYTechPrep/lab-react-trivia)
56 |
57 | Topics:
58 |
59 | - Client-Server Communication
60 | + Parts of a URL
61 | + Understanding HTTP Request-Response
62 | - `fetch(...)` and Promises
63 | - More React
64 |
65 | Assignments:
66 |
67 | - Teams should submit a [team project proposal](https://github.com/CUNYTechPrep/2022-fall-web-dev/blob/main/materials/team-project-proposal.md) by start of Week 4 class
68 | - Complete and submit [Lab: React Toggle](https://github.com/CUNYTechPrep/lab-react-toggle)
69 |
70 | ## (9/20) Week 4
71 |
72 | Topics:
73 |
74 | - More `fetch()` and React
75 |
76 | Assignments:
77 |
78 | - Complete and submit [Lab: React Trivia](https://github.com/CUNYTechPrep/lab-react-trivia)
79 |
80 | ## (9/27) Week 5
81 |
82 | [Slides: Full Stack Overview](https://docs.google.com/presentation/d/1x6mtEjdU2JhhJuUaoP0LC4_uMtTUEpNDxD6NIabnkKM/edit?usp=sharing)
83 |
84 | [Slides: NPM & Express.js](https://docs.google.com/presentation/d/1oWHbjoTU3BdrCpZ51I73D3YRLkManTQtkUheegribg4/edit?usp=sharing)
85 |
86 | Topics:
87 |
88 | - Fullstack Review: Frontend vs Backend
89 | - About `npm`
90 | - Building a backend with Express.js
91 | + Routing
92 | + Route Parameters
93 | + Query Parameters
94 | + Body Parameters
95 | - RESTful Routing
96 |
97 | Assignments:
98 |
99 | - Complete and submit [Lab: React Zip Search](https://github.com/CUNYTechPrep/lab-react-zip-search) by week 6
100 |
101 | ## (10/4) NO CLASS
102 |
103 |
104 | ## (10/11) Week 6
105 |
106 | [Slides: SDLC & Collaboration](https://docs.google.com/presentation/d/1B_axNuiBuRdlivvITJYF2AS8RCWSa84XBGSR7Iw0S64/edit?usp=sharing)
107 |
108 | Topics:
109 |
110 | - SDLC (software development lifecycle)
111 | - Design Documents
112 |
113 | Assignments:
114 |
115 | - Complete and submit [Lab: Zip Code API](https://github.com/CUNYTechPrep/zip-code-api-lab) by week 7
116 | - Work on your teams [design document](https://docs.google.com/document/d/15Cs2h6f83mXQWmCoSQ37N2fwiKui9Oli9Ph1WwXsDSY/edit)
117 | + share with your project mentor (instructor or TA)
118 | + work on it throughout remaining semester, does not need to be complete
119 |
120 | ## (10/18) Week 7
121 |
122 | [Slides: MVC (slides 1-15)](materials/mvc-data-modeling-2022.pdf)
123 |
124 | [Project Starter Template](https://github.com/CUNYTechPrep/project-starter)
125 |
126 | Topics:
127 |
128 | - MVC (_Models-Views-Controllers_) Project Structure
129 | - Using MVC app structure
130 | - Project Starter setup and walkthrough
131 |
132 |
133 | ## (10/25) Week 8
134 |
135 | [Slides: Databases & Data Modeling (slides 16-42)](materials/mvc-data-modeling-2022.pdf)
136 |
137 | [Lab: Learn Sequelize](https://github.com/CUNYTechPrep/learn-sequelize)
138 |
139 | Topics:
140 |
141 | - Databases and Data Modeling
142 | - ORM's (Sequelize.js)
143 | - Using Sequelize.js
144 | - Testing (Jest)
145 |
146 | Assignments:
147 |
148 | - First Project Presentation
149 | - During Week 9 class
150 | - Presentation Guidelines
151 | - 8 minutes per team (5 min presentation, 3 min Q&A)
152 | - All team members must present at least one slide
153 | - See a presentation template here: [first_project_presentation_template.pdf](materials/first_project_presentation_template.pdf)
154 | - (Optional) Show a demo of work in progress if you can, otherwise show your mockups/design
155 |
156 |
157 | ## (11/1) Week 9
158 |
159 | Topics:
160 |
161 | - **_Project Presentations_**
162 | - Implementing Authentication
163 | - Sessions
164 | - Passport.js, Bcrypt
165 |
166 | ## (11/8) Week 10
167 |
168 |
169 | Topics:
170 |
171 | - Code Reviews
172 | - Software Engineering Best Practices
173 | - [Resource link](http://web.mit.edu/6.005/www/fa16/classes/04-code-review/)
174 |
175 | ## (11/15) Week 11
176 |
177 |
178 | Topics:
179 |
180 | - Deploying to ~Heroku~ ??
181 | - _Lab Time: Work on Projects_
182 |
183 | ## (11/22) NO CLASS
184 |
185 | ### Thanksgiving Break
186 |
187 |
188 | ## (11/29) Week 12
189 |
190 | Topics:
191 |
192 | - _Lab Time: Work on Projects_
193 |
194 | ## (12/6) Week 13
195 |
196 | Topics:
197 |
198 | - Practice Demo Night Pitches and Demos
199 | - _Lab Time: Work on Projects_
200 |
201 | ## (12/14 - tentatively) DEMO NIGHT
202 |
203 | ### Demo Night
204 |
205 | - Location: TBD
206 | - Time: TBD
207 |
--------------------------------------------------------------------------------
/wednesday.md:
--------------------------------------------------------------------------------
1 |
2 | # Fall 2022 Web Dev Track _Class Schedule and Materials_
3 |
4 | Wednesday 6:30-9pm Section
5 |
6 | [Development Environment Setup Instructions](https://github.com/CUNYTechPrep/guides#development-environment-setup)
7 | ___
8 | ## (8/31) Week 1
9 |
10 | Lecture Slides
11 |
12 | [Week 1](https://docs.google.com/presentation/d/1x3ZgpUU78Szlv2MYEurGWT2MGifaogVynjpbzqjBofg/edit#slide=id.p)
13 |
14 | Topics:
15 | - Semester Overview
16 | - Designing Web Apps
17 | - Review: HTML & CSS
18 | - Lab Bootstrap 5.2
19 |
20 | Assignments:
21 | - [Bootstrap Lab](https://github.com/CUNYTechPrep/lab-bootstrap-5.2)
22 | + Solution:
23 | + [General Solution](https://cunytechprep.github.io/lab-bootstrap-5-solution/)
24 | + [Alternating Solution](https://cunytechprep.github.io/lab-bootstrap-5-solution/alternating.html)
25 | - **Project Ideation**: provide your idea in the [ideation document](https://docs.google.com/presentation/d/1E_I4xPxnGqlbCTZ0cBjCIN17-b2P7xjHbCG6_R1C4Js/edit#slide=id.gfe736c9b1a_0_136)
26 | - Meet your classmates and **form teams**
27 | + Read through your classmates ideas and contact them over slack
28 | + Formed teams due in Week 3 class
29 | ___
30 |
31 |
32 | ## (9/7) Week 2
33 |
34 | Lecture Slides:
35 |
36 | [Week 2](https://docs.google.com/presentation/d/1hEk66SvgwV1oshPLHaDd5tstXcctox7v3hot399Qwa8/edit#slide=id.g4785ebae2a_0_77)
37 |
38 | Topics:
39 | - React Intro
40 | - [React Intro code along](https://gist.github.com/medgardo/45d976f31c86bdc9928908bf46ca5393)
41 | ___
42 |
43 |
44 | ## (9/14) Week 3
45 |
46 | Topics:
47 |
48 | - [Client-Server Communication](https://docs.google.com/presentation/d/1hJgCCh3UiygFQ6q8_G7_KCn332rGuo6VPHlM49JM4Ao/edit#slide=id.p)
49 | + Parts of a URL
50 | + Understanding HTTP Request-Response
51 | - [`fetch(...)` and Promises](https://docs.google.com/presentation/d/1ctGUH2sYpqDjo268t_nL0A3u1t6tzAqwk-mw5WIxwnM/edit#slide=id.p)
52 | - More React
53 | + [Lab: React Toggle](https://github.com/CUNYTechPrep/lab-react-toggle)
54 | + [Lab: React Trivia](https://github.com/CUNYTechPrep/lab-react-trivia)
55 |
56 | Assignments:
57 | - [Submit Team Project Proposal](https://github.com/CUNYTechPrep/2022-fall-web-dev/blob/main/materials/team-project-proposal.md)
58 | ___
59 |
60 |
61 | ## (9/21) Week 4
62 |
63 | Topics:
64 | - More `fetch()` and React
65 |
66 | Class Example:
67 | ```
68 | function App() {
69 | const [data, setData] = useState([]);
70 | const [zipCode, setZipCode] = useState('');
71 |
72 | const fetchData = () => {
73 | fetch('https://ctp-zip-api.herokuapp.com/zip/' + zipCode , {
74 | 'mode' : 'cors',
75 | headers: {
76 | 'Content-Type' : 'application/json',
77 | }
78 | })
79 | .then((response) => response.json())
80 | .then((responseData) => setData(responseData))
81 | .catch((error) => console.log(error));
82 | }
83 |
84 | return (
85 |