Hướng dẫn building web app using react js express js node js and mongodb - xây dựng ứng dụng web bằng cách sử dụng react js express js node js và mongodb

Giới thiệu

Ngay bây giờ, tôi đã nghe một số điều rất thú vị về React.js giống như nó nhanh như thế nào và sẽ tuyệt vời như thế nào khi chọn React.js cho dự án web tiếp theo của bạn. Tất cả những điều đó nghe có vẻ rất tốt, nhưng trừ khi chúng tôi tự mình thử nó, chúng tôi đã giành chiến thắng để có thể chấp nhận nó. Vì vậy, tôi quyết định chơi với React.js trong một thời gian và thấy bản thân những tuyên bố này chính xác như thế nào. Bây giờ chỉ có một vấn đề, tài liệu React.js giả định mức độ kinh nghiệm nhất định với quy trình phát triển JavaScript hiện đại, nói ngắn gọn, hãy nói rằng nó không hữu ích lắm nếu bạn đang cố gắng sử dụng nó lần đầu tiên. Loạt bài viết này là nỗ lực của tôi để đặt tất cả các phần lại với nhau và hiển thị những gì nó sẽ cần để xây dựng một ứng dụng React đầy đủ chức năng.

Trong loạt bài viết này, chúng tôi sẽ tạo ra một ứng dụng JavaScript đơn đầy đủ từ đầu. Trong phần 1 của loạt bài này, chúng tôi sẽ tập trung hoàn toàn vào quy trình làm việc của React.js và tạo phần đầu tiên của ứng dụng mà không cần bất kỳ API hoặc cơ sở dữ liệu phụ trợ nào. Trong Phần 2, chúng tôi sẽ tạo phần phụ trợ cho ứng dụng của chúng tôi bằng Express.js và cũng tồn tại dữ liệu của chúng tôi trong MongoDB.

Điều kiện tiên quyết

Để tận dụng tối đa bài viết này, tôi sẽ đề nghị bạn theo dõi. Một số quen thuộc với Node.js là bắt buộc, nhưng không có kiến ​​thức trước về React.js hoặc Express.js được mong đợi. Bạn cần phải cài đặt nút trong máy của bạn, mọi thứ khác chúng tôi sẽ cài đặt khi chúng tôi tiến triển.

Vì vậy, hãy để không lãng phí thêm thời gian nữa, mở trình chỉnh sửa mã yêu thích của bạn, và nhảy ngay vào mã:

Thiết lập dự án

Giống như tất cả các ứng dụng nút xuất sắc ngoài kia, Story luôn bắt đầu với NPM, đó là hệ thống quản lý gói cho nền tảng Node.js. Vì vậy, hãy nhanh chóng nhập các lệnh sau trong shell của bạn:

npm install -g gulp bower nodemon

Lệnh này sẽ cài đặt ba tiện ích nút rất hữu ích. Gulp là một vận động viên nhiệm vụ mà chúng tôi sẽ sử dụng để giúp chúng tôi dễ dàng hơn với một số tự động hóa cho các tác vụ quy trình công việc trần tục, Bower là người quản lý gói cho các thư viện phía trước khác nhau như bootstrap, jquery, v.v. Đây chỉ là một cách tốt hơn để cài đặt các thư viện này trong Ứng dụng trái ngược với việc tải xuống chúng bằng tay. Chúng tôi cũng sẽ sử dụng NodeMon, để tự động khởi động lại ứng dụng máy chủ của mình bất cứ khi nào thay đổi mã.Gulp is a task runner which we will use to make our like easier with some automation for mundane workflow tasks, Bower is a package manager for various front end libraries like bootstrap, jquery etc. this is just a nicer way of installing these libraries in your app as opposed to downloading them manually. We will also use “nodemon” to automatically restart our server application whenever a code change happens.

Tiếp theo, hãy để tạo một thư mục mới sạch và khởi tạo nó bằng các lệnh sau:

MKDIR School-Finder NPM init Bower init

