lejonmanen

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore, collection, addDoc, getDocs, getDoc, doc, updateDoc, deleteDoc } from 'firebase/firestore/lite'

// Get this from Firebase Console
import { firebaseConfig } from "./firebaseConfig.js";

// Initialize Firebase and get database
const app = initializeApp(firebaseConfig);
const db = getFirestore(app)

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 { getQuestion } from './readline.js'

const [question, close] = getQuestion()

let input = await question('Please input a number')
console.log(`The number is: ${input}.`)

close()

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)