10

Đây là một đoạn trích từ React Quickly (Manning, 2016). Bạn có thể tải xuống toàn bộ chương đầu tiên miễn phí tại Manning . Cuốn sách dự kiến ​​phát hành trong quý đầu tiên của năm 2016, nhưng MEAP có sẵn ngay bây giờ. Sử dụng mã " mardandz " để được giảm 39%.

Mỗi chương có một dự án được bổ sung bằng video screencast được lưu trữ trên YouTube .

Dự án: Menu

Dự án cho bài viết này sẽ là tối thiểu. Ý tưởng là có một menu được tạo động bao gồm các thẻ <a>.

Chúng tôi sẽ sử dụng các thành phần React tùy chỉnh Menu và Link. Cách chúng ta tạo chúng tương tự như cách chúng ta tạo thành phần HelloWorld trong ví dụ trước. Dự án sẽ chỉ cho bạn cách kết xuất các phần tử lồng nhau theo chương trình. Trong các ví dụ trước, chúng tôi chỉ mã hóa trẻ em bằng tay. Chúng ta sẽ sử dụng hàm map () cho nó.

Đầu tiên, bạn cần lấy tệp React. Bây giờ chúng ta hãy sử dụng phiên bản chưa hoàn thành. Phiên bản chưa hoàn thành hoặc phát triển sẽ không có .min trong tên.

Sự khác biệt là trong phiên bản chưa hoàn thành, bạn sẽ nhận được các cảnh báo hữu ích cùng với mã React ở định dạng con người trong trường hợp bạn muốn xem trộm nó. Mặt khác, trong phiên bản rút gọn, các cảnh báo và lỗi được loại bỏ và mã được thu nhỏ và tối ưu hóa.

Nếu bạn chưa tải xuống React, hãy làm ngay bây giờ. Hãy nhớ rằng chúng tôi đang sử dụng phiên bản 0.14.2. Bất kỳ phiên bản nào khác không được thử nghiệm với các ví dụ của chúng tôi, vì vậy hãy tự chịu rủi ro khi sử dụng nó.

Nếu bạn chưa cài đặt Node.js và npm, bây giờ là thời điểm tốt để lên tàu. Nhưng But React là một thư viện đầu cuối! Bạn có thể nói và bạn sẽ đúng. React sẽ hoạt động tốt mà không cần máy chủ và Node.js. Vì lý do này, hãy bỏ qua bước này. Tuy nhiên, không nên sử dụng Node.js và npm vì hiện nay hầu hết các nhà phát triển web mà tôi biết không thể sống mà không sử dụng Node.js để sử dụng các ứng dụng front-end. Các công cụ nút đã trở nên phổ biến. Thêm vào đó, npm có rất nhiều mô-đun front-end.

Vì vậy, đừng lười biếng. Nếu bạn muốn tiếp tục vượt trội, hãy sử dụng Node.js và npm.

Tôi hy vọng nó rất vui và bạn sẽ làm bạn với Node.js. Hãy quay trở lại Menu React.

HTML rất cơ bản. Nó bao gồm các tệp Reac.js và Reac-dom.js để đơn giản trong cùng một thư mục với tệp HTML. Tất nhiên, sau này, bạn sẽ muốn có các tệp * .js của mình trong một số thư mục khác như js hoặc src:

<!DOCTYPE html>

<html>

  <head>

    <script src="react.js"></script>

    <script src="react-dom.js"></script>

  </head>

Cơ thể chỉ có hai yếu tố. Một là div với menu ID. Đó là nơi thực đơn của chúng tôi sẽ được hiển thị. Một cái khác là thẻ script với mã ứng dụng React của chúng tôi:

  <body>

    <div id="menu"></div>

    <script src="script.js"></script>

  </body>

</html>

Script.js là tệp ứng dụng chính của chúng tôi và nó trông như thế này:

var Menu = React.createClass({...}})

var Link = React.createClass({...})

ReactDOM.render(

  React.createElement(

    Menu,

    null

  ),

  document.getElementById('menu')

)

Về cơ bản, chúng ta có Menu thành phần chính. Để tạo là, chúng tôi sử dụng React.createClass ():

var Menu = React.createClass({

Thành phần Menu sẽ hiển thị các mục menu riêng lẻ là các thẻ liên kết. Trước khi chúng ta có thể kết xuất chúng, hãy xác định các mục menu. Các mục menu được mã hóa cứng trong mảng menu như thế này (bạn có thể lấy chúng từ mô hình và / hoặc máy chủ trong một kịch bản phức tạp hơn):

  render: function(){

    var menus = [

      'Home',

      'About',

      'Services',

      'Portfolio',

      'Contact us'

    ]

Chúng tôi sẽ sử dụng hàm map () từ giao diện Array để tạo bốn thành phần Liên kết. Chúng ta đừng quên rằng phương thức kết xuất phải trả về một phần tử. Vì lý do này, chúng tôi có <div> để bao quanh các liên kết của chúng tôi.

    return React.createElement('div',

      null,

Hàm map () trả về một mảng trong đó mỗi phần tử là kết quả của biểu thức React.createEuity (Link, {nhãn: v}) được gói trong <div>:

     menus.map(function(v,i){

        return React.createElement('div',

<Div> có một thuộc tính quan trọng. Nó cho phép React tối ưu hóa hiển thị danh sách bằng cách chuyển đổi chúng thành băm (thời gian truy cập cho băm tốt hơn cho danh sách / mảng). Về cơ bản, chúng tôi tạo ra một loạt các thành phần Liên kết trong một mảng và mỗi một trong số chúng có một nhãn prop với giá trị từ mảng menu:

          {key: i},

          React.createElement(Link, {label: v})

        )

      })

    )

}})