Tôi đã đặt tên cho thư mục của tôi là người đi học ở trường và tôi sẽ tiếp tục gọi đây là thư mục gốc trong suốt bài viết này, Điểm bạn sẽ có các tệp của Gói Gói. Bây giờ, hãy để cài đặt các mô -đun nút sau mà chúng ta sẽ sử dụng:

npm install --save browserify reactify vinyl-source-stream gulp react react-dom express guid

Nếu danh sách trên có vẻ quá dài và khó hiểu thì đừng lo lắng, chúng tôi đang sử dụng trình duyệt để chúng tôi có thể sử dụng mẫu mô -đun của Node Like CommonJS để thêm các tham chiếu đến các thư viện khác nhau trái ngược với việc thêm thẻ tập lệnh vào các trang HTML. Reactify là có để chuyển JSX sang JavaScript. JSX là XML giống như cú pháp JavaScript phản ứng sử dụng, bạn sẽ hiểu chính xác những gì tôi đang nói khi bạn đã viết một số mã JSX. Bạn có thể tìm thêm thông tin về các mô -đun này trong trang web NPM, vì mục đích và mục đích của chúng tôi, hãy để cho rằng những điều này là cần thiết.browserify so that we can use node like CommonJs module pattern to add references to various libraries as opposed to adding script tags in html pages. reactify is there to transpile JSX to javascript. JSX is xml like JavaScript syntax which react usage, you will understand exactly what I am saying once you have written some JSX code. You can find more information about these modules in npm website, for our intent and purposes let’s assume these are needed.

Bây giờ, hãy tạo thêm hai thư mục bên trong thư mục gốc, ứng dụng trực tuyến và máy chủ, bên trong thư mục của ứng dụng trên mạng. Don Tiết lo lắng về các tên thư mục quá nhiều, tôi sẽ giải thích những gì mỗi thư mục sẽ chứa khi chúng tôi đến đó. Tiếp theo, thêm hai tệp sau.

{Thư mục trực tuyến“directory”:“app/lib” }

Mã trên định cấu hình thư mục nơi Bower sẽ cài đặt các thư viện. Một điều cuối cùng chúng ta cần làm là thêm tham chiếu đến thư viện Bootstrap, chúng ta cần có một số kiểu dáng cơ bản trong ứng dụng của mình để làm cho nó trông đẹp, vì vậy hãy để Lệnh chạy theo lệnh:

bower install --save bootstrap-css

Chà, có vẻ như rất nhiều công việc, ngay cả khi không viết một dòng mã phản ứng nào mà chúng tôi có rất nhiều trong dự án của chúng tôi, nhưng hãy tin tôi rằng nó rất đáng để thực hiện tất cả các thiết lập này. Bây giờ, hãy để bắt đầu viết một số mã.

Dòng đầu tiên của mã

Hãy để thêm một tệp mới trong thư mục của máy chủ trên mạng trong tên Foler Foler Server.js, mà bạn có thể đoán được bây giờ, sẽ chứa các ứng dụng của chúng tôi. Nhưng chờ đã! Có phải chúng tôi quyết định chỉ tập trung vào mã đầu tiên ở đây? Vâng, chúng tôi vẫn đang gắn bó với cùng một kế hoạch, chúng tôi chỉ cần đủ mã phụ trợ để chúng tôi đi. Vì vậy, hãy để thêm mã sau trong tệp server.js

var express = require("express");
var path = require("path");

var app = express();
app.use(express.static(path.join(__dirname,"../app/dist")));
app.listen(7777,function(){
    console.log("Started listening on port", 7777);
})

So above piece of code creates an express app which listens to http requests on port 7777. It also configures express to serve static content like html, css, images etc. from school-finder/app/dist directory. Next let's add "index.html" ,"style.css"and "main.jsx" files in "app" folder and edit index.html as shown below:

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>School Finder</title>
    <link href="bootstrap.min.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
</head>

<body>
    <div class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">School Finder</a>
            </div>
        </div>
    </div>
    <div id="container" class="container"></div>
    <script src="main.js">
</body>

</html>

Bây giờ khởi chạy ứng dụng của bạn bằng lệnh sau và duyệt http: // localhost: 7777/index.html

Nodemon. \ Server \ Server.js

