-
[61a] React Tutorial Part 1: Background (Joe Torreggiani)
-
Video 1/3: https://youtu.be/jNO-pPR7zkg
-
Slides: 1-24
-
[61b] React Tutorial Part 2: JavaScript, Node.js (Joe Torreggiani)
-
Video 2/3: https://youtu.be/JWt4Z4sAlxk
-
Slides 25-56
-
[61c] React Tutorial Part 3: React Fundamentals, Build Your First React Front-end Application
-
Video 3/3: https://youtu.be/MSAbOBHGkhw
-
Slides: 57-87
Join our Meetup group for more events! https://www.meetup.com/data-umbrella
- Transcript: https://github.com/data-umbrella/event-transcripts/blob/main/2022/61-joe-react.md
- Meetup Event: https://www.meetup.com/data-umbrella/events/287393407/
- Video: Playlist
- GitHub repo:
- Transcriber: ? [needs a transcriber]
- Slides: https://docs.google.com/presentation/d/1pVJKqTjakByhBcM8V02z8mCZ_-dWt8XEH5X9qVaB-mU/edit?usp=sharing
- Joe's front-end video: https://youtu.be/K4NQmrGEWGM
- StackOverflow survey on web frameworks: https://survey.stackoverflow.co/2022/#section-most-popular-technologies-web-frameworks-and-technologies
This talk will introduce attendees to React, a free and open source JavaScript-based library that encourages declarative component-based development of user interfaces (UI). We will start with covering the basic concepts of front-end web development with HTML, CSS, and JavaScript before learning how to leverage React to simplify creation of interactive web UIs. This talk will conclude with a recap of what we've learned together and recommendations for continuing to learn about front-end web development and React.
Joe Torreggiani is a technologist, educator, and advocate for environmental and social justice. Joe is a senior software engineer at Square. Joe is also a co-founder of Sustainable Progress and Equality Collective (SPEC), an open learning organization with a mission empower individuals to become globally-minded change agents by helping them learn the essential skills required to build sustainable careers and make a positive impact in their communities.
- LinkedIn: https://www.linkedin.com/in/joetorreggiani
- Twitter: https://twitter.com/JoeTorreggiani
- GitHub: https://github.com/jtorreggiani
00:00 Data Umbrella Introduction
05:40 Joe begins the Presentation
06:28 What is React.js?
07:25 Languages, Frameworks, and Libraries
12:38 Presentation Overview
12:58 React Open-Source Software Licensing
14:00 Fundamentals of Front-End Development
14:45 Key Concepts of Front-End Development
14:53 Client-Server Model
16:27 HyperText Transfer Protocol
16:53 HTML
17:25 CSS
17:57 JavaScript
19:33 Data Interchange Formats
20:03 HTML, CSS, & JavaScript
21:56 HTML with External Resources
00:15 Characteristics of JavaScript & Basic JavaScript Program
01:44 What makes JavaScript high-level?
03:32 What makes JavaScript dynamically-typed?
05:22 What makes JavaScript interpreted?
06:10 Object-oriented, imperative, and functional programming in JavaScript
07:41 Q&A: Are there efficiency or speed differences between dynamic & statically typed languages?
09:04 Q&A: Other than stylistic differences, is the performance of JavaScript/Python/Ruby the same? Is there one that's better than the others?
10:55 Q&A: Is the ${content} syntax only used for inputting values into a string?
11:44 JavaScript Runtime Environments: Browser & Node.js
13:45 Importing modules from standard library & importing custom modules
14:51 Node Package Manager (npm) & Node.js version manager (nvm)
15:56 Using npm to install JavaScript packages & import JavaScript libraries
16:39 Using nvm to install Node versions
17:28 Why are web development frameworks needed?
18:30 Client-side and server-side web development frameworks
20:13 Single-page applications
21:15 React Fundamentals
22:48 Injecting React Component into HTML
23:56 React Component Properties
24:55 Component Composition
25:52 Rendering lists
27:09 Handling input events and application state
29:16 Managing React component "lifecycle"
30:59 Q&A: Can you elaborate on the benefits of SPA (single-page applications)? Why doesn't the page reload? Is it better for SEO (search engine optimization)?
33:30 Q&A: Is it the case that all React is embedded inside a function call? Can it be inside a class as well?
35:02 Q&A: What is the best way to learn React if we know HTML, CSS, and JavaScript?
35:33 Q&A: When do you recommend moving to React? After you create something with JavaScript, or when you have a good understanding of it?
36:24 Q&A: What is the simplest way to explain async and await functionality? / What is the role of asynchronous JavaScript here with the "async" keyword?
37:36 Q&A: How does React handle errors?
00:00 Building your first React project
00:36 Scaffolding a React project with Create React App
03:26 Live coding begins
04:56 Tailwind CSS
05:48 Setting up multiple pages using React Router
07:50 Adding navigation
09:20 Creating a fake server using JSON Web Server
10:44 Fetching server data with useState and asynchronous functions
13:15 Rendering data
14:23 Posting data to the server
17:33 Summary and error handling
20:00 Recap and next steps
22:08 Q&A: Does a hard load refer to a root change?
24:45 Q&A: Are there other ways or best practices to test a React app?
25:18 Q&A: Is Redux phasing out?
25:49 Q&A: Does React adhere to object-oriented principles?
26:20 Q&A: Does a beginner need to learn Redux?
#react #webdevelopment #javascript