Xây dựng web app với reactjs

     

Lời nói đầu

Bài viết React.js này đang hướng dẫn chúng ta cách tạo nên một vận dụng Todo đơn giản dễ dàng sử dụng React JS và bản vẽ xây dựng Flux. Trong thời gian gần đây, React JS đã tạo nên tiếng vang bự trong cộng đồng lập trình viên vị hiệu năng tuyệt vời và hoàn hảo nhất khi so sánh với các thư viện không giống (ví dụ như Angular JS), quan trọng khi thực hiện để liệt kê những danh sách. Do vậy, tôi cảm xúc rất hứng thú với việc tạo nên một ứng dụng đơn giản và dễ dàng và dễ hiểu so với người dùng.

Bạn đang xem: Xây dựng web app với reactjs

Một trong những ưu điểm của React JS là virtual DOM - thứ nằm ẩn bên phía trong mỗi view với là lí do khiến cho React đã có được hiệu năng tốt. Lúc một view yêu cầu gọi, toàn bộ mọi thứ sẽ tiến hành đưa vào trong một bản sao ảo của DOM. Sau khi việc điện thoại tư vấn hoàn thành, React triển khai một phép so sánh giữa DOM ảo với DOM thật, và tiến hành những biến đổi được chỉ ra trong phép so sánh trên.

Bạn mong muốn sẽ học được gì sau thời điểm đọc xong bài viết này ? bạn sẽ hiểu được những kỹ năng và kiến thức cơ bạn dạng của vấn đề xây dựng các view trong React, bạn sẽ thấy được một ví dụ rõ ràng của việc bản vẽ xây dựng Flux làm nuốm nào để chất nhận được truy nhập dữ liệu, cùng cuối cùng, bạn sẽ thấy cách mà tất cả các cấu tạo trên kết phù hợp với nhau thế nào để có thể tạo thành một vận dụng Todo đơn giản.

Flux là một phương pháp lấy tài liệu từ hệ thống API của doanh nghiệp trong khi cung cấp một giao thức một chiều để duy trì một biện pháp nghiêm ngặt sự bóc tách rời (decoupling) giữa những component sống phía client của bạn. Ứng dụng Todo sẽ thực hiện Flux để đưa dữ liệu từ 1 server API giả.React JS cùng Flux hỗ trợ nhau kha khá tốt, cũng cũng chính vì chúng được tạo nên ra để làm việc đó, tuy vậy không có nghĩa là chúng phụ thuộc vào nhau. Vị thế, tôi vẫn chia bài viết này làm một phần liên quan tới mảng React JS, địa điểm tôi sẽ chỉ ra rằng làm núm nào để tạo thành các views và các phương thức tốt nhất, tiếp sau đó, chúng ta sẽ mày mò cách tôi lấy dữ liệu từ hệ thống API đưa của tôi thông qua Flux.

Nếu bạn muốn lấy tức thì source code của Todo application, thì tôi đang đưa bọn chúng lên Github. Hãy xem sinh hoạt đây.

React JS

Đầu tiên, nếu khách hàng chưa khi nào nghe tới React JS, đó là một trong những View Renderer tập trung vào hiệu năng, cùng được viết ra vị những anh chàng Facebook. MVVM frameworks cần mất nhiều công sức của con người để điện thoại tư vấn ra lượng khủng dữ liệu dành riêng cho các contender chẳng hạn như là các danh sách, tuy vậy đó chưa hẳn là vấn đề đối với React bởi vì nó chỉ gọi ra hầu như gì đã nạm đổi. Lấy một ví dụ như, giả dụ một user sẽ xem một danh sách của 100 sản phẩm được call ra bởi React, và bằng phương pháp nào kia anh ta thay đổi nội dung của thành tích thứ ba, thì chỉ bao gồm item này được gọi lại, 99 item còn sót lại vẫn nằm nguyên đó mà không gồm gì núm đổi. Nó cũng thực hiện một thứ mà Facebook hotline là "DOM ảo" (virtual DOM) để tăng tốc hiệu năng, gọi toàn thể nội dung vào DOM ảo rồi đối chiếu với DOM thật để tạo ra một patch (có thể dịch là 1 "miếng vá"). React sử dụng các file JSX (tuỳ chọn) nhằm viết các view, điều đó tức là JavaScript với HTML có thể được viết trên cùng một file. Đó là một sự cụ đổi nhỏ dại và bạn phải mất chút thời gian để triển khai quen cùng với nó. Vì sử dụng JSX là tuỳ chọn nên bạn không duy nhất thiết nên động đến nó, mà lại sẽ tiện lợi hơn cho chính mình khi gọi ra những component bởi JSX, vì thế tôi nghĩ bạn nên áp dụng nó.

React chuyển động thông qua những Class. Để hotline một vài ba HTML, thứ nhất bạn đề xuất tạo một React class biểu diễn những gì nên gọi ra. Đây là 1 ví dụ của React class.

var HelloWorld = React.createClass( render: function() return div>Hello, world!/div>; );React.render(new HelloWorld(), document.body);Đầu tiên họ tạo ra React class mang tên là HelloWorld. Bên trong đó, ta chỉ ra rằng một function: render. Đó là đều thứ sẽ được gọi đến khi ta lôi ra HTML phía bên trong nó - hãy xem ở dòng cuối cùng. Các bạn sẽ nhận ra rằng render function ở bên phía trong class của chúng ta bao hàm cả HTML; đó là nơi JSX hoạt động. Nó được cho phép ta viết HTML phía bên trong file JavaScript thay vì chưng đặt nó ở một file riêng biệt biệt. Dòng sau cuối chỉ ra rằng tôi mong muốn class HelloWorld sẽ tiến hành gọi ra vào phần body toàn thân của document.

Props

Vậy điều gì xảy ra khi ta muốn đưa một vài dữ liệu vào trong class React. Ví dụ phía trên không cung ứng cho ta điều gì về vụ việc này, vậy hãy tham khảo đoạn code dưới đây.

var HelloWorld = React.createClass( render: function() return div>Hello, this.props.name!/div>; );React.render(new HelloWorld( name: "Chris Harrington" ), document.body);Tôi giới thiệu tới các bạn các thông số props trong React class. Bọn chúng được thực hiện để chuyển dữ liệu vào trong số view của React. Hầu như sự biến đổi của một biến hóa props đang khởi động cho một lời hotline từ phần tương ứng tới view. đều sự đổi khác đó rất có thể đến từ bên phía trong chính view đó, hoặc từ view cha, hay có thể từ một view ngẫu nhiên mà view của họ có. Điều này khá thuận tiện khi nó mang lại phép họ đưa tài liệu tới các view khác nhau mà vẫn giữ lại được sự đồng nhất của chúng. Trong đoạn code phía trên, tôi đã đưa tên của mình vào vào class HelloWorld - class đã có gọi bên trong một div sử dụng biến props.

State

var HelloWorld = React.createClass( getInitialState: function() return counter: 0 ; , increment: function() this.setState( counter: this.state.counter+1 ); , render: function() return div> div>this.state.counter/div> button onClick=this.increment>Increment!/button> /div>; );React.render(new HelloWorld(), document.body);Đoạn code này ra mắt về một ngôn từ khác của React class: state. State của một class React mang lại phép chúng ta theo dõi được tuy nhiên sự cố kỉnh đổi bên trong view. Cũng tương tự props, gần như sự biến hóa của state kéo theo vấn đề khởi rượu cồn một lời gọi tới element khớp ứng trên view, với một điều kiện: các bạn phải gọi thủ tục setState, giống như được viết trong function increment của class. Hãy luôn luôn sử dụng setState! Nếu không tồn tại nó, đều sự thay đổi của các bạn sẽ không tác động tới view. Function getInitialState bắt buộc phải có khi thực hiện internal state. Nó chỉ ra rằng state thuở đầu của view như vậy nào. Hãy luôn chắc chắn rằng các bạn đã chuyển function này vào vào class kể cả khi state thuở đầu của bạn không tồn tại gì, một state rỗng vẫn được xem như là một state!

