ReactJS - React Without ES6 ECMAScript

Xin chào các bạn lập trình viên đang theo đuổi! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình thú vị vào thế giới của ReactJS, nhưng với một sự thay đổi - chúng ta sẽ làm điều đó mà không sử dụng ES6. Đừng lo lắng nếu bạn chưa biết ES6 là gì; chúng ta sẽ giải thích tất cả theo từng bước. Hãy tưởng tượng chúng ta đang xây dựng một máy thời gian để đưa chúng ta trở về những ngày đầu của React. Sẵn sàng chưa? Hãy cùng nhảy vào!

React là gì và tại sao chúng ta học theo cách "cũ"?

React là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng. Nó giống như LEGO cho các nhà phát triển web - bạn tạo ra những mảnh nhỏ, có thể tái sử dụng (components) và ghép chúng lại để xây dựng các ứng dụng phức tạp.

Bây giờ, bạn có thể tự hỏi, "Tại sao chúng ta học React mà không sử dụng ES6?" Được rồi, các học viên yêu quý của tôi, điều này giống như học lái xe số手动 trước khi lái xe số tự động. Nó giúp bạn hiểu sâu hơn về cách mọi thứ hoạt động bên trong. Hơn nữa, bạn có thể gặp phải các mã cơ sở cũ hơn sử dụng cú pháp này, vì vậy việc làm quen với nó là điều tốt.

Tạo React Class (create-react-class)

Trong thế giới React trước ES6, chúng ta sử dụng một thứ gọi là createReactClass để tạo các components. Hãy cùng xem một ví dụ đơn giản:

var React = require('react');
var createReactClass = require('create-react-class');

var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}!</h1>;
}
});

Hãy phân tích này:

1. Chúng ta đang yêu cầu (nhập) React và gói create-react-class.
2. Chúng ta tạo một component gọi là Greeting sử dụng createReactClass.
3. Bên trong component, chúng ta định nghĩa một hàm render trả về JSX (cú pháp giống HTML mà bạn thấy).

Nếu chúng ta sử dụng ES6, cùng component này sẽ trông như thế này:

class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

Thấy sự khác biệt chưa? Cách createReactClass có thể看起来 dài dòng hơn, nhưng nó có một số tính năng đặc biệt mà chúng ta sẽ khám phá tiếp theo.

Đặt giá trị mặc định cho Props (getDefaultProps)

Trong React, chúng ta thường muốn đặt giá trị mặc định cho props. Với createReactClass, chúng ta sử dụng một phương thức đặc biệt gọi là getDefaultProps. Đây là cách nó hoạt động:

var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'World'
};
},
render: function() {
return <h1>Hello, {this.props.name}!</h1>;
}
});

Trong ví dụ này:

1. Chúng ta định nghĩa một hàm getDefaultProps trả về một đối tượng.
2. Đối tượng này chứa giá trị mặc định cho props của chúng ta.
3. Nếu không có prop name được cung cấp khi sử dụng component này, nó sẽ mặc định là 'World'.

Vậy nếu chúng ta sử dụng <Greeting />, nó sẽ hiển thị "Hello, World!". Nhưng nếu chúng ta sử dụng <Greeting name="Alice" />, nó sẽ hiển thị "Hello, Alice!".

Trong ES6 React, chúng ta sẽ đạt được điều tương tự bằng cách sử dụng các thuộc tính tĩnh:

class Greeting extends React.Component {
static defaultProps = {
name: 'World'
};
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}

Đặt giá trị khởi tạo cho State (getInitialState)

State giống như không gian lưu trữ dữ liệu cá nhân của một component. Với createReactClass, chúng ta đặt giá trị khởi tạo của state bằng cách sử dụng getInitialState:

var Counter = createReactClass({
getInitialState: function() {
return {
count: 0
};
},
incrementCount: function() {
this.setState({
count: this.state.count + 1
});
},
render: function() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
});

Hãy phân tích này:

1. getInitialState trả về một đối tượng xác định state khởi tạo.
2. Chúng ta đặt một giá trị khởi tạo count là 0.
3. Chúng ta có một hàm incrementCount để cập nhật state.
4. Trong phương thức render, chúng ta hiển thị số đếm và một nút để tăng nó.

Trong ES6 React, chúng ta thường đặt state khởi tạo trong constructor:

class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
// ... phần còn lại của component
}

So sánh phương thức

Dưới đây là bảng so sánh các phương thức chúng ta đã thảo luận:

createReactClass	ES6 Class	Mục đích
getDefaultProps	static defaultProps	Đặt giá trị mặc định cho props
getInitialState	constructor	Đặt state khởi tạo
render	render	Render component

Kết luận

Và thế là bạn đã có, các bạn ơi! Chúng ta đã cùng nhau thực hiện một chuyến hành trình ngược thời gian để khám phá React mà không sử dụng ES6. Nhớ rằng, việc hiểu các khái niệm này sẽ làm bạn trở thành một nhà phát triển React toàn diện hơn. Điều này giống như biết lịch sử của một ngôn ngữ - nó mang lại cho bạn một sự trân trọng sâu sắc hơn cho các tính năng hiện đại.

Khi chúng ta kết thúc, tôi nhớ lại một câu chuyện. Một lần, tôi đang làm việc trên một dự án di sản sử dụng cú pháp cũ này. Các đồng đội của tôi đều bối rối, nhưng nhờ hiểu biết các nguyên tắc cơ bản này, tôi đã có thể đến như một siêu anh hùng React và cứu ngày!

Tiếp tục thực hành, 保持好奇心, và trước khi bạn nhận ra, bạn sẽ xây dựng những điều tuyệt vời với React - dù là với cú pháp cũ hay mới. Chúc các bạn lập trình vui vẻ, và hy vọng các component của bạn luôn render hoàn hảo!

Credits: Image by storyset