Tạo Ứng dụng Blog bằng React, Phần 1: Đăng nhập Người dùng

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong loạt bài hướng dẫn này, bạn sẽ được làm quen với việc tạo một ứng dụng blog bằng React. Xuyên suốt loạt bài này, bạn sẽ hướng sự tập trung vào React để phát triển giao diện người dùng của ứng dụng. Bạn sẽ sử dụng Node.js cho phía máy chủ của ứng dụng.

Trong hướng dẫn này, bạn sẽ thấy cách cài đặt giao diện người dùng và back-end để đăng ký và đăng nhập người dùng.

Bắt đầu

Tạo một thư mục dự án gọi là ReactNodeApp. Điều hướng đến thư mục dự án và khởi tạo dựa án node.

npm init

Điền các thông tin cần thiết vào và bạn sẽ có được tập tin package.json. Nó sẽ như sau:

{
  "name": "react-node-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "roy",
  "license": "MIT"
}

Bạn sẽ sử dụng framework Express để làm máy chủ cho ứng dụng của bạn. Cài đặt Express bằng lệnh sau đây:

1	npm install express --save

Sử dụng framework Express, hãy tạo cho ứng dụng của chúng ta lắng nghe trên một cái cổng. Bên trong thư mục dự án, hãy tạo tập tin có tên là app.js. Yêu cầu (require )mô-đun Express bên trong app.js và tạo một ứng dụng. Thiết lập đường dẫn tĩnh của ứng dụng nơi nó có thể tìm thấy các tập tin tĩnh. Nó trông như sau:

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

var app = express();
app.use(express.static(path.join(__dirname,"/html")));

Chỉ định số cổng để ứng dụng lắng nghe. Thêm code sau đây để tạo ra một máy chủ:

1	app.listen(7777,function(){
2	console.log("Started listening on port", 7777);
3	})

Bên trong thư mục dự án, tạo một thư mục có tên là html. Bên trong thư mục html, tạo một tập tin có tên là index.html. Thêm code sau đây vào index.html:

<html>

<head></head>

<body>
    <div>
        Hello World
    </div>
</body>

</html>

Lưu các thay đổi ở trên và khởi động máy chủ bằng lệnh sau:

1	node app.js

Truy cập vào http://localhost:7777/index.html và bạn sẽ có thể nhìn thấy trang index.html.

Tạo View Đăng nhập

Bạn sẽ sử dụng bootstrap để tạo ra giao diện người dùng. Hãy tải về và bao gồm bootstrap trong index.html.

1	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Thêm các thư viện React cần thiết vào index.html.

1	<script src="https://fb.me/react-15.1.0.js"></script>
2	<script src="https://fb.me/react-dom-15.1.0.js"></script>

Bạn sẽ tạo ra view bằng JSX. Nếu bạn không rõ về JSX, tôi khuyên bạn nên đọc một hướng dẫn giới thiệu về React và JSX.

Để chuyển đổi code JSX sang JavaScript, bạn sẽ cần babel, một trình biên dịch JavaScript. Hãy bao gồm babel trong index.html.

1	<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Tạo một tập tin đặt tên là main.jsx bên trong thư mục html. Tập tin này sẽ chứa các thành phần React UI.

Hãy tạo một thành phần React mới gọi là Signin bên trong tập tin main.jsx.

1	class Signin extends React.Component {
2
3	}

Thêm một phương thức render bên trong thành phần Signin dùng để hiển thị giao diện người dùng cho thành phần Signin của chúng ta.

class Signin extends React.Component {
    render() {
        return (
      	<form className="form-signin">
                <h2 className="form-signin-heading"> Please sign in </h2>
                <label for="inputEmail" className="sr-only"> Email address
                </label>
                <input type="email" id="inputEmail" className="form-control" placeholder="Email address" required autofocus />
                <label for="inputPassword" className="sr-only"> Password</label>
                <input type="password" id="inputPassword" className="form-control" placeholder="Password" required />
                <button className="btn btn-lg btn-primary btn-block" type="button"> Sign in
                </button>
            </form>
        )
    }
}

Trong đoạn code ở trên, nó là HTML, chỉ có một sự khác biệt. Thuộc tính class đã được thay bằng className khi được sử dụng trong JSX.

Thành phần Signin, khi được hiển thị, sẽ hiển thị code HTML bên trong phương thức render.

Thêm một thẻ div trong trang index.html nơi bạn sẽ kết xuất thành phần Signin.

1	<div id="app" class="container">
2	</div>

Kết xuất thành phần Signin bên trong div .container trong index.html.

1	ReactDOM.render( <
2	Signin / > ,
3	document.getElementById('app')
4	);

