phếch cơ nói tiếng ziệt
Senior Member
bác ơi em muốn học ạ
kiến thức React cho người mới bắt đầu: Cách tạo một ứng dụng từ a-z
- Thread starter JordanPham
- Start date
Granit Xhaka
Junior Member
bác thớt cho e xin link discord bác dạy đc k ạ
JavaNeverDie002
Member
how to join bác nhỉ
mình tham gia rồi, chủ thớt nhớ giữ đều phong độ nhé
mixikira
Senior Member
Discord này còn join được không ạ? Em mới tìm thấy thread này sáng nay, thấy hay quá mà bấm link lại ghi lời mời hết hạn rồi ạ hic. Cảm ơn bác nhiều ạ!
NextLesorNextVoz
Senior Member
ít người tham gia quá thím ấy xóa server rồi
Deptrai_ChuaYeuAi
Senior Member
JordanPham
Senior Member
Có 2 cách để import và export components
Ở phía trên, mình có một component <Profile /> sử dụng nội bộ trong file. Parent component là <Gallery />, sử dụng keyword là export default, nghĩa là xuất ra mặc định.
Trong 1 file chỉ có 1 export default, và export cách nào thì import cách đó. Ví dụ
Trong file này, mình nhập vào component là <Gallery />, đã được xuất ra trước đó.
Trong 1 file, chỉ có 1 export default component, nhưng có thể có nhiều export named component. Ví dụ
Sau đó, để import 2 named export components là <Button /> và <Submit />, ta dùng keyword
- Default
- Named
JSX:
function Profile() {
return (
<img
src="https://i.imgur.com/MK3eW3As.jpg"
alt="Katherine Johnson"
/>
);
}
export default function Gallery() {
return (
<section>
<h1>Amazing scientists</h1>
<Profile />
<Profile />
<Profile />
</section>
);
}Ở phía trên, mình có một component <Profile /> sử dụng nội bộ trong file. Parent component là <Gallery />, sử dụng keyword là export default, nghĩa là xuất ra mặc định.
Trong 1 file chỉ có 1 export default, và export cách nào thì import cách đó. Ví dụ
JSX:
import Gallery from './Gallery.js';
export default function App() {
return (
<Gallery />
);
}Trong file này, mình nhập vào component là <Gallery />, đã được xuất ra trước đó.
Trong 1 file, chỉ có 1 export default component, nhưng có thể có nhiều export named component. Ví dụ
JSX:
export function Button() {
// ...
}
export function Submit() {
// ...
}
export default function Gallery() {
// ...
}Sau đó, để import 2 named export components là <Button /> và <Submit />, ta dùng keyword
JSX:
import {Button, Submit} from './gallery';
// ...JordanPham
Senior Member
Hôm nay, chúng ta sẽ làm về một phần UI đơn giản như sau
Đầu tiên, cần lưu dữ liệu trong một file riêng biệt, tên là file.js
Đây là một mảng, đặt tên là sculptureList, có 12 phần tử, là 12 objects, và được xuất ra để những components khác có thể sử dụng, sử dụng keyword export
Bên trong mỗi object, có 5 properties, là thông tin mà chúng ta sẽ import vào components
- Có 3 nút (buttons) để xem ảnh tiếp theo (next), xem ảnh trước (previous), và để xem mô tả (show more)
- Có một dòng heading để thể hiện tên tác giả - tác phẩm
- Có một hình ảnh
Đầu tiên, cần lưu dữ liệu trong một file riêng biệt, tên là file.js
JSX:
export const sculptureList = [{
name: 'Homenaje a la Neurocirugía',
artist: 'Marta Colvin Andrade',
description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
url: 'https://i.imgur.com/Mx7dA2Y.jpg',
alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.'
}, {
name: 'Floralis Genérica',
artist: 'Eduardo Catalano',
description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
url: 'https://i.imgur.com/ZF6s192m.jpg',
alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.'
}, {
name: 'Eternal Presence',
artist: 'John Woodrow Wilson',
description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
url: 'https://i.imgur.com/aTtVpES.jpg',
alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.'
}, {
name: 'Moai',
artist: 'Unknown Artist',
description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.',
url: 'https://i.imgur.com/RCwLEoQm.jpg',
alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.'
}, {
name: 'Blue Nana',
artist: 'Niki de Saint Phalle',
description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.',
url: 'https://i.imgur.com/Sd1AgUOm.jpg',
alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.'
}, {
name: 'Ultimate Form',
artist: 'Barbara Hepworth',
description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.',
url: 'https://i.imgur.com/2heNQDcm.jpg',
alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.'
}, {
name: 'Cavaliere',
artist: 'Lamidi Olonade Fakeye',
description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.",
url: 'https://i.imgur.com/wIdGuZwm.png',
alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.'
}, {
name: 'Big Bellies',
artist: 'Alina Szapocznikow',
description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.",
url: 'https://i.imgur.com/AlHTAdDm.jpg',
alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.'
}, {
name: 'Terracotta Army',
artist: 'Unknown Artist',
description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.',
url: 'https://i.imgur.com/HMFmH6m.jpg',
alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.'
}, {
name: 'Lunar Landscape',
artist: 'Louise Nevelson',
description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.',
url: 'https://i.imgur.com/rN7hY6om.jpg',
alt: 'A black matte sculpture where the individual elements are initially indistinguishable.'
}, {
name: 'Aureole',
artist: 'Ranjani Shettar',
description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."',
url: 'https://i.imgur.com/okTpbHhm.jpg',
alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.'
}, {
name: 'Hippos',
artist: 'Taipei Zoo',
description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.',
url: 'https://i.imgur.com/6o5Vuyu.jpg',
alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.'
}];Đây là một mảng, đặt tên là sculptureList, có 12 phần tử, là 12 objects, và được xuất ra để những components khác có thể sử dụng, sử dụng keyword export
Bên trong mỗi object, có 5 properties, là thông tin mà chúng ta sẽ import vào components
JordanPham
Senior Member
Tiếp theo, chúng ta sẽ sử dụng 2 state variables để keep track 2 thông tin, đó là object hiện tại đang show và có hiển thị description hay không. Chúng ta sẽ dùng useState hook
JSX:
import { useState } from 'react';
import { sculptureList } from './data.js';
export default function Gallery() {
const [index, setIndex] = useState(0);
const [showMore, setShowMore] = useState(false);JordanPham
Senior Member
Có 3 nút (buttons), khi nhấn vào sẽ kích hoạt (trigger) 3 trình xử lý sự kiện (event handlers) là
- handlePrevClick
- handleNextClick
- handleMoreClick
JSX:
let hasPrev = index > 0;
let hasNext = index < sculptureList.length - 1;
function handlePrevClick() {
if (hasPrev) {
setIndex(index - 1);
}
}
function handleNextClick() {
if (hasNext) {
setIndex(index + 1);
}
}
function handleMoreClick() {
setShowMore(!showMore);
}JordanPham
Senior Member
Chúng ta sử dụng 2 biến để xử lý 2 edge cases, là tại object đầu và object cuối. hasPrev trả về true nếu index từ 1 - 11, trả về false nếu index = 0 (object 1). Ngược lại, hasNext trả về true nếu index từ 0 - 10, trả về false nếu index = 11 (object 12)
Chúng ta sẽ dùng biến sculpture để lưu object hiện tại
Và dùng conditional render để hiện thị ra, tùy theo điều kiện mà người dùng tương tác
- Chỉ trong trường hợp hasPrev = true, thì handlePrevClick mới thực thi, làm nhiệm vụ là setIndex(index - 1)
- Chỉ trong trường hợp hasNext = true, thì handleNextClick mới thực thi, làm nhiệm vụ là setIndex(index + 1)
Chúng ta sẽ dùng biến sculpture để lưu object hiện tại
JSX:
let sculpture = sculptureList[index];Và dùng conditional render để hiện thị ra, tùy theo điều kiện mà người dùng tương tác
JSX:
{showMore ? 'Hide' : 'Show'} details
{showMore && <p>{sculpture.description}</p>}JordanPham
Senior Member
Làm việc với objects khi sử dụng useState hook
Nhìn chung, React sẽ cập nhật những thay đổi do người dùng tạo ra, sau đó hiển thị kết quả ra màn hình theo ba bước
Khi gọi useState hook về cơ bản là một function. Lệnh gọi phía trên trả về 2 phần
Tiếp theo, biến trạng thái state variables number có thể lưu bất kỳ kiểu dữ liệu nào
Tại sao lại phải nói điều này, vì đối với 2 kiểu dữ liệu advanced hơn là array và object, bạn thực sự có thể biến đổi nó, và điều này gây ra lỗi và những hành vi mà developers không đoán được khi lập trình React
Nhìn chung, React sẽ cập nhật những thay đổi do người dùng tạo ra, sau đó hiển thị kết quả ra màn hình theo ba bước
- Trigger: các sự kiện kích hoạt
- Render: kết xuất và gọi components
- Commit: thực hiện những thay đổi vào DOM
JSX:
import {useState} from 'react';
const [number, setNumber] = useState(0);Khi gọi useState hook về cơ bản là một function. Lệnh gọi phía trên trả về 2 phần
- Một biến trạng thái state variable
- Một hàm đặt lại giá trị của biến trạng thái đó state setter function
Tiếp theo, biến trạng thái state variables number có thể lưu bất kỳ kiểu dữ liệu nào
- Number
- String
- Boolean
- Array
- Object
JSX:
number = 0;
setNumber(1);
//số 0 được thay thế bằng số 1, chứ không phải số 0 bị đột biến thành số 1Tại sao lại phải nói điều này, vì đối với 2 kiểu dữ liệu advanced hơn là array và object, bạn thực sự có thể biến đổi nó, và điều này gây ra lỗi và những hành vi mà developers không đoán được khi lập trình React
JSX:
person = {
name: 'Ben',
age: 38,
isReady: false,
}
JSX:
person.name = 'Ray';
Last edited:
JayjayDn
Senior Member
Đặt gạch
pacpumpumcaccumcum
Senior Member
Up tháng 11, trong 8 tuần cuối năm 2023 cày project để luyện React, mong qua tết tìm được chỗ nhận intern 
JavaNeverDie002
Member
Up tháng 11, trong 8 tuần cuối năm 2023 cày project để luyện React, mong qua tết tìm được chỗ nhận intern
Journey Horizon: Where Your Career Development Comes First
Searching for an employer that puts its team members at the forefront? At Journey Horizon, we emphasize the growth and well-being of our staff. Get in touch for exciting career opportunities!
www.journeyh.io
kingsmank20
Member
lại chuyển mảng à bác,nhớ mới pv bên renesas màUp tháng 11, trong 8 tuần cuối năm 2023 cày project để luyện React, mong qua tết tìm được chỗ nhận intern
pacpumpumcaccumcum
Senior Member
Tạch lâu rồi thím, giờ vừa đi làm tạm kiếm tiền vừa cày project cá nhân để năm sau kiếm nơi apply mảng web thôi
kingsmank20
Member
gì lênh đênh vậy , giờ software cũng căng lắm
Similar threads