Tại thời điểm này, nếu các công cụ phát triển của bạn trong trình duyệt của bạn, bạn sẽ nhận được 404 lỗi cho một vài tài nguyên. Bạn có thấy điều đó sắp tới không? Hãy để nhanh chóng khắc phục điều đó, editgulpfile.js, mà chúng tôi đã thêm trước đây, như được hiển thị bên dưới:

var gulp = require("gulp");
var browserify = require("browserify");
var reactify = require("reactify");
var source = require("vinyl-source-stream");

gulp.task("bundle", function () {
    return browserify({
        entries: "./app/main.jsx",
        debug: true
    }).transform(reactify)
        .bundle()
        .pipe(source("main.js"))
        .pipe(gulp.dest("app/dist"))
});

gulp.task("copy", ["bundle"], function () {
    return gulp.src(["app/index.html","app/lib/bootstrap-css/css/bootstrap.min.css","app/style.css"])
        .pipe(gulp.dest("app/dist"));
});

gulp.task("default",["copy"],function(){
   console.log("Gulp completed..."); 
});

Trong gulpfile của chúng tôi, chúng tôi đã tạo ra hai nhiệm vụ,

a) Gói nhiệm vụ, lấy tệp Main Main.jsx, hiện đang trống, chuyển mã JSX sang JavaScript đơn giản bằng cách sử dụng phản ứng của Hồi giáo sau đó phát trực tuyến các nguồn bằng cách sử dụng tệp vinyl-source-stream, tạo thêm tệp Main Main.js trên Bay trong thư mục của Dist Dist với mã JS đã được truyền trong đó. Task bundle, takes “main.jsx” file, which is currently empty, transpils jsx code to plain javascript using “reactify” then stream sources it using “vinyl-source-stream” further creates “main.js” file on the fly in “dist” directory with transpiled js code in it.

b) Bản sao tác vụ, & nbsp; & nbsp; lấy index.html, bootstrap.min.css và style.css files tệp và sao chép chúng vào thư mục của Dist Dist.Task copy,  takes index.html, bootstrap.min.css and style.css files files and copies them to “dist” folder.

Bây giờ đi đến Command Shell và chạy lệnh Gulp Gulp, sau đó làm mới trang trong trình duyệt. Kiểm tra công cụ dành cho nhà phát triển trình duyệt và nếu mọi thứ đã đúng đến nay, bạn không nên thấy bất kỳ lỗi 404 nào.

Xin chào từ React

Tôi biết bạn đang trở nên thiếu kiên nhẫn bằng cách nghĩ rằng rất nhiều công việc và thậm chí không một dòng mã phản ứng nào, nhưng hãy nhớ rằng chúng tôi đang cố gắng có được trải nghiệm trong thế giới thực với sự phát triển của React.js, vì vậy hãy tiếp tục di chuyển. Hãy để thêm hai tập tin trống, Trường học

SchoolInfo.jsx

var React = require("react");

module.exports = React.createClass({
    render:function(){
        return(

{this.props.info.name}

{this.props.info.tagline}

)}})

 SchoolsList.jsx

var React = require("react");
var SchoolInfo = require("./SchoolInfo.jsx")

module.exports = React.createClass({
   render:function(){
       return(

// Chúng tôi sẽ thêm chức năng ADDSCHOOL tại đây

{this.props.schools.map (function (s, index) {return ()})}

)}});

Có một vài điểm quan trọng để làm nổi bật,

a) Chúng tôi có thể sử dụng các cấu trúc yêu cầu trên mạng ở đây để thêm các tài liệu tham khảo mặc dù các trình duyệt không hỗ trợ cấu trúc đó, bởi vì chúng tôi sẽ không thêm các tài liệu tham khảo này vào các tệp HTML của chúng tôi thay vì Nhiệm vụ của Gulp sẽ giải quyết các phụ thuộc này và gói tất cả chúng lại với nhau trong tệp Main Main.js. We are able to use “require” constructs here in order to add references even though browsers do not support that construct, because we will not be adding these files references to our html files directly rather “browserify” library which we have configured as gulp task will resolve these dependencies and bundle all of them together in “main.js” file.

