Mình không sử dụng React thường xuyên và vì vậy bất cứ khi nào mình cần React (ngay cả việc nhỏ nhất trong React), mình đều mở Document lên xem, các bài blog, video Youtube hoặc tìm kiếm trên Stack Overflow.
Đó là lý do tại sao mình quyết định làm một bản tóm tắt về React bởi vì mình cũng sử dụng nhiều công nghệ, không thể nhớ hết được chúng nó.
> Nếu bạn muốn tự mình học cụ thể từ đầu thì có thể xem hướng dẫn HỌC REACT.JS này. Còn nếu muốn học nhanh với chuyên gia thì tham gia HỌC FRONT END (Với React.js) ngay.
Mình sẽ tiếp tục cập nhật bản tóm tắt về React vào đây, vì thế hãy lưu lại bài viết này để có thể tham khảo nhanh bất kỳ lúc nào.
#1: Tạo react app
// Tạo react app mới
npx create-react-app my-app-name
// Chạy react app
cd my-app-name
yarn start
// Liên kết trên trình duyệt
// http://localhost:3000
#2: React Functional components
Một số lưu ý khi tạo Functional components
-
Không cần
import React from 'react' (kể từ React 17)
-
Tên phải có chữ cái đầu tiên viết HOA
File: src/App.js
// React Functional component
function App(){
return <h1>Học React</h1>
}
export default App;
Sau đó, làm thế nào để component này hiển thị được trên trình duyệt?
Bạn cần vào src/index.js và trong tệp đó để render component.
// Render component
ReactDOM.render(
<App />,
document.getElementById('container')
);
Sau đó, App component sẽ được render bên trong thẻ div có id là container trong file public/index.html
#3: Quy tắc của JSX
JSX trả về một phần tử duy nhất (chỉ một phần tử cha)
// Không hợp lệ
return <h1>Tự học</h1><h2>React!</h2>
// Hợp lệ
return (
<>
<h1>Hello World</h1>
<h2>Hi!</h2>
</>
)
// Sử dụng dấu ngoặc đơn cho định dạng nhiều dòng
Sử dụng className thay vì class
Ngoài ra, tất cả tên thuộc tính cần phải viết theo kiểu camelCase
// Không hợp lệ
return (
<div class="title">
Học React
</div>
)
// Hợp lệ
return (
<div className="title">
Học React
</div>
)
Đóng mọi phần tử
return (
<img src="https://niithanoi.edu.vn/imgs/logo.jpg" />
<input type="text" name="first_name" />
)
#4: Conponent lồng nhau
Bạn có thể lồng component này bên trong component khác.
// Viết tắt tạo component với Arrow Function
// Component #1
const CourseTitle = () => <h1>Học React</h1>
// Sử dụng Arrow function
// Component #2
const Link = () => {
return <a href="#">niithanoi.edu.vn</a>
}
// Lồng 2 component vào component cha
function HelloWorld(){
return (
<>
<CourseTitle />
<Link />
</>
)
}
#5: Component CSS
Chúng ta viết CSS ở trong file src/App.css
Để liên kết CSS với component, bạn cần import file CSS trong src/App.js
import './App.css'
function App(){
return <h1>Học React</h1>
}
#6: Viết CSS kiểu inline-style
Sử dụng dấu ngoặc nhọn { } để viết CSS theo kiểu inline-style
function App(){
return <h1 style={{ color: 'red' }}>Học React</h1>
}
#7: Sử dụng JavaScript trong JSX
Để sử dụng JavaScript trong JSX thì chúng ta cần:
-
Và phải là một biểu thức (trả về một giá trị)
function App(){
const name = 'ict'
return (
<>
<h1>Hi {name}</h1>
<p>{name === 'ict' ? '(admin)': '(user)'}</p>
</>
)
}
#8: Thuộc tính của component (Props)
Bạn có thể truyền dữ liệu thông qua props
function App()
return <User name='Ngọc Anh' age={18} />
}
const User = (props) => {
return <h1>Tên: {props.name}, Tuổi: {props.age}</h1>
}
// Hoặc sử dụng object deconstructing
const User = ({name, age}) => {
return <h1>Tên: {name}, Tuổi: {age}</h1>
}
Và có thể truy cập cả thuộc tính con thông qua props.children
Ví dụ: Tự nhiên ở trong ví dụ trên, chúng ta muốn thêm nhanh một dòng thông báo "Chào buổi sáng!" thì truy cập nó như sau:
function App()
return (
<User name='Ngọc Anh' age={18}>
Chào buổi sáng!
</User>
)
}
const User = (props) => {
return (
<h1>Tên: {props.name}, Tuổi: {props.age}</h1>
<p>{props.children}</p>
)
}
// Hoặc sử dụng object deconstructing
const User = ({name, age}) => {
return (
<h1>Tên: {name}, Tuổi: {age}</h1>
<p>{props.children}</p>
)
}
... Còn tiếp
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học thực tế + Tuyển dụng ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0383.180086
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #icthanoi #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp