Intro to JSX · youhoc

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

...

Pure JS React

Ultimatley, you want to use a build tool like Vite or a framework like Next.js, but before any of that, I want to show you the simplest way, which is to use the React CDN. You would not use this method for a production application, but it is a nice way to get started and see how React works.

If you go to

https://react.dev/learn/installation⁠

it will show you some different ways to get started.

The `React.createElement` function is how you create elements in React. It's important to mention that this is very low level.

JSX React

JSX stand for JavaScript XML. It's a syntax extension for JavaScript that looks similar to XML or HTML. It's a lot easier to read and write than using `React.createElement`.

However, JSX is not valid JavaScript. It needs to be transpiled to JavaScript before it can be run in the browser.

This is where Babel comes in. Babel is a JavaScript compiler that can convert JSX into JavaScript. It's a tool that is commonly used in React projects to convert modern JavaScript into a version that can run in any browser.

When you use a build tool like Vite or the older Create React App or Next.js, you don't have to worry about any of this. We're kind of looking at the engine of the car before we drive it. Driving the car is easier and a lot more fun, but it's good to know how it works.

Lưu ý:

JSX luôn yêu cầu return phải nằm trong 1 tag đóng và mở, ví dụ <div>...</div>

chèn component khác thì chỉ có đóng chứ không có mở, <Header />

vì vậy, nếu không có tag đóng mở, hoặc nếu bắt đầu bằng 1 component, thì phải đóng mở bằng <> hoặc chính là <React.Fragment>

có thể sử dụng các biến, hàm, JS bên trong các dấu {}

Không sử dụng được normal JS syntax (như IF) là cũng vì dấu {}, đó là lý do chính phải học React JS, hoặc viết dài dòng hơn bên ngoài JSX

một số property name cần phải thay đổi: class to className , for to forHTML

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.