Vậy khi nào bạn thực hiện props hoặc state, tốt chỉ là những biến private ? Props được thực hiện để gửi tài liệu giữa những class React cha và con, phần lớn sự biến hóa của prop mang tới một lời gọi tự động hóa của view, cả phụ thân và con. Đối với những dữ liệu chỉ dành cho view, hãy dùng state. Hồ hết sự biến đổi ở đây cũng trở thành gọi cho tới view. Đối với các dữ liệu chỉ dành riêng cho class mà lại không tương quan tới view, chúng ta cũng có thể sử dụng một đổi thay private, nhưng có lẽ tôi vẫn cần sử dụng state; vì nó cũng được dành cho đầy đủ trường đúng theo này mà!

Nested Views

Một giữa những điều để cho React trở cần dễ áp dụng là khái niệm những nesting view. Chúng ta có thể gọi các React class từ phía bên trong của các React class khác, ví dụ điển hình như:

var FancyButton = React.createClass( render: function() return button onClick=this.props.onClick> i className="fa " + this.props.icon>/i> span>this.props.text/span> /button> );var HelloWorld = React.createClass( getInitialState: function() return counter: 0 ; , increment: function() this.setState( counter: this.state.counter++ ); , render: function() return div> div>this.state.counter/div> FancyButton text="Increment!" icon="fa-arrow-circle-o-up" onClick=this.increment /> /div>; );Ở trên đây ta đã trừu tượng hoá một button để tăng giá trị của một đổi mới đếm bằng cách định nghĩa nó trong một React class riêng biệt biệt. Phần này cũng màn trình diễn cho ta thấy làm các nào props rất có thể được gán trải qua các nested class.

Chú ý: vị "class" là 1 trong những key word bị giới hạn trong JavaScript, viết những class CSS vào HTML của React class được thực hiện bằng phương pháp sử dụng chiếc chữ "className". Bạn cũng có thể thấy điều đó khi tôi set CSS class đến icon làm việc trong FancyButtion.

User-built View Function

Có một vài function khác mà lại bạn cần phải biết khi viết các React view.

componentWillMount: Function này được gọi lúc một view được cung ứng trong view cha. Đây là 1 trong ứng viên giỏi để bạn tạo nên một vài ba thiết lập ban sơ cho view của mình, hoặc để móc nối vào các event handler. Nó cũng khá tiện lợi khi họ xây dựng theo kiến trúc Flux tại phần tới.componentWillUnmount: ngược lại với componentWillMount, nó được áp dụng khi view không quan trọng phải hotline ra sinh sống view cha nữa. Cũng tương đối tiện lợi nhằm móc nối cùng với các event handler.

Xem thêm: T-Shirt Là Gì ? Tất Tần Tật Về Áo T Áo Thun T Shirt Là Gì

Bạn hoàn toàn có thể xem danh sách không hề thiếu của các phương thức chúng ta có thể sử dụng tại React JS documentation.

Predefined View Functions

