REACT

JSX (JavaScript XML) is an extension to JavaScript syntax used in React. It allows you to write HTML-like code within JavaScript, making it easier to create and manipulate the structure of user interfaces. files got html content in javascript files.

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// var ReactDOM = require("react-dom"); dotn need to write this anymore
import React from "react";
import ReactDOM from"react-dom";

//ReactDOM.render(WHAT TO SHOW, WHERE TO SHOW)
ReactDOM.render(<h1>helloworld</h1>, document.getElementById("root"));
// render method can only take one html element

/*
ReactDOM.render(<h1>Helloworld</h1><p>another paragraph</p>, document.getElementById("root"));

can't have two html elements, this not gonna work will have error
but you can put those two elements under the same div tag(look below)
*/


import React from "react";
import ReactDOM from"react-dom";

ReactDOM.render(
<div>
<h1>haha</h1>
<ul>
  <li>bacon</li>
  <li>potato</li>
  <li>noodles</li>
</ul>
</div>
,document.getElementById("root"));

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>JSX</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script src="../src/index.js" type="text/jsx"></script> //!!!!!!!!notice
  </body>
</html>

tags like image or link are self closing

Babel

js compiler, it can compile jsx down to plain old js. it can also compile next generation js like es6or7 , down to the version that very browser that could understand.

JSX

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript.

It’s typically used with React

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React from "react";
import ReactDOM from "react-dom";

const name = "Dan";

const num = 12 ;

ReactDOM.render(
	<div>
		<h1>Hello {name}!</h1>
		<p>my lucky number is{ Math.floor( Math.random() * 10 )}</p>
	</div> 
, document.getElementById("root")//where to show
);

  • ReactDOM.render() is the entry point into the React application. It takes two arguments:
  1. The React element or component that you want to render.
  2. The DOM element where you want to render the React component.
  • in JSX, each expression must have a single outermost parent element. This means that when you’re writing JSX, you need to wrap your JSX elements in a single parent element. For example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// This is valid JSX
const element = (
  <div>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </div>
);

// This is NOT valid JSX
const element = (
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
);

expression vs. statement

Expressions give you values, while statements do something or control how your code runs.

Expressions in JavaScript produce values. They can be simple, like variables or numbers, or more complex, involving operators or function calls.

Statements in JavaScript perform actions or control the flow of execution. They don’t produce values and consist of keywords, operators, and expressions.

ES6: template literal

image-20240404150203504

  1. **{} (Curly Braces in JSX): **

    • Used within JSX syntax in React or other libraries/frameworks that utilize JSX.
    • Used to embed JavaScript expressions or variables within JSX elements.
    • Allows dynamic values or JavaScript code to be included inside JSX elements.
      Examples:
    1
    2
    const name = "John"; 
    const greeting = <h1>Hello, {name}!</h1>;

  2. ${} (Template Literal Syntax):

    • Used in regular JavaScript outside of JSX syntax.
    • Used specifically within template literals (or template strings).
    • Allows for string interpolation, enabling the embedding of expressions or variables within a string.
1
2
 codeconst name = "John";
const greeting = `Hello, ${name}!`;

In the above code, the variable name is interpolated within the template literal using ${}. The value of name is inserted into the resulting string.

To summarize, {} is used in JSX to embed JavaScript expressions within JSX elements, whereas ${} is used in regular JavaScript as part of template literals to interpolate expressions or variables within strings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from "react";
import ReactDOM from "react-dom";

const name = "Dan";
const f = "xiang";
const num = 12 ;

ReactDOM.render(
<div>
<h1>Hello {name + " " +  f}!</h1>   // !
</div>
, document.getElementById("root"));



import React from "react";
import ReactDOM from "react-dom";
const YOURNAME = "Dan"
const CURRENTYEAR = new Date().getFullYear();
ReactDOM.render( 
<p>{`${YOURNAME} ${CURRENTYEAR}`} </p>
  , document.getElementById("root")
);

HTML Global Attributes

1
<h1 className="heading" contentEditable="true">

contentEditable is a global attribute

JSX Attributes & Styling React Elements

https://codesandbox.io/s/jsx-attributes-and-styling-kkycr?fontsize=14

inline styling:

https://codesandbox.io/s/inline-styling-in-jsx-159y7?fontsize=14