Lưu các thay đổi ở trên và khởi động lại máy chủ node. Truy cập vào http://localhost:7777/index.html và bạn sẽ có thể nhìn thấy màn hình đăng nhập.

Cài đặt Đăng nhập Người dùng

Để cài đặt quá trình đăng nhập, bạn cần phải xử lý sự kiện onChange của input và giữ các giá trị của text box trong một biến state. Khi người dùng nhấp vào cái nút, bạn sẽ sử dụng biến state để đọc các giá trị email và mật khẩu ở trong text box. Vì vậy, hãy thêm sự kiện onChange vào các text box:

1	<label for="inputEmail" className="sr-only">Email address</label>
2	<input type="email" onChange={this.handleEmailChange} id="inputEmail" className="form-control" placeholder="Email address" required autofocus />
3	<label for="inputPassword" className="sr-only">Password</label>
4	<input type="password" onChange={this.handlePasswordChange} id="inputPassword" className="form-control" placeholder="Password" required />

Định nghĩa sự kiện onChange trong thành phần Signin:

handleEmailChange(e){
    this.setState({email:e.target.value})
}
handlePasswordChange(e){
    this.setState({password:e.target.value})
}

Liên kết các sự kiện được định nghĩa ở trên và các biến state ở trong phương thức constructor của thành phần:

constructor(props) {
    super(props);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.state = {
      email:'',
      password:''
    };
}

Định nghĩa một phương thức onClick mà bạn sẽ gọi khi nhấp vào cái nút.

1	signIn(){
2	alert('Email address is ' + this.state.email + ' Password is ' + this.state.password);
3	}

Thêm sự kiện onClick vào nút Signin.

1	<button className="btn btn-lg btn-primary btn-block" onClick={this.signIn} type="button">Sign in</button>

Lưu các thay đổi ở trên và khởi động lại máy chủ node. Truy cập vào http://localhost:7777/index.html. Nhập địa chỉ email và mật khẩu và nhấp vào nút Sign In, và bạn sẽ có thể nhìn thấy email và mật khẩu bật lên.

Post dữ liệu từ React đến dịch vụ Node

Một khi bạn đã có dữ liệu ở phía client, bạn cần post dữ liệu đó lên phương phức server của Node.js để xác thực việc đăng nhập của người dùng. Để post dữ liệu, bạn sẽ sử dụng một thư viện khác gọi là axios. Axios là một promise-based HTTP client cho trình duyệt và Node.js. Hãy bao gồm axios trong index.html.

1	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Bên trong phương thức signin ở trong tập tin main.jsx, hãy thêm dòng code sau đây để tạo một yêu cầu post.

