MỜI A/E HỌC REACTJS TRONG 15 PHÚT !!!

mike

React à??? hót hòn họt...toàn được các Biz tuyển 1k 2k up to 3k salary...ối loạn cmnr rồi :v Để cái loạn được hâm nóng thì học REACT trong 15" đi chém gió với hội tuyển dụng...và có salary như trên :v. Đùa các thím thôi, trăm hay không bằng quay tay thường xuyên các thím ợ. Dưới đây mình chia sẻ về tips học nhanh REACT.js trong vòng 15" của bạn Hoàng Nguyễn.

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.

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 sẽ 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.

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.

Chúng ta đã được tìm hiểu về props và state trong React ở phần trên, ở phần này chúng ta sẽ cùng tìm hiểu về cách dữ liệu di chuyển trong React. Nào cùng bắt đầu bấm đồng hồ đếm ngược năm phút nhé.

Inverse data flow

Chúng ta đã nói rất nhiều về việc làm thế nào luồng dữ liệu chỉ có một chiều trong React, từ cha đến con. Điều này thật ra không hoàn toàn đúng, vẫn có cách để thêm một dòng dữ liệu theo hướng ngược lại (Inverse data flow).

Bạn sẽ cần điều này khi mà một component nằm sâu bên trong cây phân cấp cần phải thay đổi trạng thái của cha nó.

Dưới đây là một ví dụ về việc làm thế nào để khi click vào button trong Form component mà nó sẽ trigger việc thay đổi trạng thái (state change) trong App component, cái nằm bên trên nó, cũng như việc có thể truy xuất vào phương thức onUserClick.

var Form = React.createClass({
    render: function(){
        return (
            <div>
                <input type="submit" onClick={this.props.onUserClick} />
                <h3>You have pressed the button {this.props.counter} times!</h3>
            </div>
        );
    }
});

var App = React.createClass({
    getInitialState: function(){
        return {
            counter: 0
        }
    },
    onUserClick: function(){
        var newCount = this.state.counter += 1;
        this.setState({
            counter: newCount
        });
    },
    render: function(){
        return (
            <div>
                <h1> Welcome to the counter app!</h1>
                <Form counter={this.state.counter} onUserClick={this.onUserClick} />
            </div>
        );
    }
});

React.render(<App />,  document.getElementById("app"));

Như bạn có thể thấy, chúng ta chỉ đơn giản truyền xuống phương thức onUserClick như là một props, đã có thể kích hoạt việc tương tác ngược từ Form component lên App component, và trigger một trong số những method của nó.

refs và findDOMNode

Thỉnh thoảng, bạn có thể sẽ muốn tiếp cận cây DOM, và làm một số thay đổi, nhưng không cần thiết phải sử dụng state hay là props. Trong những tình huống như thế này, bạn sẽ cần lấy các node như mong muốn.

Thật may mắn, React cung cấp cho bạn một cách thủ công để có thể lấy DOM node. Đơn giản bạn gọi phương thức React.findDOMCode(component), và truyền vào component mà bạn mong muốn.

Để lấy được tham chiếu của component đã chọn bạn có thể sử dụng thuộc tính refs. Đơn giản thêm một ref vào trong phần tử như thế này.

<input ref="textField" ... />

Từ đó bạn có thể tham chiếu thành phần input khai báo như trên thông qua this.refs.textField.

var Form = React.createClass({
  focusOnField: function(){
      React.findDOMNode(this.refs.textField).focus();
  },
  render: function(){
      return (
          <div>
              <input 
                  type="text"
                  ref="textField" />
              <input 
                  type="submit"
                  value="Focus on the input!" 
                  onClick={this.focusOnField} />
          </div>
      );
  }
});
var App = React.createClass({
  render: function(){
      return (
          <div>
              <h1> Welcome to the focus app!</h1>
              <Form />
          </div>
      );
  }
});
React.render(<App />,  document.getElementById("app"));

Kết quả của đoạn code trên là thành phần input sẽ được focus khi bạn click button.

Thuộc tính key

Khi bạn tạo các component một cách dynamically, mỗi thành phần đều cần thuộc tính key, và thuộc tính này là duy nhất (unique). Trong suốt quá trình rendering, các component sẽ bị xáo trộn, chúng cũng có thể bị destroy hay recreate tùy vào sự khác nhau của mỗi giải thuật, việc gán cho nó một key để định danh và đảm bảo rằng các component đều ở đúng vị trí của nó, tối ưu hóa việc rendering.

Như thế này.

var App = React.createClass({
    getInitialState: function(){
        return {
            todos: ["eat","code","sleep"] 
        }
    },
    render: function(){
        var todos = this.state.todos.map(function(todo,index){
            return <li key={index}>{todo}</li>
        });             
        return (
            <div>
                <h1> Welcome to the ToDo list!</h1>
                <ul>
                    {todos}     
                </ul>
            </div>
        );
    }
});

Tóm lại

Thật ra nói về React thì có khá nhiều thứ đề học, tuy nhiên nếu hiểu được hết các khai niệm tôi đã đưa ra thì bạn đã biết đủ để có thể viết được một ứng dụng từ React.

Hãy nhớ việc luyện tập mỗi ngày để cũng như tìm hiểu thêm các tài liệu khác để nâng cao kiến thức cũng như kỹ năng của mình, nếu bạn chưa biết bắt đầu từ đâu thì hãy bắt đầu từ việc tìm hiểu những chiêu trò giúp bạn học nhanh hơn nhé. Cuối cùng nếu bạn có bất cứ câu hỏi gì, đừng ngần ngại hãy comment ngay hoặc liên lạc với tôi qua email, facebook…
Nguồn: https://codeaholicguy.com/2016/03/08/hoc-reactjs-trong-15-phut-phan-cuoi/

Nhớ chăm chỉ quay tay REACT.JS mỗi ngày thì độ bá các thím sẽ tăng dần đều :v !!!

Săp tới mình sẽ update serial bài về cái khoản react này :3

A/e nào có comments gì xin để lại.