B) Các ứng dụng React được xây dựng bằng các chất đồng hành phản ứng, bạn có thể nghĩ về các thành phần là các mẫu khép kín có chức năng được gói trong chính mẫu, mặc dù những người theo chủ nghĩa thuần túy sẽ không đồng ý với định nghĩa này, tôi đang đề xuất nó vì sự đơn giản. Chúng tôi tạo một thành phần React bằng cách sử dụng Phương pháp React.CreateClassReact applications are built using react coponents, you can think of components as self contained templates with functionality bundled within the template itself, although react purists will not agree with this definition, I am proposing it for the simplicity sake. We create a react component by using React.createClass method

c) Cú pháp tìm kiếm Wierd trong hàm kết xuất được gọi là JSX, Reactify, mà chúng tôi đã cấu hình trong tác vụ gói, Trasnpiles mã JSX này thành mã JS mà trình duyệt hiểu. Bạn có thể viết biểu thức JavaScript trong dấu ngoặc xoăn {}, mà bộ chuyển đổi JSX đã nội suy trong khi phát ra mã JavaScript.The wierd looking syntax within the render function is called JSX, “reactify” which we have configured in the bundle task, trasnpiles this JSX code to JS code which browsers understand. You can write JavaScript expression within curly brackets “{}” which JSX transpiler interpolates while emitting JavaScript code.

d) & nbsp; Khi bạn đã tạo thành phần React, bạn có thể hiển thị thành phần đó bên trong một thành phần phản ứng khác bằng cách sử dụng cú pháp thẻ quen thuộc, ví dụ chúng tôi đã hiển thị thành phần SchoolInfo bên trong thành phần Schoollist bằng cách sử dụng thẻ.Once you have created a react component, you can render that component inside another react component using familiar tag syntax, for example we have rendered SchoolInfo component inside SchoolList component using tag.

e) & nbsp; Khi bạn cần truyền một số dữ liệu cho một thành phần, bạn có thể làm như vậy bởi & nbsp; chuyển các đối tượng làm giá trị cho các thuộc tính thành phần trong khi hiển thị nó. Bất cứ điều gì bạn vượt qua trong các thuộc tính của thành phần sẽ có thể truy cập được trong thành phần dưới dạng thuộc tính của đối tượng này. Ví dụ: trong khi kết xuất thành phần Schoolinfo trong Schoollist, bạn vượt qua đối tượng của trường trong thuộc tính thông tin trên mạng, mà bạn có thể truy cập trong thành phần của trường học bằng cách này.props.info.When you need to pass some data to a component, you can do so by  passing objects as value to components attributes while rendering it. Whatever you pass in component’s attributes will be accessible within component in the form of a property of this.props Object. For example, while rendering SchoolInfo component in SchoolList, you pass school object in “info” attribute, which you can access in SchoolInfo component by this.props.info.

Bây giờ hãy mở tệp Main Main.jsx, trống cho đến nay và chỉnh sửa nó như hiển thị bên dưới:

var React = require("react");
var ReactDOM = require("react-dom");
var SchoolsList = require("./components/SchoolsList.jsx");

var _schools = [{name:"Lovedale",tagline:"this is a wonderful school"},
                {name:"Bishop",tagline:"Another great school"}];
                
function render(){
    ReactDOM.render(, document.getElementById("container"));    
}
render();

Lưu ý chức năng Reactdom.Render, điều này thực sự làm cho React Componet của chúng tôi vào danh sách trường học của chúng tôi trong Index.html Tệp Phần tử Div Div với ID container. Tham số thứ hai của chức năng Reactdom.Render có một phần tử HTML hoạt động giống như một điểm gắn kết cho toàn bộ ứng dụng React của chúng tôi. Lệnh một lần nữa từ vỏ lệnh và làm mới trang và ở đây bạn có ứng dụng Hello World React.

Phản ứng kiến ​​trúc thông lượng