setState: Như đã nhắc đến ở trên, đây là phương thức bạn gọi để thiết lập state phía bên trong của React view. Nếu bạn thiết lập cấu hình state một giải pháp trực tiếp (ví dụ, this.state.foo = "bar") view của các bạn sẽ không được gọi. Hãy luôn luôn sử dụng setState (ví dụ, this.setState(foo: "bar").forceUpdate: Đây là một trong những phương thức tiện cho việc gọi cưỡng bách một view (force render). Nó tiện trong những trường hợp khi bạn đang cập nhật một vài ba biến phía bên trong view nhưng nó lại không đề xuất là props xuất xắc state.

Tôi sẽ giới thiệu cho bạn những điểm cơ phiên bản về React JS. Bây chừ chúng ta hãy mày mò kiến trúc Flux chuyển động như chũm nào và tiếp đến ta sẽ đưa tới áp dụng Todo.

Flux

Flux là một trong những kiến trúc được Facebook khuyến khích sử dụng như thể một phương pháp để lấy dữ liệu cho phía client xuất phát điểm từ 1 store hoặc remote server. Nó là 1 trong luồng tài liệu vô hướng. Ở level cao, một user khởi tạo ra một kích hoạt được view xử lý bằng cách gửi một request tài liệu tới store. Sau đó, store đó thực thi request với khi tài liệu được nhận, nó phạt ra một event thông báo với tất cả rằng nó sẽ nghe (listening). Những listener update view của chúng làm thế nào cho phù hợp. Sau đấy là các component chính:

View: View có trọng trách xử lý một action của user, như là lấy một danh sách các Todo item. Nó thao tác này bằng phương pháp gửi một request rước data trải qua dispatcher.Dispatcher: Dispatcher gồm hai trọng trách chính:Đăng cam kết một callback sau một dispatch. Một store sẽ đăng ký một callback cùng rất dispatcher để mọi khi có mỗi action được gửi đi, store sẽ được thông báo và rất có thể kiểm tra coi nó có quan trọng phải thực hiện action như thế nào không. Ví dụ, một TodoStore class đk với dispatcher rằng lúc nào có một action lấy các Todo được nhờ cất hộ tới, nó sẽ hiểu rằng cần phải bước đầu thực hiện câu hỏi lấy dữ liệu.Gửi các action cần được thực hiện. Một view giữ hộ một action để lấy dữ liệu trải qua method dispatch sống dispatcher. Mõi callback được đăng ký sử dụng key tương đương nhau đang được thông báo trên một dispatch. Phương thức dispatch cũng thường bao gồm mọi thông tin cần thiết về dung lượng, lấy một ví dụ nó cũng tương tự một ID khi rước một đoạn dữ liệu cụ thể nào đó.Store: Store cũng đều có hai nhiệm vụ:Hoạt rượu cồn khi có một lời hotline được gởi đến để lấy dữ liệu. Điều này được tiến hành thông qua việc đăng ký với dispatcher, thường xuyên là khi bắt đầu được tạo ra.Báo với các listener về sự đổi khác ở tài liệu của store sau khi các thao tác làm việc lấy, update hoặc chế tạo dữ liệu. Điều này được thực hiện bằng event emitter.Event Emitter : event emitter có trách nhiệm thông tin cho các subcriber sau khi một store xong xuôi một action đối với dữ liệu.

Dispatcher

Dispatcher có trách nhiệm nhận request từ view cho kích hoạt và nhờ cất hộ nó tới những store tương ứng. Mỗi store sẽ đăng ký với dispatcher để cảm nhận cập nhận khi một action được gửi. Constructor của một store đăng ký một callback cùng với dispatcher. Điều này có nghĩa là cứ mọi khi một kích hoạt được gởi đi, callback này sẽ tiến hành thực thi, cơ mà chỉ những action nào được tùy chỉnh thiết lập tương ứng cùng với dispatcher bắt đầu được thực thi. Hết sức may, React bower package cung cấp một class dispatcher cho chúng ta sử dụng, vì vậy ta không nhất thiết phải xây dựng gì trở ngại ở đây. Dispatcher là bước đầu tiên trong quá trình truy nhập tài liệu ở phía client.

Store

Store được sử dụng để lấy, update hoặc chế tạo dữ liệu mỗi khi action được thân tặng nó. Constructor của store vẫn móc nối với 1 function callback thông qua phương thức đăng ký của dispatcher, hỗ trợ một lối vào trong 1 chiều tới store. Store kế tiếp sẽ đánh giá để xem kích hoạt loại nào đã có gửi tới với nếu nó được chấp nhận ở store, cách tiến hành tương ứng sẽ tiến hành thực thi.

Ví dụ

Đây là một trong ví dụ nhanh về vấn đề Flux hoạt động như chũm nào ở 1 ứng dụng React sample.

var Count = React.createClass( getInitialState: function() return items: <> ; , componentWillMount: function() emitter.on("store-changed", function(items) this.setState( items: items ); .bind(this)); , componentDidMount: function() dispatcher.dispatch( type: "get-all-items" ); , render: function() var items = this.state.items; return div>items.length/div>; );var Store = function() dispatcher.register(function(payload) switch (payload.type) case: "get-all-items": this._all(); break; .bind(this)); this._all = function() $.get("/some/url", function(items) this._notify(items); .bind(this)); this._notify = function(items) emitter.emit("store-changed", items); );;var ItemStore = new Store();View dễ dàng của họ sẽ điện thoại tư vấn ra số lượng của các item vào một danh sách. Khi được hotline lên, nó móc nối vào sự kiện emitter để xem xem store biến hóa lúc nào, cùng sẽ gửi một request để lấy các Todo item. Khi request được gửi tới, nó tiến hành một ajax request nhanh và lúc nó tảo lại, nó vẫn báo cho tất cả các subcribers thông qua event emitter. Trở lại view, trang thái được update với list item mới và gọi ra view, hiển thị số đếm đã làm được cập nhật.

