This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"Ersätt den här texten med domain och clientId från appens inställningar i Auth0" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Pie, Bar, Line } from 'react-chartjs-2'; | |
import { data1, data2 } from './demoData' | |
const DemoChart = () => ( | |
<div className="demo-chart"> | |
<Bar data={data1} /> | |
<Bar data={data2} /> | |
</div> | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Import packages, route middleware, and initialize app | |
import express, { Express, Request, Response } from 'express' | |
const app = express() | |
const port: number = 1337 | |
const pathToDist: string = 'dist' | |
// ---------------------------------------------------- | |
// Install any middleware before adding routes | |
// Important middleware: cors, static folders |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public void Print() | |
{ | |
Queue<Node<T>?> nodes = new Queue<Node<T>?>(); | |
Queue<Node<T>?> newNodes = new Queue<Node<T>?>(); | |
nodes.Enqueue(Root); | |
int depth = 0; | |
bool exitCondition = false; | |
while (nodes.Count > 0 && !exitCondition) | |
{ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
using System; | |
using System.Collections.Generic; | |
using System.Linq; | |
using System.Text; | |
using System.Threading.Tasks; | |
namespace Datalogi_1 | |
{ | |
public class Sort | |
{ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import produce from 'immer' | |
import { useState } from 'react' | |
// Move the interface to a separate file, User.ts | |
interface User { | |
id: number; | |
name: string; | |
} | |
// Many times, a variable may not have received its value yet. Use the TypeScript union operator to make that clear. A common use case is when fetching data from an API. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// src/components/Counter.jsx | |
import { useDispatch, useSelector } from 'react-redux' | |
import { actions } from '../features/counter' | |
const Counter = () => { | |
// dispatch används för att skicka actions till store, så att reducers kan producera nästa state | |
const dispatch = useDispatch() | |
// useSelector väljer ut en del av state från Redux store. "counter" är namnet på din reducer i rootReducer-filen. | |
const count = useSelector(state => state.counter) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createContext, useState, useContext } from 'react' | |
// Create the context in a separate file. Import it to every component that needs it. | |
const CounterContext = createContext(0) | |
const ContextDemo = () => { | |
const [count, setCount] = useState(2) | |
const contextValue = { count, setCount } |