Intro to React
CSCI 344: Advanced Web Technologies
Spring 2023
Announcements
Reflection so far…
Your thoughts here…
What problems does React solve (Pros)?
Why would you want to use a client-side framework?
Could it also make things harder (Cons)?
Why would you not want to use a client-side framework?
Overview of React
Overview of React
Most Important: Do the readings
Before Friday’s tutorial – please complete the following 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:
�These are not optional – and they will help you
Overview of React
JSX
JSX Syntax
Some syntax things...
<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>
Overview of React
React Components
Components: 2 syntaxes
Components accept a single “props” (which stands for properties) object argument and return a react element. Two syntaxes are functionally the same:
We will be using functional components in this class. Currently there’s a move away from class components.
export function Welcome({name}) {
return <h1>Hello, {name}</h1>;
}
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.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).
// Use the component in another file
import Welcome from './Welcome';
function Welcome(props) {
return <Welcome name="Sarah" />
}
Aside: Functional Programming v. OOP
Aside: Functional Components Using JavaScript Closures
function init() {
var name = "Mozilla"; // name is a local variable created by init
function displayName() {
// displayName() is the inner function, that forms the closure
console.log(name); // use variable declared in the parent function
}
displayName();
}
init();
Aside: JavaScript Modules (ES Modules)
Overview of React
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>
Overview of React
State and Lifecycle
Update State using the built-in useState() function
import { useState } from 'react';
function Carousel() {
const [index, setIndex] = useState(0); // pass in initial value
}
“State” Takeaways
“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).
Overview of React
React Set Up: Install Node
You need to install node.js, which will also install npm – the node package manager (analogous to pip)
Let’s practice some of these concepts �by building an image carousel…
Wednesday (3/15)
Wednesday Outline
Wednesday Outline
Aside: Ways of accessing elements in JavaScript Arrays
// convenient way to set variables from a list:
const myArray = [123, 456, 789, 123456, 66, -11]
console.log(myArray[0]);
console.log(myArray[1]);
// alternative syntax:
const [a, b] = myArray;
console.log(a);
console.log(b);
Aside: Ways of accessing elements in JavaScript Objects
// convenient way to set variables from an object:
const myObj = {a: 123, b: 456, c: 789, d: "hi there" };
console.log(myObj.a);
console.log(myObj.d);
// alternative syntax
const {a, d} = myObj; // only select the ones you want
console.log(a);
console.log(d);
Wednesday Outline
Lecture 16 Activity
We’re going to pick up where we left off on the Carousel activity. If you weren’t here on Monday, please…
Still TODO:
Wednesday Outline
But how do you request Server data using React?
Recall:
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:
How to write an Effect
To write an Effect, follow these three steps:
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.
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]);
Relevant Readings
Summary of Key Ideas in React
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 |
|
Wednesday Outline
Carousel + External Data Activity
Preview of Tutorial 8 & Homework 6
Preview of Tutorial 8 & Homework 6
Phase 1
Phase 2
What are the
components?
What are the
components?