Ứng dụng Todo

*

Chúng ta đã thế được một vài kiến thức cơ bạn dạng về giải pháp viết React view và phong cách thiết kế Flux là gì, bây giờ ta sẽ tò mò về vận dụng Todo mà tôi đã tạo nên dành riêng cho nội dung bài viết này.

Views

Chúng ta hãy bắt đầu với main view. Ứng dụng này chỉ bao gồm một page duy nhất, đó chính là main view.

Todo

"use strict";var Todo = React.createClass( getInitialState: function() return todos: <> , componentWillMount: function() emitter.on(constants.changed, function(todos) this.setState( todos: todos ); .bind(this)); , componentDidMount: function() dispatcher.dispatch( type: constants.all ); , componentsWillUnmount: function() emitter.off(constants.all); , create: function() this.refs.create.show(); , renderList: function(complete) return danh mục todos=_.filter(this.state.todos, function(x) return x.isComplete === complete; ) />; , render: function() return div className="container"> div className="row"> div className="col-md-8"> h1>Todo List/h1> /div> div className="col-md-4"> button type="button" className="btn btn-primary pull-right spacing-top" onClick=this.create>New Task/button> /div> /div> div className="row"> div className="col-md-6"> h2 className="spacing-bottom">Incomplete/h2> this.renderList(false) /div> div className="col-md-6"> h2 className="spacing-bottom">Complete/h2> this.renderList(true) /div> /div> Modal ref="create" /> /div>; );Đây là main view Todo. Khi điện thoại tư vấn ra, nó đang gửi một request để đưa tất cả các item Todo. Nó cũng nối cho tới một change event giành riêng cho Todo store để dấn được thông báo mỗi lúc store nhà cửa được update sau khi request được nhờ cất hộ thành công. Tôi sử dụng một grid của Bootstrap nhằm hiển thị đa số item nghỉ ngơi trạng thái complete và incomplete. Gồm hai class khác vẫn chưa chỉ ra ở đây là List cùng Modal. `Class trước call ra list thực sự của các item với class sau áp dụng để thêm một thành tích mới.

*

List

var list = React.createClass( renderItems: function() return _.map(this.props.todos, function(todo) return thành tích todo=todo />; ); , render: function() return ul className="list-group"> this.renderItems() /ul>; );List view có nhiệm vụ gọi ra danh sách những item, cả nhiều loại complete với incomplete. Nó thực hiện class thành công để gọi những item.

Item

var thành công = React.createClass( toggle: function() this.props.todo.isComplete = !this.props.todo.isComplete; dispatcher.dispatch( type: constants.update, content: this.props.todo ); , render: function() return li className="list-group-item pointer" onClick=this.toggle>this.props.todo.name/li>; );Item class có trọng trách làm nhị việc: call item trong list và cập nhật trạng thái của một thành quả khi được bấm vào. Tag li gồm một handler onClick áp dụng phương thức toggle dùng để gửi một request update item thông qua dispatcher. Thành phầm được gửi gồm 2 quánh tính: type - sử dụng để chỉ tới tên event, và content - áp dụng để chỉ tới event payload, trong trường phù hợp này là chủ yếu Todo item.

Modal

var Modal = React.createClass( getInitialState: function() return value: "" ; , componentDidMount: function () this.$el = $(this.getDOMNode()); this.$el.on("hidden.bs.modal", this.reset); emitter.on(constants.changed, function() this.$el.modal("hide"); .bind(this)); , componentWillUnmount: function() emitter.off(constants.changed); , show: function () this.$el.modal("show"); , reset: function() this.setState( value: "" ); , save: function() dispatcher.dispatch( type: constants.create, content: name: this.state.value, isComplete: false ); , onChange: function(e) this.setState( value: e.target.value ); , render: function() return div className="modal fade" tabIndex="-1" role="dialog" aria-hidden="true"> div className="modal-dialog modal-sm"> div className="modal-content"> div className="modal-header"> button type="button" className="close" data-dismiss="modal"> span aria-hidden="true">×/span> span className="sr-only">Close/span> /button> h2 className="modal-title">New Task/h2> /div> div className="modal-body"> input đầu vào placeholder="Task name..." type="text" value=this.state.value onChange=this.onChange /> /div> div className="modal-footer">div className="row">div className="col col-md-12"> button type="button" className="btn btn-primary pull-right" onClick=this.save>Save/button> button type="button" className="btn btn-default pull-right spacing-right" onClick=this.reset data-dismiss="modal">Close/button>/div>/div> /div> /div> /div> /div>; );Modal class kha khá dài mẫu nhưng đa số trong sẽ là phần code tất cả sẵn của Bootstrap sẽ phải có mang lại modal dialog. Bởi đó họ chỉ cần thân thiết tới:

Text input: Text input đầu vào cung cấp cho những người dùng một vùng để nhập tên của thành phầm mới.Nút save: Nút save kích hoạt cách tiến hành save, nó nhờ cất hộ một action create với 1 để tùy chỉnh tên và chuyển trạng thái isComplete (mặc định là false)Nút reset: Nút reset kích hoạt phương thức reset, tùy chỉnh lại cực hiếm của đầu vào field để khi user mở ra dialog nó sẽ hiện ra một input đầu vào box rỗng.Store

Đây là store áp dụng để update những biến đổi của danh sách Todo.

var Store = function(url, constants) this._url = url; this._collection = <>; dispatcher.register(function(payload) switch (payload.type) case constants.all: this._all(); break; case constants.update: this._update(payload.content); break; case constants.create: this._create(payload.content); break; .bind(this)); this._all = function() $.get(this._url).then(function(data) this._collection = data; _notify.call(this); .bind(this)); .bind(this); this._update = function(content) var found = _.find(this._collection, function(x) return x.id === content.id; ); for (var name in found) found = content; $.post(this._url, found).then(function() _notify.call(this); .bind(this)); ; this._create = function(content) content.id = _.max(this._collection, function(x) return x.id; ).id + 1; this._collection.push(content); $.post(this._url + "/" + content.id).then(function() _notify.call(this); ); ; function _notify() emitter.emit(constants.changed, this._collection); ;var TodoStore = new Store("fixtures/todos.json", require("constants").todo);

Lời cuối

Nếu bạn có nhu cầu xem vận dụng Todo hoạt động như nỗ lực nào, hãy xem ở chỗ này và nếu như khách hàng có hào hứng tự mình hiểu source code, hãy xem tại chỗ này nhé. Xin cảm ơn!


Chuyên mục: Domain Hosting