Bạn phải suy nghĩ nếu chúng ta sẽ xây dựng toàn bộ một ứng dụng không tầm thường trong tự nhiên với tất cả các thành phần này, tôi sẽ đi bao xa? Tôi sẽ đặt trình xử lý sự kiện ở đâu, tất cả các cuộc gọi API còn lại? Kiến trúc ứng dụng của tôi sẽ trông như thế nào? Vâng, có một câu trả lời cho tất cả các câu hỏi của bạn phản ứng kiến ​​trúc thông lượng.

React Flux là một trình điều khiển lập trình cho các ứng dụng React mà việc sử dụng Facebook trong nội bộ. Flux chỉ đảm bảo luồng dữ liệu đơn hướng trong suốt vòng đời ứng dụng của bạn. Flux có các tác nhân sau để giữ cho dòng chảy thông lượng tích tắc:

1. Hành động: Đây là các tải trọng với một số dữ liệu và một số ngữ cảnh (loại) trong các đối tượng ngắn, chúng được tạo bởi một số chức năng của người trợ giúp do kết quả của một hoạt động trong chế độ xem (chủ yếu). Ví dụ: khi người dùng nhấp vào nút Thêm, chúng tôi sẽ tạo một hành động sẽ chứa thông tin được thêm vào và bối cảnh. Tất cả các hành động được gửi đến người phân tán. these are the payloads with some data and some context (type) in short objects, these are created by some helper functions as a result of an activity in the view(mostly). For example when user clicks on an add button, we will create an action which will contain infomation to be added and the context. All actions are sent to the dispacher.

2. Bộ điều phối: Người điều phối hoạt động như một trung tâm toàn cầu kích hoạt tất cả người nghe đã đưa ra bất cứ khi nào một hành động được gửi đến nó. dispatcher works like a global hub which triggers all the listeners rgistered to it whenever an action is sent to it.

3. Cửa hàng: Cửa hàng tự đăng ký với người điều phối, khi người điều phối phát sóng hành động đến, các cửa hàng tự cập nhật nếu hành động đó có liên quan đến các cửa hàng đó và phát ra sự kiện thay đổi khiến UI được cập nhật. stores register themselves with dispatchers, when dispatcher broadcasts an actions arrival, stores update themselves if that action is relavant to those stores, and emit a change event which causes UI to get updated.

4. Lượt xem: Lượt xem là các thành phần hiển thị HTML.Views are the html rendered components.

Hãy để Lừa & NBSP; Thực hiện thông lượng trong ứng dụng của chúng tôi và nó sẽ trở nên rõ ràng hơn một chút:

Tạo một người điều phối

Trong các ứng dụng sản xuất của bạn, bạn có thể chọn sử dụng thư viện thông lượng mạnh mẽ nhưng đối với bài viết này, hãy để Lôi tạo người điều phối đơn giản của riêng chúng tôi để chúng ta có thể thấy chính xác nó hoạt động như thế nào. Vì vậy, thêm một tệp mới, bộ điều phối.

var Guid = require("guid");

var listeners = {};

function dispatch(payload) {
    for (var id in listeners) {
        listeners[id](payload);
    }
}

function register(cb) {
    var id = Guid.create();
    listeners[id] = cb;
}

module.exports = {
    register: register,
    dispatch: dispatch
}

Chúng tôi sẽ duy trì tất cả những người nghe đã đăng ký trong người nghe & nbsp; đối tượng. Bất cứ ai quan tâm đến việc đăng ký cho người điều phối đều có thể sử dụng phương thức đăng ký, mặt khác, những người trợ giúp hành động bên khác sẽ gọi công văn mehtod của người điều phối để phát một hành động.

Tạo người trợ giúp hành động

Tiếp theo, hãy để thêm một tệp mới.

var Dispatcher = Yêu cầu (Hồi ../ Bộ điều phối); module.exports = {addschool: function (trường học) {Dispatcher.Dispatch ({trường: trường, loại: Trường học: addschool,}); }, DeletesChool: function (trường học) {Dispatcher.Dispatch ({trường học: trường học, loại: Trường học: DeletesChool,}); }} dispatcher = require(“../dispatcher”); module.exports = { addSchool:function(school){ dispatcher.dispatch({ school:school, type:“school:addSchool” }); }, deleteSchool:function(school){ dispatcher.dispatch({ school:school, type:“school:deleteSchool” }); } }

