37zIJEx

Agenda:

Checkin
- Review Submission
- Counter
- Tab Component
Kahoot Quiz
Input Declarative vs Imperative
JS Concepts
Default and Named Imports & Exports
Project Setup
Form Validation
React Router
JSX to JS & React Children

R1 JS Concepts for React "Destructuring"

1. Array Destructuring

Rewrite the following code to use array destructuring instead of reading out the values.

const array = [1, 2, 3]
const firstElement = array[0]
const secondElement = array[1]
const thirdElement = array[2]

console.log(firstElement, secondElement, thirdElement)

2. Array Destructuring

Assign the objects within the array to variables by destructuring the array. Then log the variables to see the value.

const users = [
  {
    name: 'Jim',
    age: 20,
    id: '1asdflkj2134-saf124'
  },
  {
    name: 'Tom',
    age: 50,
    id: 'asdf09123409-asdf14'
  },
]

const user1 = users[0]
const user2 = users[1]

console.log(user1)
console.log(user2)

3. Object Destructering

Rewrite the following code to use destructuring to define the variables name and age and assigning values to them.

const user = {
  name: "Jim",
  age: 20,
  id: "1asdflkj2134-saf124"
};

const name = user.name
const age = user.age

console.log('name: ', name)
console.log('age: ', age)

4. Object Destructuring

Rewrite the printUser function to use parameter destructuring instead of imperative destructuring.

const user = {
  name: "Jim",
  age: 20,
  id: "1asdflkj2134-saf124"
};

function printUser(user) {
  const name = user.name
  const age = user.age
  
  console.log('name: ' + name)
  console.log('name: ' + age)
}

printUser(user)

R2 Import and Exporting

1. Named Export

Create a new file called constants.js. Within that file, we want to save a couple of constants and then export them by name. Import the constants App within your app component and display them to the browser.

const PI = 3.1415
const Euler = 2.7182
const GoldenRatio = 1.618

2. Default Exports and Imports

We want to create a new component Calculator component in its own file. Create a Calculator.jsx file. Export the component per default. Import the component to your App component and use it within that component to display it to the browser.

function Calculator() {
    return <div>Calculator</div>
}

Quiz

Does it matter what name you give the default import?

3. Default Exports & Named Exports

We can use named and default exports within the same file. Move the math constants from constants.js to the the Calculator.jsx file. Then change the import in the App file to make the react project run again.

R3 - The Project

Repository: link

// Clone the project repository from GitHub:
git clone https://github.com/dominikkaegi/react-course-py

// Enter de folder (might be different on windows)
cd react-course-py

// Install the packages
npm install

// Checkout the react-d2 branch
git checkout react-d2

// Run the react app
npm run start

1. Show the password on request

We are currently rendering the Home component within our app. The Home component consists of a Tab which either displays the login or the signup form. The forms are not hooked up with any logic so far. We first want to have a look at our login form and hook up some logic.

You can find the form in /pages/home/Login.jsx

Add the functionality that we can display the password either as ******* or as plain text when clicking on the "Show password" checkbox.
Prevent the default behaviour of the form to reload the page as soon as submission is triggered.
Add the functionality to make the inputs controlled inputs. So that we control the inputs instead of the browser defaults.
Import the login function from the utils folder. Pass the login data to the login function. The login function is an asynchronous function that returns a promise. The promise is either resolved or rejected.
- For the case that login is successful and the promise is resolved we want to console.log('move to dashboard')
- Our login function rejects the promise if the email or the password is not correct. Make sure to save the error for incorrect inputs within an error state you set up.

2. Form validation

When we have a form we generally would like to validate the input before we send it off. Make sure that the email and the password are not empty strings before calling the login function. If one of the inputs is empty display an error message below said input.

We can turn the TextField red by adding an error prop. To display a text under the input we can add the helperText="Error message" to the Textfield.

          <TextField
            error={true}
            helperText=""
          />

Challenges

Build a Calculator V1

dominikkaegi/React - Day 2.md