Fri Oct 06 2023

Udemy Course - Modern React with Redux [ In progress ]

1. What’s React all about ?

⇒ Goal: show HTML to the user and change HTML when user do smth

<h1>Hello world</>
=> Tag with lower case, React get that is plain HTML tag

<Earth />
=> Tag with capitalize, React get that is a Component

Function component: create a function & return JSX

⇒ JSX:

syntax

extension to JavaScript to write HTML into javascript

Component Nested

<App>
	<Earth />
</App>

State

⇒ Like a variable to store data that changes over time

Generate project

npx create-react-app my-app

Folder Explanation

Required 5 files and folders to start simplest React app

import React from 'react';
//=> Library that defines what a component is 
//and how multiple components work together

import ReactDOM from 'react-dom/client';
//=> Library that knows how to get a component to show 
//up in the browser

// Library 'react-native' to render on mobile app

Create index.js

//1. Import requirement libraries
import React from 'react';
import ReactDOM from 'react-dom/client';

//2. Get HTML element with ID to render
const root_element = document.getElementById('root');

//3. Control that element
const root = ReactDOM.createRoot(root_element);

//4. Create a component
function App() {
	return (
		<div>Hello world</div>
	);
}

//5. Render that component into selected HTML element
root.render(<App />);

⇒ Yes

//To show title with HTML: <h1>Hello world</h1>
//With react:
//React.createElement("h1", null, "Hello world")

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

const root_element = document.getElementById("root");

const root = ReactDOM.createRoot(root_element);

//JSX syntax
/*
function App() {
  return <div>Hi there</div>;
}
*/

const react_element = React.createElement("h1", null, "Hi there");
root.render(react_element);

So complicate to code without JSX syntax

Convert JSX to Js with

https://babeljs.io/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.21&spec=false&loose=false&code_lz=GYVwdgxgLglg9mABAQQA6oBQEpEG8BQiiATgKZQjFIaFGIA8AJjAG4B8tdDAFgIxsAJUgBthcRAHc4xYY3oB6Phy5F6IYcpWrhMNgCVSc-Ts1b6JgOJlSYBSc4rzugJoixEu7oer560w3lmdlosAG58AF8gA&debug=false&forceAllTransforms=false&modules=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=true&targets=&version=7.23.1&externalPlugins=&assumptions=%7B%7D

Printing JavaScript Variables in JSX: Done

⇒ Error

Shorthand JS Expression: Done

Customizing Elements with Props

Converting HTML to JSX

<input spellCheck /> ~ <input spellCheck={true} />

Extracting Components: Done

Module systems

If you want to share variables between separate files
=> import/export system
Key word: Module Systems

Props System

Argument Destructing

Include images

Import any files which is not js file
-> Need to add extension

A Big Pile of HTML: Done

When use className from css library
=> Required put that className into 
layout of css library ( layout: container, column )
* Some issue without css library layout: imgage is gigantic

* Requirement: install css library & import into project
1. npm i xxx
2. import into App.js directly or css file

Event System

Most common events

Execute instantly in render, then could not click any more

State System

Array Destructuring - Js

const numberArray = [1, 2, 3, 4];
// const firstArray = numberArray[0];
// const secondArray = numberArray[1];

//Array destructuring
const [firstArray, secondArray] = numberArray;

console.log(firstArray, secondArray); // 1 2

Update state with spread