Intro to React
CSCI 338: Software Engineering
Fall 2024
1
Announcements
2
Outline
3
Outline
4
What problems does React solve (Pros)?
Why would you want to use a client-side framework?
5
Could it also make things harder (Cons)?
Why would you not want to use a client-side framework?
6
A Few Notes on using JavaScript with React
A note on a few programming ideas / JavaScript
7
1. Functional Programming v. OOP
8
2. ES6 Modules
9
3. Closures
A closure gives you access to an outer function's scope from an inner function (see example). Used to encapsulate variable scope
10
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. Destructuring: Objects
Object destructuring is just a shortcut for extracting object properties and assigning them to variables. 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
11
4. Destructuring: Arrays
Array destructuring is also a shortcut – for extracting array values and assigning them to variables. Example:
const numbers = [10, 48, 33];
// Destructuring with curly braces
const [ num1, num2, num3 ] = numbers;
console.log(num1); // Output: 10
console.log(num2); // Output: 48
console.log(num3); // Output: 33
12
Overview of React
13
Overview of React
14
Please pull the latest updates from class-exercises-fall2024 to your local computer
15
Discuss the Setup Process
Complete Steps 1-5, and then we will discuss.
16
Overview of React
17
JSX
18
JSX Syntax
19
<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>
20
Overview of React
21
React Components
22
Component Rules
23
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" />
}
24
Overview of React
25
Handling Events
26
Overview of React
27
State and Lifecycle
28
Update State using the built-in useState() function
import { useState } from 'react';
function Carousel() {
const [index, setIndex] = useState(0); // pass in initial value
}
29
“State” Takeaways
30
“Lifting Up” State
31
Overview of React
32
Summary of Key Ideas in React
33
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 |
|