Như bạn có thể thấy có hai hành động trong người trợ giúp hành động của chúng tôi, addschool và deleteschool & nbsp ;. Cả hai hành động đều có thông tin dưới dạng đối tượng trường học và sau đó thêm một bối cảnh vào nó dưới dạng thuộc tính loại cho biết hành động nào sẽ được thực hiện trên mục nào. Bất cứ khi nào một phương thức hành động được gọi (sẽ từ chế độ xem), nó sẽ gọi phương thức điều phối của người điều phối với tải trọng.

Tạo cửa hàng

Bây giờ là lúc để triển khai cửa hàng của chúng tôi, vì vậy, hãy để thêm tệp của các trường học trên các cửa hàng trên các cửa hàng và thay đổi mã của nó như hiển thị bên dưới:

npm install --save browserify reactify vinyl-source-stream gulp react react-dom express guid

Trong triển khai cửa hàng của chúng tôi, hãy xem cuộc gọi phương thức điều phối.Register, đây là nơi cửa hàng đăng ký với người điều phối. Khi người điều phối phát sóng một hành động, cửa hàng đã đăng ký gọi lại được gọi là nơi nó kiểm tra thông tin loại tải trọng và quyết định một hành động thích hợp cho dù nó có thêm trường học hay xóa trường trong trường hợp của chúng tôi không.

Cũng lưu ý rằng sau khi thực hiện hành động thích hợp để đối phó với cuộc gọi của người điều phối, cửa hàng gọi TriggerListeners, đây là phần cuối cùng của câu đố mang lại cho UI Renderer một cơ hội để cập nhật giao diện người dùng bằng cách gọi tất cả các thuê bao của sự kiện Onchange Store.

Bây giờ, hãy để cập nhật tệp Main Main.jsx, để nó kết nối với cửa hàng của chúng tôi thay vì hiển thị dữ liệu giả.

npm install --save browserify reactify vinyl-source-stream gulp react react-dom express guid

Bạn có thể chạy lại Gulp và sau khi làm mới trang, bạn sẽ thấy dữ liệu mới xuất hiện trên màn hình.

Thêm hành vi vào các thành phần

Hãy để ứng dụng của chúng tôi hữu ích hơn một chút bằng cách thêm chức năng Thêm và xóa chức năng vào nó. Chúng tôi sẽ tạo một thành phần React khác, vì vậy, hãy để thêm tệp add addschool.jsx trong thư mục của các thành phần và thêm mã sau trong đó:

npm install --save browserify reactify vinyl-source-stream gulp react react-dom express guid

Tên trường:

Tagline:

Thêm trường học

)}})

Thành phần này có một số cú pháp mới, vì vậy hãy để nhanh chóng xem lại.

1) & nbsp; Bạn có thể thêm nhiều chức năng như bạn muốn trong đối tượng tham số CreateClass. We have added a form onSubmit handler “addSchool”. You can add as many functions as you like within createClass parameter object.

2) Giống như chúng tôi chuyển dữ liệu bên ngoài cho các thành phần React thông qua các thuộc tính và chúng tôi truy cập dữ liệu này bằng đối tượng này. Tất cả các thành phần phản ứng đều có trạng thái nội bộ của riêng chúng và trước khi chúng ta có thể sử dụng nó, chúng ta cần khởi tạo nó bằng getinitialstate & nbsp; function. Đây là một chức năng đặc biệt và đối tượng nó trả về trở thành trạng thái ban đầu của các thành phần của chúng tôi.Like we pass external data to a react components via attributes and we access this data by this.props object similar to that we can access internal state of our componet by this.state object. All react componets have their own internal state, and before we can use it, we need to initialize it by getInitialState function. This is a special function and the object it returns becomes the initial state of our components.

