Intro to React
CSCI 344: Advanced Web Technologies
Spring 2025
1
Announcements
2
Outline
3
Outline
4
Reflection so far…
5
Your thoughts here…
6
What problems does React solve (Pros)?
Why would you want to use a client-side framework?
7
Could it also make things harder (Cons)?
Why would you not want to use a client-side framework?
8
Review of JavaScript So Far
Over the past two weeks, we’ve discussed some new JavaScript ideas:
9
These ideas are important, so make sure you review and understand them!
New JavaScript Concepts
In addition to the concepts we’ve discussed, there are a few other programming / JavaScript ideas that React leverages that are important to understand. Namely:
10
1. Functional Programming v. OOP
11
2. ES6 Modules
12
3. Closures
A closure gives you access to an outer function's scope from an inner function (see example). Used to encapsulate variable scope
13
function init() {
let name = "Walter"; // name is a local variable created by init
// inner function, that forms the closure
function displayName() {
console.log(name); // use variable declared in the parent function
}
displayName();
}
init(); // prints Walter
console.log(name); // throws an error
4. Object Destructuring
Object destructuring is just a shortcut for extracting object properties and assigning them to variables. Take a look at this example:
const person = {
name: 'Alice',
age: 25,
city: 'Wonderland'
};
// Destructuring with curly braces
const { name, age } = person;
console.log(name); // Output: 'Alice'
console.log(age); // Output: 25
14
Overview of React
15
Overview of React
16
Most Important: Do the readings
Please complete the readings. It will take you a few hours, but you won’t be able to make progress with React without understanding some of the core React conventions and workflow, including:
17
Overview of React
18
Let’s start with a concrete example
Follow along with this activity!
You will complete steps 1-4 (for now).
19
Discuss the Setup Process
20
Overview of React
21
JSX
22
JSX Syntax
Some syntax things...
23
<img className="thumbnail" src={post.image_url} />
JSX Example
<div className="post">
<h2>{post.user.username}</h2>
<img className="pic" src={post.image_url} />
<p>{post.last_updated}</p>
</div>
24
Useful Tool: HTML to JSX Converter
25
Overview of React
26
React Components
27
Component Rules
28
export function Welcome({name}) {�
// all components return JSX (a UI widget)
return <h1>Hello, {name}</h1>;
}
Using Components
Once you create a component function / class, you can use it like regular HTML syntax (so long as you import the component). Pretend you’re looking at the App.jsx file below:
// first import your component:
import Welcome from './Welcome';
export default function App(props) {
� // You can use your component like a regular tag:
return <Welcome name="Sarah" />
}
29
Overview of React
30
Handling Events
Let’s just look at the documentation and talk about it...
<button role="switch"
className="like"
aria-checked="false"
onClick={toggleLike}>
Like
</button>
31
Overview of React
32
State and Lifecycle
33
Update State using the built-in useState() function
import { useState } from 'react';
function Carousel() {
const [index, setIndex] = useState(0); // pass in initial value
}
34
“State” Takeaways
35
“Lifting Up” State
For example, if your “add new comment” functionality would like to notify a parent component to requery and redraw the post, then the requeryPost() functionality needs to be defined in the parent and then passed down to the the child component (as a property).
36
Overview of React
37
But how do you request Server data using React?
Recall:
38
Effects and the useEffect() hook
Effects are an escape hatch from the React paradigm. They let you “step outside” of React and synchronize your components with some external system like a non-React widget, network, or the browser DOM.
Examples:
39
How to write an Effect
To write an Effect, follow these three steps:
40
1. Declare an Effect
import { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
// Code here will run after *every* render
});
return <div />;
}
CAVEAT: Because the useEffect function is run after every render, it can easily produce an infinite loop. To avoid, see next slide.
41
2. Specify the Effect dependencies
Use dependencies to control when the useEffect function is invoked:
To only run it once (on initialization), pass in an empty array:
useEffect(() => {
// ...
}, []);
To run it when one or more properties change, pass in the relevant properties:
useEffect(() => {
// ...
}, [prop1, prop2]);
42
Relevant Readings
43
Summary of Key Ideas in React
44
Components | Components are encapsulated units of logic that help you organize your code.
|
JSX | JSX is React’s version of HTML (see previous slides for syntax rules) |
Props | Props (properties) are read-only data fields that are passed into a component from its parent. |
State |
|
Effects |
|
Preview of Tutorial 8 & Homework 4
45
Preview of Tutorial 8 & Homework 4
Phase 1
Phase 2
46
What are the
components?
47
What are the
components?
48