https://vntalking.com/huong-dan-hoc-reactjs-co-ban.html?fbclid=IwAR08r01Sq36PcoHEXBiiWWKfrDkj2XbfjanpYOwtrWngOHQbtWX_9Rj7Kbs
Last updated
Was this helpful?
Bởi Sơn Dương -Tháng Tư 7, 20200
Gần đây, trên VNTALKING mình có một số bài hướng dẫn VueJS, một thư viện front-end đình đám. Trong lúc không biết viết gì về VueJS thì mình chợt nghĩ tới ReactJS, cũng là một front-end framework rất nổi tiếng khác. Để mở đầu chuỗi học ReactJS, bài viết này sẽ tập trung vào những thứ cơ bản nhất của ReactJS bằng việc xây dựng một ứng dụng đơn giản.
Để khỏi mất thời gian của các bạn, chúng ta bắt đầu luôn nhé.
Nội dung chính của bài viết
Khi bạn mới bắt đầu học ReactJS, bạn nên sử dụng cách cài đặt đơn giản nhất. Đó là sử dụng tag <script> để import thư viện React và ReactDOM vào trong file HTML.
Đại khái sẽ như thế này:
<html>
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
/*
ADD REACT CODE HERE
*/
</script>
</body>
</html>
Trong ví dụ trên, mình cũng đã import cả thư viện babel. Bởi vì React sử dụng ngôn ngữ JSX thay vì Javascript thuần. Thư viện Babel có nhiệm vụ chuyển ngôn ngữ JSX sang Javascript, lúc đó trình duyệt mới hiểu được.
Ngoài ra, mình muốn lưu ý thêm 2 điểm quan trọng nữa:
Thẻ <div> với id là #root: Đây là thẻ <div> bao trùm cả giao diện ứng dụng. Sau này, mọi thứ sẽ được tạo bên trong thẻ <div> này. Nó giống như bộ khung của bức tranh, sau này mọi thứ sẽ được vẽ động bên trong khung đó.
Thẻ <script type="text/babel"> trong body: Đây chính là nơi bạn viết mã reactJS
Sau khi đã hiểu cách cài đặt ReactJS, chúng ta tiếp tục tìm hiểu các thành phần quan trọng của ReactJs nhé.
Tất cả mọi thứ trong ReactJS đều là component, và chúng thường là viết dưới dạng các class Javascript.
Bạn tạo mới một component bằng cách extend từ React-Component class. Chúng ta thử tạo một component đơn giản nhé.
class Hello extends React.Component {
render() {
return <h1>Xin chào các bạn độc giả VNTALKING!</h1>;
}
}
Bên trong mỗi component, bạn có thể định nghĩa các method thực hiện các nhiệm vụ riêng trong component đó.
Như trong ví dụ trên, mình chỉ có mỗi method render(). Nhiệm vụ của hàm này là tạo thẻ <h1> với nội dung là “Xin chào các bạn độc giả VNTALKING!“.
Để hiển thị component này ra màn hình, chúng ta sử dụng ReactDOM.render():
ReactDOM.render(
<Hello />,
document.getElementById("root")
);
Theo như ngôn ngữ “dân dã” thì đơn giản là: “Này React! mày có thể render cái Hello component kia vào thẻ div có id là root được không? Nếu được thì luôn và ngay đi. “. Và kết quả được như dưới đây.
Cú pháp mà nhìn ở trên : <h1> và <Hello/>, thực chất nó không phải là HTML mà chính xác là JSX (viết tắt của JavaScript XML). Nghe quảng cáo thì nó mạnh mẽ hơn HTML rất nhiều. Sau này khi bạn làm nhiều về JSX thì quay lại bài viết này cho mình biết cảm nhận về JSX nhé.
Nhưng dù có cao siêu thế thì cuối cùng nó cũng phải chuyển về thẻ HTML bình thường thì trình duyệt mới hiểu được.
Phần tiếp theo, chúng ta sẽ cùng nhau tìm hiểu React xử lý data như thế nào nhé.
Có hai kiểu dữ liệu trong React, đó là Props và State. Với người mới học ReactJS mà để phân biệt chính xác hai loại này hơi khó khăn xíu. Nhưng cũng đừng lo lắng quá, dần dần bạn sẽ “chiêm nghiệm” và hiểu rõ nó thôi.
Sự khác biệt chính đó là: State là private, có thể thay đổi giá trị từ bên trong chính mỗi component. Còn Props là external, tức là không bị kiểm soát ở trên trong mỗi component. Nó được truyền từ component đang “bao bọc” nó trong cây hierarchy, hay nói chính xác là component cha của nó.
Một component có thể tự thay đổi state nhưng không thể thay đổi props chính nó được.
>> Đọc thêm: Phân biệt props và State.
Chúng ta cùng nhau vừa thực hành vừa tìm hiểu nhé.
Như trong ví dụ trên, Hello component là một component tĩnh, tức là nội dung mà nó hiển thị không bị thay đổi. Tuy nhiên, trên thực tế thì các ứng dụng React thường sẽ có khả năng tái sử dụng mã nguồn, nội dung hiển thị sẽ thay đổi khi dữ liệu thay đổi.
Ví dụ, mình muốn thay đổi nội dung câu chào trong Hello component. Thay vì chỉ có thể “Chào các bạn độc giả VNTALKING“, thì mình có thể chào tất cả mọi người, kiểu như “Chào các bạn độc giả đẹp trai“…
class Hello extends React.Component {
render() {
return <h1>Chào các bạn độc giả {this.props.message}!</h1>;
}
}
Sau đó lúc xuất ra màn hình thì truyền message vào props
ReactDOM.render(
<Hello message="đẹp trai" />,
document.getElementById("root")
);
Kết quả sẽ được như này:
Trong JSX, bạn muốn viết một đoạn mã javascript thì phải để trong dấu ngoặc nhọn {}. Giống như ở ví dụ trên, mình cũng phải là như vậy: <h1>Chào các bạn độc giả {this.props.message}!</h1>
Cái này thuật ngữ chuyên ngành gọi là escaping.
Từ giờ thì Hello component của chúng ta đã linh động hơn rồi, đã có thể “chào” bất kỳ ai, cứ truyền dữ liệu vào là “chào” được 🙂
Tuy nhiên, điều gì sẽ xảy ra nếu chúng ta muốn thay đổi dữ liệu ngay bên trong một component?
Đã đến lúc chúng ta sử dụng tới State rồi đấy.
Nếu bạn muốn dữ liệu trong ứng dụng của mình thay đổi. Ví dụ, dựa trên tương tác của người dùng, thì nó phải được lưu trữ trong state của component.
Để khởi tạo state, đơn giản là gọi hàm set: this.state trong hàm khởi tạo constructor().
Ví dụ như Hello component:
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
}
render() {
return <h1>Hello {this.state.message}!</h1>;
}
}
Lưu ý: Trước khi set giá trị cho state, bạn cần phải gọi hàm super() trước đã nhé.
Để thay đổi giá trị của state thì gọi hàm this.setState() và truyền state object vào. Trong ví dụ của Hello component, mình tạo thêm một hàm gọi là updateMessage() để thay đổi state.
class Hello extends React.Component {
constructor(){
super();
this.state = {
message: "my friend (from state)!"
};
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage() {
this.setState({
message: "my friend (from changed state)!"
});
}
render() {
return <h1>Hello {this.state.message}!</h1>;
}
}
Nói đến bất kỳ ứng dụng nào thì đều luôn phải xử lý các sự kiện, tương tác với người dùng. Ứng dụng ReactJS cũng vậy.
Để minh họa cho trường hợp này, chúng ta sẽ tạo một button và nếu người dùng click vào nó thì sẽ gọi hàm updateMessage().
return (
<div>
<h1>Hello {this.state.message}!</h1>
<button onClick={this.updateMessage}\>Click me!</button>
</div>
)
}
Tại đây, chúng ta thêm một event listener trong button, cụ thể là onClick event. Khi event được trigger, chúng ta sẽ gọi hàm updateMessage().
Kết quả thu được như sau:
Vậy là xong rồi đấy! Các bạn có thể tham khảo mã nguồn đầy đủ tại đây.
Đọc đến đây, chắc hẳn bạn cũng đã hiểu phần nào về ReactJS rồi đúng không? Đây chỉ là những khái niệm cốt lõi, và còn nhiều điều thú vị khi học ReactJS. Cùng đón đọc trên VNTALKING nhé.
