html page, text editor and browser • But usually you will want to use some building tool • Create React App (CRA) – Depricated • Vite • Next.js • .. and others 10
App (CRA) Bundler Vite (uses esbuild + Rollup) Webpack Dev Server Performance Extremely fast due to native ESM + esbuild Slower, especially with large projects Build Speed Very fast (optimized Rollup output) Slower (Webpack-based builds) Configuration Minimal by default, flexible via vite.config.js Limited flexibility without eject TypeScript Support Built-in, no extra setup needed Built-in JSX/TSX Support Built-in via esbuild Built-in Plugins Ecosystem Rich ecosystem, growing fast Mature, but less modern plugin architecture Legacy Browser Support Optional via plugin Supported by default Out-of-the-box Testing Not included, but works well with Vitest Comes with Jest setup Opinionated Setup Lightweight and minimal More opinionated (more boilerplate) Eject Option Not needed (config is always accessible) eject to modify config Community & Docs Growing, excellent documentation Mature, but CRA is declining in popularity SSR Support Supported via Vite SSR Not supported Status / Future Actively developed Deprecated for new projects, React team suggests alternatives
React React React Vanilla JS, React, Vue, etc. Server-Side Rendering Built-in Built-in Via plugins Not built-in Via plugins or SvelteKit Static Site Generation Built-in Built-in Built-in Manual (e.g., prerender) Via plugins or SvelteKit Client-Side Rendering Built-in Built-in Built-in Built-in Built-in Data Fetching getServerSideProps, getStaticProps load function in routes GraphQL, source plugins Fetch, Axios, etc. Fetch, Axios, etc. Routing File-system based File-system based File-system & GraphQL React Router, etc. File-system or manual API Support API routes in /api Route layouts & loaders Serverless Functions Manual setup Manual setup Styling Any CSS-in-JS or CSS/SASS Any CSS-in-JS or CSS/SASS Any CSS-in-JS or CSS/SASS Any CSS-in-JS or CSS/SASS Any CSS-in-JS or CSS/SASS Plugin Ecosystem Next.js plugins Mostly native React Rich Gatsby Plugin Ecosystem Limited to npm packages Vite plugins Community & Adoption Large Growing Large Very Large Growing Performance Optimization Automatic via Vercel Optimized out-of- the-box Optimized, especially for images Manual Fast (uses native ESM) Learning Curve Moderate Moderate to High Moderate Easy Moderate Use Case Universal (SSR, SSG, CSR) Universal (SSR, SSG, CSR) focus on fast navigation SSG: Mostly static site generation, good for blogs, docs CSR CSR, optimized for speed
and CSR • Optionally: Server creates pre-rendered HTML and serves it to client • Client will have JS which will do interactivity • HTML generated on the server for each request. • Initial load faster; content immediately available. • SEO-friendly. • Requires server resources for rendering. 14
=> { axios.get('/api/data') .then(response => { setData(response.data); }); }, []); return ( <div> {data ? <h1>{data.message}</h1> : <p>Loading...</p>} </div> ); } 15 1. The page initially loads with a "Loading..." message. 2. An API request is made to /api/data. 3. Once data is received, it replaces "Loading..." with the actual data.
await fetch('https:!//example.com/data.json'); const content = await res.json(); const props = { props: { data: content } } return props; } export default function Home({ data }) { return ( <div> <h1>Data List!</h1> <ul> {data.map((item, index) !=> ( <li key={index}>{item.name}!</li> ))} !</ul> !</div> ); } getServerSideProps i s a special Next.js function used to fetch data on the server side for each request to the page. App Router is disabled It runs on the server at request time and passes the fetched data as props to the React component. this is passed as a props to the component
{ const res = await fetch('https:!//example.com/data.json'); const data = await res.json(); return ( <div> <h1>Data List!</h1> <ul> {data.map((item, index) !=> ( <li key={index}>{item.name}!</li> ))} !</ul> !</div> ); } When component is async and it becomes ssr component Does not use browser- specific logic like useState, useE=ect
• Every time a user requests the page, getServerSideProps runs on the server. • This ensures the page always displays the latest data. • SEO Benefits • The page is pre-rendered with the fetched data on the server. • Search engines can index the fully rendered HTML, improving SEO. • Secure Fetching • API calls or sensitive logic (like using API keys) are handled securely on the server.
control over the application's infrastructure compared to CSR, which offloads rendering entirely to client devices. • CSR: The carbon footprint depends mainly entirely on the user's browser and device.
increase the carbon footprint if the server is centralized and far from the user. Using edge servers mitigates this. • High-Load Applications: SSR's carbon footprint increases with traffic, making caching and scaling critical for reducing environmental impact. • Device Impact in CSR: CSR shifts the rendering workload to client devices, which may be inefficient for lower-end or battery-powered devices, leading to higher energy consumption per user.
the carbon footprint in scenarios where: • The application serves static or semi-dynamic content. • Users rely on low-powered devices or poor internet connections. • Fast, efficient data delivery is critical. • CSR may be more efficient in scenarios where: • The application involves complex interactivity or frequent data updates. • The user base primarily uses high-performance devices. • Client-side caching can significantly reduce repeated server requests. • For sustainability, a hybrid approach (e.g., Static Site Generation or Server-Side Rendering with Hydration) often provides the best balance, leveraging the strengths of both SSR and CSR.
EcmaScript that browsers understand • Also Babel understands JSX which is heavily used in React • JSX is an extension to JavaScript • Easiest way to get babel is just to add • <script src="https://unpkg.com/babel- standalone@6/babel.min.js"></script> 24
methods explicitly defined. • Requires this keyword for state and props. • Use if you need lifecycle methods like componentDidMount. • Functional Components • Functional Components • Modern, less verbose. • Hooks provide lifecycle and state features. • Easier to test and maintain. • Recommended for new projects. 29
a component • A component let's you split the UI into reusable pieces. The component can be • Function component • Class component • To declare a function component • Function is written with capital letter • Returns react element • Usually accepts object argument 35
} ReactDOM.render( <Link link="http://www.tuni.fi" text="tuni"/>, document.getElementById('root') ); properties = {"link": "http://www.tuni.fi", "text": "uta"} properties are read only, do not try to modify them 36
is created from Clock constructor(props) { super(props); console.log("constructor") } // When Clock is rendered to the DOM componentDidMount() { console.log("componentDidMount") } // When Clock is removed from the DOM componentWillUnmount() { console.log("componentWillUnmount") } render() { console.log("render") let time = new Date().toLocaleTimeString() return (<div>{time}</div>); } } ReactDOM.render( <Clock />, document.getElementById('root') ); 44
componentDidMount() { // invoke this.tick for every 1 sec this.timer = setInterval(this.tick, 1000); } tick() { this.time = new Date().toLocaleTimeString() } componentWillUnmount() { clearInterval(this.timer); } render() { console.log("render") return (<div>{this.time}</div>); } } ReactDOM.render( <Clock />, document.getElementById('root') ); 1) will call tick() 2) tick will initalize time 3) Clock is rendered with time 4) Will set interval and invoke tick() for every 1 sec 5) Called for every 1 sec NOT working! Clock is not updating! 45
sec this.timer = setInterval(this.tick, 1000); } tick() { console.log(this); this.time = new Date().toLocaleTimeString() } this is window! It's not the clock object! So in here we are creating a global variable... 47
1 sec this.timer = setInterval(() => { this.tick() }, 1000); } If using arrow function, it does automatically the closure for "this". Arrow function contains "lexical this" feature! 49
1 sec this.timer = setInterval(this.tick.bind(this), 1000); } The bind will create copy of the original function and replaces the "this" in the function with the given object, which in this case is the component object ("this") 50
this.tick.bind(this) this.tick(); } componentDidMount() { // invoke this.tick for every 1 sec this.timer = setInterval(this.tick, 1000); } tick() { this.time = new Date().toLocaleTimeString() } componentWillUnmount() { clearInterval(this.timer); } render() { console.log("render") return (<div>{this.time}</div>); } } ReactDOM.render( <Clock />, document.getElementById('root') ); Replaces the tick function with a function that does not containg this keyword, instead this keyword is replaced with Clock object 51
() => { this.time = new Date().toLocaleTimeString() } this.tick(); } componentDidMount() { // invoke this.tick for every 1 sec this.timer = setInterval(this.tick, 1000); } tick() { this.time = new Date().toLocaleTimeString() } componentWillUnmount() { clearInterval(this.timer); } render() { console.log("render") return (<div>{this.time}</div>); } } ReactDOM.render( <Clock />, document.getElementById('root') ); If we move the function from Clock.prototype to Clock object itself which uses arrow syntax (lexical this), it will work also. 52 You can replace this syntax with class fields!
(you can do this only in constructor) • this.state.time = "something" • Instead of use the setState • this.setState({time: "something"}) • Setting the state may be asynchronous • State updates are merged • State should be capsulated into the component • By using props, state can be given to child component 59
= {time: new Date().toLocaleTimeString(), place: "Helsinki"} this.state = stateObject } componentDidMount() { this.timer = setInterval(this.tick, 1000); } tick = () => { let stateObject = {time: new Date().toLocaleTimeString()} this.setState(stateObject) } componentWillUnmount() { clearInterval(this.timer); } render() { return (<div>{this.state.time} {this.state.place}</div>); } } When setting new state with "time" the "place" is still intact! This is merging 60
Date().toLocaleTimeString(), place: "Helsinki" } componentDidMount() { this.timer = setInterval(this.tick.bind(this), 1000); } tick = () => { let stateObject = { time: new Date().toLocaleTimeString() }; this.setState(stateObject); } componentWillUnmount() { clearInterval(this.timer); } render() { return ( <div> {this.state.time} {this.state.place} </div> ); } } You can also use ESNext with class fields for state and omit the constructor 61
API for AJAX • You can easily combine Fetch and React • Fetch API is asynchronous and uses Promises: fetch(url).then((response) => { return response.json() } ) .then((jsonObject) => { console.log(jsonObject) }); 62
console.log('click') } render() { return (<button onClick={this.buttonClicked}>Click</button>); } } Calling the buttonClicked Notice camelCase! event (SyntheticEvent) brings you information about the event 65
console.log('click') } render() { return (<a onClick={this.linkClicked} href="">Link</a>); } } Preventing the default behaviour link usually opens another page 66
constructor(props) { super(props) } linkClicked(event) { event.preventDefault(); console.log(this) } render() { return (<a onClick={this.linkClicked.bind(this)} href="">Link</a>); } } Now this refers to Link object in the linkClicked - method 69
{name: ''} componentDidMount() { console.log('mount') } componentDidUpdate(prevProps, prevStat) { console.log('update') } render() { return <p>{this.state.name}</p> } } 90 This is called now several times! Only one time
arr = React.useState("initial text"); const text = arr[0]; const setText = arr[1]; return ( <div> <p>{text}</p> <button onClick={() => setText("hello")}>Click me</button> </div> ); } 96 Will return a array containing initial state value and a function for updating state When calling the function the state changes and rerender happens
= () => { setCounter(1); // 0 + 1 setCounter(1); // 0 + 1 }; return ( <> <h1>Counter</h1> <p>{counter}</p> <button onClick={add}>+</button> </> ); } 103 Because we have twice the same update, react will do batching and only one update happens..
{ const [counter, setCounter] = useState(0); return ( <div> <p>{counter}</p> <button onClick={() => { setCounter((prevCount) => prevCount + 1); setCounter((prevCount) => prevCount + 1); }} > + </button> </div> ); } 107 Second call: returns 1 + 1 => 2 We do not know when prev => prev + 1 is called React queues these. React processes these and calls functions in order. React internally tracks the current state value during this batch.
Even though you called setCounter three times, React will only perform one actual state update, because all three result in the same value (0), and React will batch and coalesce them. React checks: “Is the new state different from the previous?” If nextState === currentState, then no update is applied, and no re-render occurs.
the same cycle • setCount(prev !=> prev + 1); setCount(prev !=> prev + 1); • Inside async callbacks, timeouts, promises, or effects • setTimeout(() !=> {setCount(prev !=> prev + 1); }, 1000) • If you're doing a single update, in a simple event handler, there's no risk using setCount(count + 1), altough the functional form guards you from subtle bugs in those edge cases. 111
componentDidMount, componentWillUnmount • By using Effect Hooks you can implement the functionality of these • You can do also more stuff with it using "dependencies" • Effect will react when some state value changes 112
update() { setTime(new Date().toString()) } React.useEffect(() => { let interval = setInterval(update, 1000) return () => clearInterval(interval) }) return <p>{time}</p> } 113 useEffect is similar to didMount AND didUpdate, happens after render If this function returns a function it is called when Clock is cleared from dom this will change state, useEffect called again...
update() { setTime(new Date().toString()) } React.useEffect(() => { let interval = setInterval(update, 1000) return () => clearInterval(interval) }, []) return <p>{time}</p> } 114 "dependencies", call effect function if depency value change. By giving empty array, it will be called only once
''}) // Similar to componentDidMount AND componentDidUpdate React.useEffect(() => { axios.get(`https://swapi.dev/api/people/${props.id}/`).then(hr => { setCharacter(hr.data) }) }) console.log('render: ' + new Date().toString()) return <p>{character.name}</p> } 127 Changing the state will trigger useEffect again! Eternal loop!
React.useState({name: ''}) // Similar to componentDidMount AND componentDidUpdate React.useEffect(() => { axios.get(`https://swapi.dev/api/people/${props.id}/`).then(hr => { setCharacter(hr.data) }) }, [props.id]) console.log('render: ' + new Date().toString()) return <p>{character.name}</p> } 128 Every time a props.id is changed trigger the effect
let names = ['jack', 'tina', 'paul', 'susanne'] let index = Math.floor(Math.random() * names.length) let randomName = names[index] console.log(randomName) } render() { return <button onClick={this.generate}>Generate Random Name</button> } } class DisplayRandomName extends React.Component { render() { return <p>Display Random Name</p> } } class Parent extends React.Component { render() { return <div><RandomGenerator/><DisplayRandomName/></div> } } 138 Generates random name This component wants to display the random name
let names = ['jack', 'tina', 'paul', 'susanne'] let index = Math.floor(Math.random() * names.length) let randomName = names[index] console.log(randomName) } render() { return <button onClick={this.generate}>Generate Random Name</button> } } class DisplayRandomName extends React.Component { render() { return <p>Display Random Name</p> } } class Parent extends React.Component { render() { return <div><RandomGenerator/><DisplayRandomName/></div> } } 139 When button clicked random name is in console. How to pass this to DisplayRandomName component?
let names = ['jack', 'tina', 'paul', 'susanne'] let index = Math.floor(Math.random() * names.length) let randomName = names[index] this.props.buttonClicked(randomName) } render() { return <button onClick={this.generate}>Generate Random Name</button> } } class DisplayRandomName extends React.Component { render() { return <p>Display Random Name</p> } } class Parent extends React.Component { clicked = (name) => { console.log(name) } render() { return <div><RandomGenerator buttonClicked={this.clicked}/><DisplayRandomName/></div> } } 140 .. And the function is passed here We have a function in the props now…
React app with no configuration. • Zero Config: Automatically handles bundling, linting, and other tasks. • Ejectable: Can "eject" to customize build scripts, but this is a one-way operation. • Regular Updates: Maintained by Facebook, ensuring compatibility with newer React features. • Disadvantages: • SPA Focused: Not optimized for server-side rendering or static site generation. • Limited Flexibility: Requires ejecting for advanced customizations, which can make the setup complex. • Larger Bundles: Without manual optimization, bundles might be larger compared to other tools. 154
generation, and client-side rendering. • File-based Routing: Automatic route creation based on the pages directory. • Built-in API Routes: Simplifies backend API creation with Node.js. • Performance Optimizations: Automatic code-splitting and image optimization. • Developer Experience: Features like fast refresh enhance the development process. • Disadvantages: • Learning Curve: Requires understanding Next.js-specific life-cycle methods and features. • Configuration: While it's zero-config by default, custom setups (like with custom servers) can become complex. • Larger Node.js Server Footprint: If using server-side rendering features, deployment might need resources for a Node.js server. 155
Webpack and Babel • Webpack will help you with ECMAScript modules • Babel helps you to compile ES6 (and JSX) to older JS so it works on different browsers • To combine react, webpack and babel, use create-react-app • npx create-react-app my-app • cd my-app • npm start • And in the end (to compile for production) • npm run build 156
JavaScript to run this app. </noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> 157
• There is no official routing package made by FB • React Router (v4) is one of the most used ones. • For browser install • npm install react-router-dom 161
pohjus
tarappo
kaomi_wombat
tsukuboshi
ftakahashi
shinnosuke_kishida
asei
troter
shirakaba
sansantech
murachiakira
blue_goheimochi
sakitakamachi
erikaheidi
eileencodes
wjessup
samlambert
lara
chrisshort
kneath
addyosmani
panda_program
destraynor
michaelherold
akosma
![CRA function App() { const [data, setData] = useState(null); useEffect(()](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_14.jpg){kind=link}
![function App() { let [counter, setCounter] = useState(0); const add](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_99.jpg){kind=link}
![function App() { let [counter, setCounter] = useState(0); const add](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_100.jpg){kind=link}
![function App() { let [counter, setCounter] = useState(0); const add](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_101.jpg){kind=link}
![function App() { let [counter, setCounter] = useState(0); const add](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_102.jpg){kind=link}
![function App() { let [counter, setCounter] = useState(0); const add](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_103.jpg){kind=link}
![const App = () => { const [people, setPeople] =](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_108.jpg){kind=link}
![function App() { let [amount, setAmount] = useState(1); let [jokes,](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_109.jpg){kind=link}
![function Clock() { const [time, setTime] = React.useState(new Date().toString()) function](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_112.jpg){kind=link}
![function Clock() { const [time, setTime] = React.useState(new Date().toString()) function](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_113.jpg){kind=link}
![function Clock() { const [time, setTime] = React.useState(new Date().toString()) function](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_116.jpg){kind=link}
![Using Axios function Character(props) { let [character, setCharacter] = React.useState({name:](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_126.jpg){kind=link}
![Preventing eternal loop function Character(props) { let [character, setCharacter] =](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_127.jpg){kind=link}
![const App = () => { let [color, setColor] =](https://files.speakerdeck.com/presentations/a1122c71d5c7499391516f89e11b9698/slide_148.jpg){kind=link}
