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
        • icon picker
          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
youhoc
/
/
Basic Component Creation

Basic Component Creation

Rating App

In React, everything is a component. Components are the building blocks of a React application.
A component is a reusable piece of code that defines how a part of the user interface should look and behave.
Components can be nested inside other components to create complex user interfaces.
Usually, you will want to create a new file for each component.

Create a Component

Basic Component

Embedding Components

Create a separate file for Components and export / import

Nên đặt tên Component viết hoa chữ cái đầu tên để tránh bị trùng với tên tag

Repeating Elements (list)

In React, you can create lists using the map method.
When you create a list in React, you should give each element a key prop. This is a unique identifier that helps React know which items changed, were added, or were removed between renders.
This works, but using the index as the key is generally not recommended — especially if the list can change order or be filtered, as it can lead to bugs or performance issues.
So let use array value (arrItem) as UUID temporarily.
Nếu bạn muốn tạo 1 array với các số tuần tự:
Final Component Rating.jsx

Styling a Component

There are many different ways to syle your components in React.
You could use plain CSS, CSS modules, a framework like Tailwind, styled-components, or a CSS-in-JS library like Emotion.
There are also complete UI libraries like Material-UI, Chakra UI, which give you pre-styled components that you can use out of the box. Things like cards, buttons, and modals are already styled for you.

Direct inline style

Use inline style:
dấu {} đầu tiên là JSX, dấu {} bên trong là CSS Object
sử dụng camelCase đối với css-style như bình thường
Use CSS Object:

External CSS

You can create a CSS file and import it into your component. This is probably the most common way to style your components in React.
Then you className to apply class to elements

Event Handler

Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:
React events are named using camelCase, rather than lowercase.
With JSX you pass a function as the event handler, rather than a string.
Lưu ý:
Event Handler nếu không có dấu () thì mặc định sẽ không tự gọi (callback fn)
Event Handler nếu có dấu () (do buộc phải kèm args) thì sẽ tự động gọi, do đó cần phải được đặt trong arrow fn để callback

Passing Arguments to Event Handlers

Thêm hiệu ứng hover:


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.