Profile

Time: 4

Best-Time:

Best-Rolls:

Rolls:0

Tenzies

Roll until all dice are the same. Click each die to freeze it at it's current value between rolls

[Description]

.every() returns true if ALL elements in an array pass a test (provided as a function)
Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
Provident similique accusantium nemo autem.
Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid.

1st Edition 2022

Creator:j@Morta

Profile

Mr. Stinky

(212) 555-1234

@catnap.meow

Mr. Boogies

(212) 555-1234

@catnap.meow

Dr. Steven

(212) 555-1234

@catnap.meow

Ms. Dorky

(212) 555-1234

@catnap.meow

[Description]

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
Provident similique accusantium nemo autem.
Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid.

3rd Edition 2022

Creator:j@Morta

Profile

Why I'm excited to be learning React

You can add reuseable elements or components to the DOM.
It's easy to learn.
Increases my change of getting a job.

[Description]

Props are arguments passed into React components
props stands for properties.
React Props are like function arguments in JavaScript and attributes in HTML.
The component receives the argument as a props object:
Props are also how you pass data from one component to another, as parameters.
React Props are read-only! You will get an error if you try to change their value.

3rd Edition 2022

Creator:j@Morta

Profile

React

Made me do it

[Description]

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
Provident similique accusantium nemo autem.
Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid.

3rd Edition 2022

Creator:j@Morta

Profile

Mr.Knuckles

+1 (719) 555-1212

myemail@example.com

[Description]

With react setState(hook), you must bring in the entire object using the spread operator if you want to make an update to one or more items in the object.
When you setState, you are changing the entire object to whatever you declare now.
Use the spread operator(...data) to copy the previous data in the setState hook and than change one item value

3rd Edition 2022

Creator:j@Morta

Profile

0

[Description]

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
Provident similique accusantium nemo autem.
Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid.

3rd Edition 2022

Creator:j@Morta

full star

Is React Awesome?

click inside

Yes!😍

[Description]

Array destructuring can uses a variables and a function that contains the same value/state.[variable, setFunction].
The "setState" function gives you the ability to change the variables values without changing the original values
Whatever value you provide to the "set" function will be the new value/state of it's variable.
Never use an (=) assignment operator to change the original value.Instead provide a callback function() as the parameter to the setFunction

3rd Edition 2022

Creator:j@Morta

Profile

Item 1 |Item 2 |

[Description]

spread operator[...arr], adds more items to array without modifying array.
The spread operator (...) allows us to quickly copy all or part of an existing array or object into another array or object.

3rd Edition 2022

Creator:j@Morta

Profile

I got my daughter a fridge for her birthday.

How did the hacker escape the police?

Why don't pirates travel on mountain roads?

Why do bees stay in the hive in the winter?

What's the best thing about Switzerland?

[Description]

Lorem ipsum dolor sit amet consectetur adipisicing elit.

3rd Edition 2022

Creator:j@Morta

Profile

false

true

false

true

false

[Description]

All the JS that was used in this App
UseState() Hook
.map() Method
Props
Array objects
onClick event
.toString() Method
Conditional (ternary) operator
Function Parameters
.splice() Method
ES6 Spread Operator

3rd Edition 2022

Creator:j@Morta

Profile

You have 1 unread message!

[Description]

Only display "message" if you have message
Only display message(s) if you have more the one message

3rd Edition 2022

Creator:j@Morta

Profile

[Description]

This is a simple form component, that requires the user to enter certain values to submit the form.

3rd Edition 2022

Creator:j@Morta

Profile

[Description]

Lorem ipsum dolor sit amet consectetur adipisicing elit.

3rd Edition 2022

Creator:j@Morta

Profile

{
  "name": "Luke Skywalker",
  "height": "172",
  "mass": "77",
  "hair_color": "blond",
  "skin_color": "fair",
  "eye_color": "blue",
  "birth_year": "19BBY",
  "gender": "male",
  "homeworld": "https://swapi.dev/api/planets/1/",
  "films": [
    "https://swapi.dev/api/films/1/",
    "https://swapi.dev/api/films/2/",
    "https://swapi.dev/api/films/3/",
    "https://swapi.dev/api/films/6/"
  ],
  "species": [],
  "vehicles": [
    "https://swapi.dev/api/vehicles/14/",
    "https://swapi.dev/api/vehicles/30/"
  ],
  "starships": [
    "https://swapi.dev/api/starships/12/",
    "https://swapi.dev/api/starships/22/"
  ],
  "created": "2014-12-09T13:50:51.644000Z",
  "edited": "2014-12-20T21:17:56.891000Z",
  "url": "https://swapi.dev/api/people/1/"
}

Get next Character 1

[Description]

Welcome useEffect() — the hook that runs side-effects independently of rendering.
A functional React component uses props and/or state to calculate the output. If the functional component makes calculations that don't target the output value, then these calculations are named side-effects.
useEffect depends on the array value to determine whether to re-run the effect function or not.
Dependency's[state] array[count], is the second parameter to the useEffect function
Examples of side-effects are fetch requests, manipulating DOM directly, using timer functions like setTimeout(), and more.
Any code that affects an outside system/local storage, API, web sockets, two states to keep in sync
useEffect runs as soon as the component loads (first render)
useEffect Will NOT run the effect when the values of the dependencies in the array stay the same between renders

3rd Edition 2022

Creator:j@Morta

Profile

Current (state) window width:1440

[Description]

if showWidth and windowWidth are true, display this p tag. else REMOVE it.
Use/run eventListener inside useEffect to display/update current window width when window gets resized.

3rd Edition 2022

Creator:j@Morta

Profile

You have no notes

[Description]

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum!
Provident similique accusantium nemo autem.
Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid.

3rd Edition 2022

Creator:j@Morta

Profile

[Description]

Display Array items.
Click the item flips it's value between false & true
When value is false, apply filter effect.

3rd Edition 2022

Creator:j@Morta

React journal

Tenzies Game

Time: 4

Best-Time:

Best-Rolls:

Rolls:0

Tenzies

Using Props

Mr. Stinky

Mr. Boogies

Dr. Steven

Ms. Dorky

My First App (props)

Why I'm excited to be learning React

Meme Generator

React

Made me do it

Profile Card

Mr.Knuckles

± Counter

0

useState array Destructuring

Is React Awesome?

Yes!😍

Add item to state

Toggle Punchline

I got my daughter a fridge for her birthday.

How did the hacker escape the police?

Why don't pirates travel on mountain roads?

Why do bees stay in the hive in the winter?

What's the best thing about Switzerland?

Toggle Boxes

Unread Message

You have 1 unread message!

Form

SignUp Form

useEffect Hooks

Get next Character 1

innerWidth Tracker

Notes App

You have no notes

ARRAY IMAGES+effect