The Best React, Js, Ts Flash Cards

Front 1

HOC =

They make your code

example - React Router

Back 1

High Order Components

more clean, efficient, modular

with router - get history, match, location

Front 2

“render prop”

render function getting replaced by___.

Back 2

refers to a technique for sharing code between React components using a prop whose value is a function.

createRoot

Front 3

custom hooks good to inlcude 2 things

Back 3

value and function to update the value

Front 4

simple counter component bare bones syntax

9 pieces

Hints

1) 3 pairs

2) 2 consts

3) Button

Back 4

1const Statey1 = () => { [pair]

2const [art, setArt] = useState(1);

3return ( [pair]

4

[pair]

5

7

7);

8};

9 export default Statey1;

Front 5

Axios example Part 1 -

1function body

2 next part

3 1 method

Back 5

Const fetchRandomData = () => {

return axios

.get("www.randomdata.com/api")

Front 6

Part 2

2 methods

Back 6

.then (({data}) => {console.log(data);

return JSON.stringify(data, 2, null) ;});

Front 7

part 3

4 lines

1- method

2 function

3 syntax

4 syntax

Back 7

.catch((err) => {

console.log("wee focked")

})

;};

Front 8

Disable button

1 import

2 function syntax

3 hook

Back 8

import { useState } from 'react';

function MyComponent() {

const [inputValue, setInputValue] = useState('');

Front 9

handle 2 parts

Back 9

function handleInputChange(e) {

setInputValue(e.target.value); }

Front 10

UI code

4 parts

Back 10

return (

<>

onChange={handleInputChange

Front 11

button that changes

event

button that disables

Back 11

input value={inputValue} onChange={(e) =>

setInputValue(e.target.value)} />

button disabled={isButtonDisabled}

Front 12

2 way data binding

5 lines of code

1 element

2

3 event

4 event

5 ui

Back 12

[value, setValue] = React.useState("");

value={value} onChange={(e) => setValue(e.target.value)}

{value}

Front 13

value is a

input is a

Back 13

attribute

form element

Front 14

make an input controlled by passing one of these props

2 types of props for 3 things

Back 14

checked: A boolean. For a checkbox input or a radio button, controls whether it is selected.

value: A string. For a text input, controls its text. (For a radio button, specifies its form data.)

checkbox, radio button, or text input

Front 15

Child to update

6 lines

1 arg

2 frag

3element

4 updating logic cont

5 end grad

6 end component

Back 15

const Child = ({ setValue }) => (

<>

button onClick={() => setValue("Parent has been updated!")}>Change Parent Value

< / >

);

Front 16

Child Code in the Parent Component

Back 16

Child setValue={setValue} />

Front 17

Mapping out prisma data

3 lines

1map + ____

line 2 the data syntax

3 - closing syntax

Back 17

{state.searchResults.map((result) => ( {result.date} {result.time}

))}

Front 18

line 2 from data involves 2 things

Back 18

- destructuring

- an api call object called result

Front 19

Returning a Clean Result 5 main things

Back 19

const cleanResult = results.map((artist) => ({ ...artist, id: "abc" })); return { props: { results: JSON.parse(JSON.stringify(cleanResult)) } };