Trong kết xuất của thành phần Liên kết, chúng tôi viết biểu thức để tạo URL. URL đó sẽ được sử dụng trong thuộc tính href của thẻ <a>. Giá trị this.props.label được truyền từ bao đóng của bản đồ trong chức năng kết xuất Menu: return React.createEuity (Link, {nhãn: v}).

var Link = React.createClass({ 

  render: function () {

    var

      + this.props.label

        .toLowerCase()

        .trim()

        .replace(' ', '-')

Các phương thức toLowerCase (), trim () và thay thế () là các hàm chuỗi JavaScript tiêu chuẩn. Họ thực hiện chuyển đổi sang chữ thường, cắt xén khoảng trắng trên các cạnh và thay thế các khoảng trắng bằng dấu gạch ngang một cách kìm nén.

Biểu thức URL sẽ tạo ra các URL sau:

      • nhà cho gia đình

      • về cho khoảng

      • dịch vụ cho Dịch vụ

      • danh mục đầu tư cho danh mục đầu tư

      • liên hệ với chúng tôi để liên hệ với chúng tôi

Trong kết quả trả về của Link, chúng tôi chuyển this.props.label làm đối số thứ ba để tạoEuity () và nó trở thành một phần của nội dung thẻ <a>, tức là văn bản của liên kết.

Để tách từng liên kết với nhau, chúng tôi thêm thẻ ngắt liên kết <br/>. Vì thành phần chỉ phải trả về một thành phần, chúng tôi bao bọc <a> và <br/> trong <div>:

    return React.createElement('div',

      null,

Mỗi đối số cho createdEuity () sau lần thứ hai, ví dụ: 3, 4, 5, sẽ được sử dụng làm nội dung (còn gọi là trẻ em). Để tạo thành phần liên kết, chúng ta chuyển nó làm đối số thứ hai. Và để tạo phần tử ngắt <br> sau mỗi liên kết, chúng tôi chuyển phần tử ngắt dòng làm đối số thứ tư:

      React.createElement(

        'a',

        {href: url},

        this.props.label

      ),

      React.createElement('br')

      )

  }

})

Đó là nó. Không có cảm giác hồi hộp, nhưng trang sẽ hiển thị cho bạn năm liên kết (hoặc nhiều hơn nếu bạn thêm nhiều mục vào mảng menu). Đây là cách tốt hơn so với sao chép năm phần tử <a> và sau đó có nhiều vị trí để sửa đổi nhãn và URL.

Để thuận tiện cho bạn, tôi sẽ cung cấp danh sách đầy đủ các tệp thường xuyên nhất có thể. Dung lượng rẻ (tôi hy vọng bạn là người hâm mộ định dạng kỹ thuật số như tôi) và tôi (cũng như 1000 độc giả của tôi) thấy rất hữu ích khi có thể lướt qua toàn bộ tệp ngay lập tức mà không bị gián đoạn văn bản đến Github. Nếu bạn không đồng ý, chỉ cần bỏ qua danh sách đầy đủ. 

Để xem trang, chỉ cần mở nó dưới dạng tệp trong Chrome, Firefox hoặc Safari (và có thể trong Internet Explorer) - Hình 1-X.

var Menu = React.createClass({

  render: function(){

    var menus = ['Home',

      'About',

      'Services',

      'Portfolio',

      'Contact us']

    return React.createElement('div',

      null,

      menus.map(function(v,i){

        return React.createElement('div',

          {key: i},

          React.createElement(Link, {label: v})

        )

      })

    )

}})

var Link = React.createClass({

  render: function () {

    var

      + this.props.label

        .toLowerCase()

        .trim()

        .replace(' ', '-')

    return React.createElement('div',

      null,

      React.createElement(

        'a',

        {href: url},

        this.props.label

      ),

      React.createElement('br')

      )

  }

})

ReactDOM.render(

  React.createElement(

    Menu,

    null

  ),

  document.getElementById('menu')

)

Ven Ngay cả đối với những trang tầm thường này, tôi thích sử dụng máy chủ web cục bộ. Nó làm cho mã chạy gần hơn với cách bạn thực hiện nó trong sản xuất. Ngoài ra, nó cho phép bạn sử dụng AJAX / XHR mà bạn không thể sử dụng nếu bạn chỉ mở một tệp HTML trong trình duyệt.

Cách dễ nhất để chạy máy chủ web cục bộ là sử dụng nút tĩnh hoặc công cụ Node.js tương tự . Để cài đặt nó, sử dụng npm:

$ npm install -g node-static@0.7.6

Sau khi được cài đặt, hãy chạy lệnh này từ thư mục gốc của dự án của bạn để làm cho tệp có sẵn trên http: // localhost: 8080 (đây không phải là liên kết ngoài, trước tiên hãy chạy lệnh bên dưới trước khi nhấp vào liên kết)

$ static

Để dừng máy chủ trên Mac OS X, chỉ cần nhấn control + c.

Mã nguồn cho ví dụ này là trên  GitHub Plunker . Để chơi với mã và / hoặc xem bản demo trực tuyến, chỉ cần truy cập Plunker .


Bạn cũng có thể xem video YouTube từ React Quick hoặc mua một cuốn sách với mức giảm giá 39% (mã " mardandz ").

|