lejonmanen

/*
The Budget component uses "conditional rendering" to do
different things based on its props. What will each line
in the App component render?
*/

const App = () => (
	<main>
		<Budget value={5500} />
		<Budget value={240} />

lejonmanen

// A component is a function that returns JSX
const Aaa = () => (
	<div>
		You can do any JSX in here
	</div>
)

// Remember to export the component
// Most people have one component per file and use export default
export default Aaa

lejonmanen

// Simple request
async function sendRequest(url) {
    try {
        const response = await fetch(url)
        if( response.status !== 200 ) {
            console.log('Request wasn't successful. Code: ' + response.status)
            return null
        }
        const data = await response.json()
        return data  // success

lejonmanen

// Option 1: use a promise directly
let data;

function itTakesTime1() {
    return new Promise((resolve, reject) => {
        /* do something that takes time and produces a value */
        resolve(value)
    })
}

lejonmanen

import readline from 'node:readline'

async function ask(query) {
	const rl = readline.createInterface({ input: process.stdin, output: process.stdout, tabSize: 4 });

	return new Promise((resolve) => rl.question(query, (answer) => {
		rl.close();
		resolve(answer);
	}));
}

lejonmanen

import { useState, useEffect } from 'react'

// This function can be in a separate file
async function getData(setData) {
    const url = 'API url here'
    const response = await fetch(url)
    const data = await response.json()
    setData(data)
}

lejonmanen

// https://www.gutenberg.org/files/100/100-0.txt
// The Project Gutenberg eBook of The Complete Works of William Shakespeare, by William Shakespeare
// (But this file only has the first 12)

const verses = `                    1


From fairest creatures we desire increase,
That thereby beauty’s rose might never die,
But as the riper should by time decease,

lejonmanen

import { atom } from 'recoil'

// The key can be any unique value
// Default is the initial value
const countState = atom({
	key: 'countState',
	default: ''
});

export { countState }

lejonmanen

import { useState } from 'react'
import { CounterContext } from './CounterContext.js'

/* The ancestor is the component that owns this particular piece of data. The ancestor is the only component that knows how to modify it. Therefore, if the descendants should be able to modify the value, we must send the set function as well.

If the descendants only need to read the value, we replace the object "countPackage" with the value "count". 
*/
const Ancestor = () => {
	// Initialize using default data
	const [count, setCount] = useState(10)

lejonmanen

import { useState } from 'react'

/*
"Lifting state up" is useful when several components need to share state.
In this example, both Parent and Child needs to display the value of
"clicks". Child needs to update the value as well. We are lifting the
state up, out of the child component, into its parent.

1. Move the shared state to the common component - the component that
contains all of the components that needs to share state. Here, Parent is