1
2
3
4
5
6
7
8
ReactDOM.render(
  <div>
    <h1 style={{color: "red"}}>
      My Favourite Foods
    </h1>
  </div>,
  document.getElementById("root")
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const customStyle = {
  color: "red", // it's , not ;
  fontSize: "20px",
  border:"1px solid black"
}

customStyle.color = "blue";

ReactDOM.render(
  <div>
    <h1 style={customStyle}>
      My Favourite Foods
    </h1>
  </div>,
  document.getElementById("root")
);

https://codesandbox.io/s/react-styling-practice-xpn8u?fontsize=14 (time greeting application)

react components

  • how to structure your code and make it look cleaner?

Airbnb Style Guide for React

  • split off coding into a separate file:

https://codesandbox.io/s/react-components-j66pt?fontsize=14

If Time is a function and you want to export the result of calling that function, you should include parentheses to call it, like Time(). If Time is a variable holding a value, you don’t need parentheses.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//notice: capitalize the first character
import React from "react";
const date = new Date();
const currentTime = date.getHours();
let greeting;
const customStyle = {
  color: ""
};
function Time(){
    if (currentTime < 12) {
      greeting = "Good Morning";
      customStyle.color = "red";
    } else if (currentTime < 18) {
      greeting = "Good Afternoon";
      customStyle.color = "green";
    } else {
      greeting = "Good Night";
      customStyle.color = "blue";
    }
    
    return <h1 style={customStyle}>{greeting}</h1>;
}
export default Time;  // notice: heres no parenthesis

////////////////////////////////////////////////////////////////////////
index.js: 

import React from "react";
import ReactDOM from "react-dom";
import Time from "./component/Time"
ReactDOM.render(
 <Time/>,
  document.getElementById("root")
);

Import , Export, Module

index.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from "react";
import ReactDOM from "react-dom";
import PI from "./math.js"; // will just look for the default export in math.js file, the name(PI), doesn't matter here
//but doublePi, triplePi need to be the exact name with the export statemenet

import pi, { doublePi, triplePi } from "./math.js";
// name { doublePi, triplePi } matters here, you need to call the same name as in the export statement

// you can also say: import pi; beasue pi is default export
import * as pi from "./math.js";
// you can also say: import * as pi; (import all)  ->pi.default       pi.doublePi     pi.tripleOie()
// to call it, just write pi.default pi.doublePi()
//wild card(the line above) import is discouraged

ReactDOM.render(
  <ul>
    <li>{pi}</li>
    <li>{doublePi()}</li>   // notice: here has parenthesis
    <li>{triplePi()}</li>
  </ul>,
  document.getElementById("root")
);

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from "react";
import ReactDOM from "react-dom";
//import pi, { doublePi, triplePi } from "./math.js";
import PII, { doublePi, triplePi } from "./math.js";
ReactDOM.render(
  <ul>
    <li>{PII}</li>
    <li>{doublePi()}</li>
    <li>{triplePi()}</li>
  </ul>,
  document.getElementById("root")
);

1
2
3
4
5
6
7
8
9
10
11
12
import React from "react";
import ReactDOM from "react-dom";
import * as pi from "./math.js";
ReactDOM.render(
  <ul>
    <li>{pi.default}</li>
    <li>{pi.doublePi()}</li>
    <li>{pi.triplePi()}</li>
  </ul>,
  document.getElementById("root")
);

math.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// export multiple things at once
const pi = 3.1415962;

function doublePi() {
  return pi * 2;
}

function triplePi() {
  return pi * 3;
}

export default pi; // can only be one default export per file
export { doublePi, triplePi }; // no parenthesis()!
// Exporting with different names
export { doublePi as doubleValueOfPi, triplePi as tripleValueOfPi };

more examples:

https://codesandbox.io/p/sandbox/es6-importexport-practice-completed-h1f0g

DevTools

haha

Map function

https://codesandbox.io/p/sandbox/react-devtools-forked-3j2rvp?file=%2Fsrc%2Fcomponents%2FAvatar.jsx%3A5%2C8

what this map function does is, it loops through the array of contacts, and for every single item that exists in the array, it called the createCard function and pass each element into the function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import React from "react";
import Card from "./Card";
import contacts from "../contacts";
import Avator from "./Avatar"

function createCard(contact) {
  return <Card
  name={contact.name}
  img={contact.imgURL}
  tel={contact.phone}
  email={contact.email}
/>;
}

function App() {
  return (
    <div>
      <h1 className="heading">My Contacts</h1>

      {contacts.map(createCard)}
      
      {/* <Card
        name={contacts[0].name}
        img={contacts[0].imgURL}
        tel={contacts[0].phone}
        email={contacts[0].email}
      />
      <Card
        name={contacts[1].name}
        img={contacts[1].imgURL}
        tel={contacts[1].phone}
        email={contacts[1].email}
      />
      <Card
        name={contacts[2].name}
        img={contacts[2].imgURL}
        tel={contacts[2].phone}
        email={contacts[2].email}
      /> */}
    </div>
  );
}

export default App;

Key property

In React, when you use map to render a list of components, it’s essential to assign a unique identifier to each component. This unique identifier is known as a “key.” The purpose of the key is to help React identify which items have changed, are added, or are removed from the list. React uses these keys to optimize rendering performance and to efficiently update the DOM.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function App() {
  return (
    <div>
      {contacts.map((contact) => (
        <Card
          key={contact.id} // Using a unique identifier as the key
          name={contact.name}
          img={contact.imgURL}
          tel={contact.phone}
          email={contact.email}
        />
      ))}
    </div>
  );
}

but you cant use key in card function:

card.jsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from "react";
import Avatar from "./Avatar";
function Card(props) {
  return (
    <div className="card">
      <div className="top">
        <p className="info">{props.key} !</p> # this will not display!
        <p className="info">{props.id} !</p> # this will display!
        <h2 className="name">{props.name}</h2>
        <Avatar img = {props.imgg} />
      </div>
      <div className="bottom">
        <p className="info">{props.tel}</p>
        <p className="info">{props.email}</p>
      </div>
    </div>
  );
}

export default Card;

app.jsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from "react";
import Card from "./Card";
import contacts from "../contacts";
import Avator from "./Avatar"

function createCard(contact) {
  return <Card
  key = {contact.id} # not for us to use
  id = {contact.id}
  name={contact.name}
  imgg={contact.imgURL}
  tel={contact.phone}
  email={contact.email}
/>;
}

function App() {
  return (
    <div>
      <h1 className="heading">My Contacts</h1>

      {contacts.map(createCard)}
      
    </div>
  );
}

export default App;

another exercise:

https://codesandbox.io/p/sandbox/mapping-components-practice-completed-37h04?file=%2Fsrc%2Fcomponents%2FApp.jsx

map & forEach

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from "react";
import ReactDOM from "react-dom";

var numbers = [3, 56, 2, 48, 5];
//Map -Create a new array by doing something with each item in an array.
function double(x) {
  return x * 2;
}
const newNums = numbers.map(double);

//way2
var newNumbers = [];
function double2(x) {
  newNumbers.push(x * 2);
}
numbers.forEach(double2); //equals to below
numbers.forEach(function (x) {
    newNumbers.push(x * 2);
  });
//show
ReactDOM.render(
  <div>
    <p>{newNums}</p>
    <p>{newNumbers}</p>
    <p>!</p>
  </div>,
  document.getElementById("root")
);

the main difference between map and forEach is that

**map returns a new array with the results of the function, **

while forEach does not return anything and only modifies the original array

filter()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

reduce()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

find()

returns the first element in the provided array that satisfies the provided testing function.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

findIndex()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findindex

substring()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring

The substring() method of String values returns the part of this string from the start index up to and excluding the end index, or to the end of the string if no end index is supplied.

Arrow function

https://codesandbox.io/p/sandbox/es6-arrow-functions-completed-gbtv7

lesson 229

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const newNumbers = numbers.map(x =>{
    return x * x
});
const newNumbers = numbers.map((x, y) =>{
    return x * y
});
// it equals to
const newNumbers = numbers.map(function(x){ 
    return x * x ;
});
const newNumbers = numbers.map(function(x,y){ 
    return x * y ;
});


// var numbers = [3, 56, 2, 48, 5];

// const newNumbers = numbers.map(x => x * x);

//Map -Create a new array by doing something with each item in an array.
const newNumbers = numbers.map(function(x) =>{
  return x*2;                              
});
// const newNumbers = numbers.map( x => x * 2);

////Filter - Create a new array by keeping the items that return true.
// const newNumbers = numbers.filter(num => num < 10);

//Reduce - Accumulate a value by doing something to each item in an array.
//const newNumber = numbers.reduce((accumulator, currentNumber) => accumulator + currentNumber);

//Find - find the first item that matches from an array.
// const newNumber = numbers.find(num => num > 10);

//FindIndex - find the index of the first item that matches.
// const newNumber = numbers.findIndex(num => num > 10);

Arrow function

https://codesandbox.io/p/sandbox/keeper-app-part-2-completed-4dr3p?file=%2Fsrc%2Fcomponents%2FApp.js%3A11%2C1-17%2C10

and operator &

https://codesandbox.io/p/sandbox/conditional-rendering-completed-forked-v58s7j?file=%2Fsrc%2Fcomponents%2FApp.jsx%3A4%2C22

State

UI =f ( state )

https://codesandbox.io/p/sandbox/introduction-to-state-completed-kzfro

  • declarative programming

  • imperative programming

one approach is fixed (imperative) and the other depends on the state or end result (declarative).

React Hooks

  1. Only call Hooks at the top level: Don’t call Hooks inside loops, conditions, or nested functions. Always use Hooks at the top level of your React functional component or custom Hook. This ensures that Hooks are called in the same order every time a component renders.
  2. Only call Hooks from React functions: You can’t call Hooks from regular JavaScript functions. Hooks should only be called from within React function components or custom Hooks.

https://codesandbox.io/p/sandbox/usestate-hook-completed-ylxqj

what’s hook?

https://www.w3schools.com/react/react_hooks.asp

In React, a Hook is a special function that allows you to “hook into” React state and lifecycle features from functional components. Before the introduction of Hooks in React 16.8, state and lifecycle methods were only available in class components. With Hooks, you can use state and other React features in functional components without the need for classes.

Hooks are functions provided by React that you can use to add state and other React features to your functional components. They allow you to reuse stateful logic across multiple components without changing the component hierarchy.

Some commonly used React Hooks include:

  1. useState: Allows functional components to use state.
  2. useEffect: Allows functional components to perform side effects (such as data fetching, DOM manipulation) after the component renders.
  3. useContext: Allows functional components to consume context provided by a Context.Provider higher up in the component tree.
  4. useReducer: An alternative to useState for managing more complex state logic with reducers.
  5. useCallback and useMemo: Optimization Hooks for performance optimization by memoizing functions or values to prevent unnecessary re-renders.
  6. useRef: Allows functional components to persist values across renders without causing re-renders.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { useState } from "react";

function App() {
  setInterval(updateTime, 1000); //auto update the time

  const now = new Date().toLocaleTimeString();

  const [time, setTime] = useState(now);

  function updateTime() {
    const newTime = new Date().toLocaleTimeString();
    setTime(newTime);
  }

  return (
    <div className="container">
      <h1>{time}</h1>
      <button onClick={updateTime}>Get Time</button>
    </div>
  );
}

export default App;

  • count is the current state value, initially set to 10.
  • setCount is a function to update the state value.

destructing

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

examples:

https://codesandbox.io/p/sandbox/es6-destructuring-completed-forked-5rpklv?file=%2Fsrc%2Findex.js%3A10%2C16

Event Handling

https://codesandbox.io/p/sandbox/changing-complex-state-practice-8uqvh?file=%2Fsrc%2Fcomponents%2FApp.jsx

https://codesandbox.io/p/sandbox/event-handling-in-react-completed-61rti?file=%2Fsrc%2Fcomponents%2FApp.jsx%3A4%2C16

React Form

https://codesandbox.io/p/sandbox/react-forms-completed-4vy2h?file=%2Fsrc%2Fcomponents%2FApp.jsx%3A13%2C22

Prepare:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { useState } from 'react';

const CompromisedAccountWarning = ({ hasUnusualActivity, passwordChangedRecently }) => {
  // State to manage whether the warning should be displayed
  const [showWarning, setShowWarning] = useState(false);

  // Check conditions to determine if warning should be shown
  if (hasUnusualActivity || passwordChangedRecently) {
    setShowWarning(true);
  }

  return (
    <div>
      {showWarning && (
        <div className="warning">
          <p>Your account may be compromised. Please take immediate action.</p>
        </div>
      )}
    </div>
  );
};

export default CompromisedAccountWarning;