3) & nbsp; như tôi đã đề cập trước đó, React không hỗ trợ liên kết hai chiều vì vậy chúng tôi cần thay đổi trạng thái bất cứ khi nào chúng tôi cảm thấy có liên quan, ví dụ như trong trường hợp của chúng tôi bất cứ khi nào người dùng nhập một số giá trị trong mẫu điều khiển chúng tôi cập nhật Trạng thái bằng cách sử dụng chức năng của tay cầm xử lýChange & nbsp; được kích hoạt từ trình xử lý sự kiện Onchange. Lưu ý rằng chúng tôi đã sử dụng e.preventdefault () trong các trình xử lý sự kiện để tránh làm mới trang.Like I have mentioned earlier, react does not support two-way-binding so we need to change the state ourself whenever we feel it’s relevant, for example in our case whenever user enters some values in the form controls we update the state using handleInputChange function which get’s triggered from onChange event handler. Notice we have used e.preventDefault() in event handlers to avoid page refresh.

4) & nbsp; Khi người dùng nhấp vào nút Thêm trường học, trong trình xử lý sự kiện, chúng tôi bắt đầu luồng thông lượng như trong sơ đồ sau:When user clicks on “Add School” button, in the submit event handler we start the FLUX flow as shown in the following diagram:

& nbsp; 5) Từ người xử lý sự kiện, chúng tôi gọi là Action Helper, tạo ra một hành động và gọi người điều phối. Người điều phối phát sóng hành động và vì cửa hàng được đăng ký vào hành động đó, nó tự cập nhật và hiển thị giao diện người dùng. Đó chính xác là dòng chảy thông lượng.From Event handler we call action helper, which create an action and calls dispatcher. Dispatcher broadcasts the action and since store is subscribed to that action it updates itself and renders the UI. That is precisely the FLUX flow.

Bây giờ, hãy để bản cập nhật của các trường học trên mạng.:

npm install --save browserify reactify vinyl-source-stream gulp react react-dom express guid

{this.props.schools.map (function (s, index) {return ()})}

)}});

Ngoài ra, hãy để cập nhật bản cập nhật của trường seatherinfo.jsx, để thêm chức năng xóa như hình dưới đây:

npm install --save browserify reactify vinyl-source-stream gulp react react-dom express guid

{this.props.info.name} ×

{this.props.info.tagline}

)}})

Bây giờ hãy chạy lệnh gulp & nbsp; lại và làm mới trang và chúng tôi có một ứng dụng phản ứng đầy đủ chức năng đang chạy. Hãy thử thêm/xóa trường học và nó sẽ hoạt động tốt.

Vì vậy, bây giờ chúng tôi đã hoàn thành phần đầu của ứng dụng của chúng tôi, tuy nhiên ứng dụng của chúng tôi có vấn đề, nếu bạn làm mới trang, tất cả các trường mới bạn đã thêm hoặc xóa, biến mất. Điều này là do chúng tôi chưa tồn tại bất kỳ thông tin nào.

Trong phần tiếp theo của loạt bài này, chúng tôi sẽ tạo phần phụ trợ cho ứng dụng này và chúng tôi cũng sẽ xem lại mã đầu tiên của chúng tôi để thực hiện các cuộc gọi API REST.

Bản tóm tắt

Nếu bạn đã dung thứ cho bài viết đến nay thì điều đó có nghĩa là bạn muốn học React. Tôi đã tham gia mã mẫu với bài viết này và tôi khuyến khích bạn tải xuống và tham khảo nó, trong trường hợp bạn phải đối mặt với bất kỳ vấn đề nào sau đây. Thực hiện theo các bước này để chạy mẫu:

1. Tải xuống và giải nén 2. Điều hướng đến thư mục gốc của ứng dụng được trích xuất trong lệnh lệnh của bạn 3. Chạy NPM Cài đặt 4. Chạy Bower Cài đặt 5. Chạy Gulp 6. Chạy Nodemon. \ Server \ Server.js
2. Navigate to the root directory of the extracted app in your command shell
3. Run npm install
4. Run bower install
5. Run gulp
6. Run nodemon .\server\server.js

Tôi có thể sử dụng Js Express JS với React không?

Có thể phản ứng và nodejs làm việc cùng nhau?

Làm cách nào để liên kết nút Reactjs của tôi JS và MongoDB?

Làm thế nào để bạn kết nối MongoDB với React và Express?