Học ReactJS trong 15 phút (Phần 1)

Trong bài React dành cho AngularJS developer tôi đã có một số so sánh cũng như hướng dẫn sơ lược về ReactJS dành cho những bạn đã có background về AngularJS. Vậy còn với những bạn chỉ có căn bản về Javascript? Hôm nay tôi sẽ giới thiệu với các bạn những kiến thức cơ bản về ReactJS mà các bạn đã có căn bản về Javascript có thể hiểu được và làm quen dần với ReactJS.

Tôi sẽ chia loạt bài này làm ba phần, như vậy có nghĩa là các bạn sẽ phải đọc hết mỗi bài viết và hiểu nó trong vòng 5 phút, cố gắng nhé. Hehehe.

Hy vọng sau khi đọc xong ba bài viết, mất khoảng 15 phút, chỉ tính thời gian đọc không tính thời gian load page nhé =)), bạn đã có thể bắt đầu code application với ReactJS một cách thoải mái.

ReactJS là gì?

React.JS là một thư viện Javascript dùng để xây dựng giao diện người dùng. Với cá nhân tôi cũng như nhận xét chung của cộng đồng về ReactJS thì nó nhanh, dễ học và vui.

Tiếp theo chúng ta sẽ bắt đầu đến với những khái niệm.

Component

React được xây dựng xung quanh các component, chứ không dùng template như các framework khác. Bạn có thể tạo ra một component bằng các gọi phương thức createClass của đối tượng React, điểm bắt đầu khi tiếp cận với thư viện này.

Ví dụ.

var Button = React.createClass({
    render: function(){
        return (
            <input type="submit" />
        );
    }
});

Phương thức createClass nhận vào một tham số, là đối tượng mô tả đặc tính của component. Đối tượng này bao gồm tất cả các phương thức để hình thành nên component. Phương thức quan trọng nhất là render, phương thức này được trigger khi component đã sẵn sàng để được render lên trên page.

Trong hàm đó, bạn ẽ trả về một mô tả cho việc bạn muốn React render cái gì lên trên page. Như trong ví dụ ở trên, đơn giản tôi muốn render một button.

Chú ý: Hàm render chính là mô tả cụ thể của UI tại bất cứ thời điểm nào. Vì thế nếu dữ liệu thay đổi, React sẽ take care việc update UI với dữ liệu tương ứng. Các bạn có thể hiểu đơn giản là, khi dữ liệu thay đổi, React sẽ tự động gọi hàm render để update lại UI.

JSX — Javascript Syntax Extension

Đây đơn giản là một syntax extension của Javascript. Với nó bạn có thể viết Javascript với những tag giống như XML (XML-like). Về bản chất, các tag thực sự là những lời gọi hàm, sẽ được chuyển đổi trong React code và end up dưới dạng HTML và Javascript trong cây DOM.

Nhưng với những gì bạn biết ở hiện tại, chỉ cần hiểu đơn giản nó giống như là HTML/XML với một số khả năng khác.

Multiple components

Nếu bạn muốn lồng nhiều component vào nhau, bạn sẽ làm điều này trong lệnh return của phương thức render.

Ví dụ.

var Form = React.createClass({
    render: function(){
        return (
            <div>
                <h3>Click the button</h3>
                <input type="submit" />
            </div>
        );
    }
});
var App = React.createClass({
    render: function(){
        return (
            <div>
                <h1> Welcome to my app!</h1>
                <Form />
            </div>
        );
    }
});
React.render(<App />,  document.getElementById("app"));

Phía trên, tôi đang lồng Form component vào trong App component. Đây là một dạng quan hệ cha con (parent-child) mà bạn có thể dễ dàng nhận thấy trong HTML.

Phương thức React.render() như các bạn thấy ở trên nhằm mục đích kickstart việc render, và render thừ root component, trong trường hợp trên là App vào trong DOM với container cụ thể là element có id là app

Hết 5 phút, mời các bạn nghỉ ngơi và chờ 5 phút tiếp theo về Prop và State.

Bài gốc: Codeaholicguy