axios.post('/signin', {
  email: this.state.email,
  password: this.state.password
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

Code dùng để tạo một yêu cầu post đến phương thức /signin với các tham số như được minh hoạ. Một khi yêu cầu thành công, promise được phân giải trong callback then. Nếu có lỗi, phản hồi được lưu lại trong callback catch.

Hãy tạo một phương thức signin ở trên phía Node.js để xác thực quá trình đăng nhập người dùng. Trong tập tin app.js, hãy tạo một phương thức gọi là signin.

1	app.post('/signin', function (req, res) {
2
3	})

Bạn sẽ sử dụng mô-đun body-parser để phân tích yêu cầu được post từ React client. Cài đặt mô-đun body-parser trong dự án.

1	npm install body-parser --save

Yêu cầu (require) mô-đun body-parser bên trong tập tin app.js.

1	var bodyParser = require("body-parser");

Thêm dòng code sau đây để bật tính năng phân tích JSON.

1	app.use(bodyParser.json());

Bên trong phương thức signin, bạn có thể phân tích yêu cầu như sau:

1	var user_name=req.body.email;
2	var password=req.body.password;

Sửa đổi phương thức signin như minh hoạ để xác thực người dùng đăng nhập.

app.post('/signin', function (req, res) {
  var user_name=req.body.email;
  var password=req.body.password;
  if(user_name=='admin' && password=='admin'){
      res.send('success');
  }
  else{
  	res.send('Failure');
  }
})

Hiện tại, các thông tin về người dùng đã được lưu sẵn trong code. Bạn có thể thay thế điều này bằng dịch vụ thích hợp theo ý của bạn.

Một khi các tham số đã được phân tích, chúng sẽ được xác thực với các thông tin cho trước. Nếu đúng, một thông báo thành công được trả về, nếu không một thông báo lỗi sẽ được trả về.

Lưu các thay đổi ở trên và khởi động lại máy chủ Node.js. Nhập tên người dùng và mật khẩu hợp lệ và nhấp vào phương thức signin. Dựa trên các thông tin đó, nó sẽ trả về một thông báo thành công hoặc thất bại, chúng sẽ được hiển thị bên trong console của trình duyệt.

Tạo View Đăng ký Người dùng

Quá trình tạo view đăng ký người dùng khá giống với cách bạn cài đặt mô-đun đăng nhập người dùng. Hãy bắt đầu bằng cách tạo thành phần Signup trong tập tin main.jsx.

class Signup extends React.Component{
  render() {
      return (
        <div>
          <form className="form-signin">
            <h2 className="form-signin-heading">Please sign up</h2>
            <label for="inputName" className="sr-only">Name</label>
            <input type="name" onChange={this.handleNameChange} id="inputName" className="form-control" placeholder="Name" required autofocus />
            <label for="inputEmail" className="sr-only">Email address</label>
            <input type="email" onChange={this.handleEmailChange} id="inputEmail" className="form-control" placeholder="Email address" required autofocus />
            <label for="inputPassword" className="sr-only">Password</label>
            <input type="password" onChange={this.handlePasswordChange} id="inputPassword" className="form-control" placeholder="Password" required />
            
            <button className="btn btn-lg btn-primary btn-block" onClick={this.signUp} type="button">Sign up</button>
          </form>
        </div>
        
      )
    }
}

Vì đăng ký và đăng nhập là hai thành phần khác nhau, nên bạn cần phải liên kết hai thành phần này lại với nhau. Với mục đích định tuyến, bạn sẽ sử dụng react-router. Nếu bạn không rành về định tuyến trong React, tôi khuyên bạn nên đọc hướng dẫn về định tuyến trong React.

Bao gồm react-router trong trang index.html.

1	<script src="https://npmcdn.com/react-router@3.0.2/umd/ReactRouter.min.js"></script>

Định nghĩa các biến react-router cần thiết để tạo ra các liên kết trong tập tin main.jsx.

1	var Router = window.ReactRouter.Router;
2	var Route = window.ReactRouter.Route;
3	var hashHistory = window.ReactRouter.hashHistory;
4	var Link = window.ReactRouter.Link;

Định nghĩa các tuyến ứng dụng khác nhau và tuyến mặc định như minh hoạ dưới đây:

ReactDOM.render(
    <Router history={hashHistory}>
        <Route component={Signin} path="/"></Route>
        <Route component={Signup} path="/signup"></Route>
    </Router>,
document.getElementById('app'));

Bao gồm một liên kết đến thành phần đăng nhập bên trong thành phần đăng ký và ngược lại. Dưới đây là phương thức render của thành phần Signin cùng với liên kết đăng ký:

render() {
  return (
    <div>
      <form className="form-signin">
        <h2 className="form-signin-heading">Please sign in</h2>
        <label for="inputEmail" className="sr-only">Email address</label>
        <input type="email" onChange={this.handleEmailChange} id="inputEmail" className="form-control" placeholder="Email address" required autofocus />
        <label for="inputPassword" className="sr-only">Password</label>
        <input type="password" onChange={this.handlePasswordChange} id="inputPassword" className="form-control" placeholder="Password" required />
        
        <button className="btn btn-lg btn-primary btn-block" onClick={this.signIn} type="button">Sign in</button>
      </form>
      <div>
        <Link to="/signup">{'Signup'}</Link>
      </div>
    </div>

  )
}

Lưu các thay đổi ở trên và khởi động lại máy chủ Node.js. Truy cập vào http://localhost:7777/index.html và bạn sẽ có thể thấy màn hình đăng nhập cùng với liên kết đăng ký. Nhấp vào liên kết đăng ký và bạn sẽ được chuyển đến màn hình đăng ký.

Việc cài đặt tính năng đăng ký người dùng cũng tương tự như cách bạn cài đặt tính năng đăng nhập người dùng. Tôi sẽ để lại tính năng đăng ký người dùng như một bài tập. Tôi sẽ đăng lên chức năng đăng ký người dùng trong phần tiếp theo của loạt bài hướng dẫn này.

Phần Tóm tắt

Trong phần này của loạt bài hướng dẫn, bạn đã tạo và cài đặt màn hình đăng nhập. Bạn cũng đã biết được cách sử dụng react-router để cài đặt việc định tuyến trong React. Trong phần tiếp theo của hướng dẫn này, bạn sẽ được học cách cài đặt phần Đăng ký và trang Thêm bài viết.

Mã nguồn từ hướng dẫn này có sẵn trên GitHub.

Hãy cho chúng tôi biết những suy nghĩ và gợi ý của bạn trong phần bình luận dưới đây nhé.