Skip to content

youhoc

Pages
- Home
- Modern App Guidelines
- Linux
  Day 1: Linux Distributions & Navigation
  Day 2: User Management
  Day 3: File Permission & Ownership
  Day 4: Package Management
  Day 5: Services Management
- Javascript
  JS The Weird Part
  Execution Context
  Types & Operators
  Objects & Functions
  Error Handling & Strict Mode
  Typescript, ES6, Tra
  Modern JS
  JS in the Browser
  Data Storage JSON
  Modern JS
  Advanced Objects & Methods
  Webpack & Babel
  Async
  jQuery
  In-depth Analysis of jQuery
  React-ready JS
  Arrow Function
  Template Literals
  Logical AND, OR, Ternary, Nullish Operators
  Destructuring & Rest Operator
  Array Method
  Immutability and Spread Operator
  Promises, Async/Await, Callback
- PHP
  gruntJS
  composer
  MySQL
- Docker
  Container Basics
  Container Networking
  Container Image
  Container Volume & Persistent Data
  Dockerfile
  Docker Compose
  Docker Registry
- Node.js
  1. Installing & Exploring
  2. Core Modules
  3. Get User Input
  File System & Input Arguments
  5. Express Web Server
  6. Deploy to Heroku & Github
  Authentication
  7. Databases
  8. Rest API
- ReactJS
  React from Andrew
  Summary from Next
  1. Basics
  2. React Components
  3. Webpack
  4. Styling with SCSS
  5. React Router
  6. React Hook
  Modern React From The Beginning
  Intro to JSX
  Vite Build Tools
  Basic Component Creation
  Component State
  Props & Component Composition
  useState with Inputs & Form Submission
  useEffect, useRef & Local Storage
  Async / Await and Http Request in React
  React Router: Declarative Mode
  ContextAPI
  React Router: Framework Mode
  File-routing & HTML Layouts
  Server-side Data Query
  Links & Navigation
  Loaders
- Typescript
  Type User vs UserProp
- Payload CMS

/

...

/

1. Basics

Install npm and yarn

node = JS on the server

run webpack and

yarn = dependencies manager

just like composer for PHP

⁠

https://yarnpkg.com/⁠

⁠

Install yarn globally

Install web server

Install live-server globally

yarn global add live-server

npm i live-server -g

Compile React JSX with Babel

Create a HTML file

Add React JS

⁠

https://reactjs.org/⁠

⁠

React use JSX = Javascript Syntax Extension / Javascript XML

SCSS / Less = language extension for CSS

However, browser can’t render JSX...

You have to install Babel, a JS compiler for older browser (ES6, ES7 convert to ES5)

It makes JS compatible with older browser, and compile JSX into JS

About Babel

Read more at

⁠

https://babeljs.io/⁠

⁠

Babel will generate this code from JSX, that is able to run in the browser...

Install Babel & Babel React Preset

Setup a script

To auto compile src/app.js to public/scripts/app.js for HTML files to use

the src will write JSX codes

the public will be auto compiled

Basic JSX

Basic Rules

Every line of JSX only contain 1 container DIV.

Pretty mix of HTML and JSX

Javascript Expression

Mixing variables into JSX

you can mix var, function with return values

you can mix another JSX expression

put other JSX in other vars

Short Syntax Conditioning Rendering

IF statements

ternary operators

logical and operator

Events & Attributes

Notes for ID, ClassName

When we target and bind events to buttons or divs, we often use ID or class. But Some HTML do not work the same in JSX.

id work the same

class should change to className

because class is reserved for Class Object

More reference

https://reactjs.org/docs/dom-elements.html⁠

all 2-word attributes should have 2 camelCase

but refer to the list for correct syntax in JSX

Manual Re-render

JSX does not re-render everytimes data has changed

you have to manually re-render

put ReactDOM.render() inside a function and call it everytimes data has changed

Forms & Input

Reference Event List

⁠

https://reactjs.org/docs/events.html⁠

⁠

⁠

https://reactjs.org/docs/events.html#form-events⁠

⁠

Array in JSX

When JSX see an array, it breaks and shows all.

null, undefined, false will not be displayed

MUST set unique for each array elements

Small Apps

Picking a random Option

Visibility Toggle

React Dev Tools

Install React Dev Tool extension

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.