React

import React from "react"

  

import ReactDOM from "react-dom"

import App from "./App"

ReactDOM.render(, document.getElementById("root"))

import React from "react"

export default function App() {}

(props)

For external data

(State)

For internal data

Refers to values that are managed by the component

Props are immutable(Unchanging). State is mutable.

  

Array spread operator

Spread syntax

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals

item={item} wird {…item}

  

Map

Data handling with js map

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map

____________________________________________________________

const names = ["alice", "bob", "charlie", "danielle"]

const capitalized = names.map((name) => {

return name[0].toUpperCase() + name.slice(1)

})

____________________________________________________________

import jokesData from "./jokesData"

const jokeElements = jokesData.map(joke => {

return

})

____________________________________________________________

For new dynamic numbers

const thingsArray = ["Thing 1", "Thing 2"]

const newThingText = `Thing ${thingsArray.length + 1}`

return `Good ${timeOfDay}, ${name}!`

  

Array destructuring

const [isImportant, func] = React.useState("Yes")

______________________________________________________________

const [isGoingOut, setIsGoingOut] = React.useState(true)

/**

* Challenge:

* - Initialize state for `isGoingOut` as a boolean

* - Make it so clicking the div.state--value flips that

*   boolean value (true -> false, false -> true)

* - Display "Yes" if `isGoingOut` is `true`, "No" otherwise

*/

function changeMind() {

setIsGoingOut(prevState => !prevState)

}

___________________________________

const [thingsArray, setThingsArray] = React.useState(["Thing 1", "Thing 2"])

function addItem() {

// We'll work on this next

setThingsArray(prevThingsArray => [...prevThingsArray, `Thing ${prevThingsArray.length}`])

}

_____________________________________________

  

Conditional Rendering

import React from "react"

export default function Joke(props) {

const [isShown, setIsShown] = React.useState(false)

/**

* Challenge:

* - Create state `isShown` (boolean, default to `false`)

* - Add a button that toggles the value back and forth

*/

function toggleShown(){

setIsShown(prevShown => !prevShown)

}

return (

)

}

______________________________________________

  

Forms

useState hook, title & setTitle

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

• > title get’s updated

export default function Form() {

const [firstName, setFirstName] = React.useState("")

/**

* Challenge: Track the applicant's last name as well

*/

function handleChange(event) {

setFirstName(event.target.value)

}

return (