Создание приложения для блога на React, часть 1: вход пользователя в систему

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

В этой серии учебников вы увидите, как начать работу с созданием приложения для ведения блога с помощью React. На протяжении всей этой серии учебников вы будете сосредоточены на том, как использовать React для разработки пользовательского интерфейса для вашего приложения. Для серверной части приложения мы будем использовать Node.js

В этом уроке вы увидите, как реализовать пользовательский интерфейс и бекенд для регистрации пользователя и входа пользователя.

Начинаем

Создайте каталог проекта и назовите его ReactNodeApp. Перейдите в каталог проекта и инициируйте проект node.

npm init

Заполните необходимые данные, и вы должны будите получить файл package.json. Вот как он выглядит:

{
  "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"
}

Вы будете использовать фреймворк express для обслуживания вашего приложения. Установите express, используя следующую команду:

1	npm install express --save

Используя Фреймворк express, давайте создадим наше приложение, прослушивающее адрес порта. Внутри каталога проекта создайте файл под названием app.js. Подключим модуль express внутри app.js и создадим приложение. Задайте статический путь приложения, где оно сможет найти статические файлы. Вот как это выглядит:

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

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

Назначьте номер порта, который приложение будет прослушивать. Добавьте следующий код для создания сервера:

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

Внутри каталога проекта создайте папку html. Внутри html-папки создайте файл index.html. Добавьте следующий код в index.html:

<html>

<head></head>

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

</html>

Сохраните указанные выше изменения и запустите сервер, используя следующую команду:

1	node app.js

Откройте в своем браузере следующий адрес http://localhost:7777/index.html, и вы сможете увидеть страницу index.html.

Создание окна входа в систему

Вы будете использовать bootstrap для создания пользовательского интерфейса. Загрузите и подключите bootstrap на странице index.html.

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

Добавьте необходимые библиотеки React на страницу 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>

Вы создадите представление с помощью JSX. Если вы не знакомы с JSX, я бы рекомендовал прочитать вводный учебник по React и JSX.

Чтобы преобразовать JSX-код в JavaScript, вам понадобится babel, компилятор JavaScript. Подключите babel на странице index.html.

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

Создайте файл main.jsx внутри папки html. Этот файл будет содержать компоненты React UI.

Давайте создадим новый компонент React под названием Signin внутри файла main.jsx.

1	class Signin extends React.Component {
2
3	}

Добавьте метод render внутри компонента Signin, который отобразит пользовательский интерфейс для нашего компонента Signin.

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>
        )
    }
}

В приведенном выше коде это всего лишь HTML с одним отличием. Атрибут class был изменен на className при использовании в JSX.

Компонент Signin, когда отображается, отображает HTML-код внутри метода render.

Добавьте контейнер div на страницу index.html, где вы будете отображать компонент Signin.

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

Выведите компонент Signin внутри .container div в index.html.

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

Сохраните указанные выше изменения и перезапустите сервер. В своем браузере откройте http://localhost:7777/index.html, и вы должны будите увидеть экран входа.

Реализация входа пользователя

Чтобы реализовать процесс входа в систему, вам необходимо обработать введенный текст и событие onChange а затем сохранить значения текстового поля в переменной состояния. Когда пользователь нажимает кнопку, вы будете использовать переменные состояния для чтения значений текстового поля адреса электронной почты и пароля. Итак, добавим событие onChange в текстовые поля:

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 />

Определите события onChange в компоненте Signin:

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

Привяжите указанные выше события и переменные состояния в методе конструктора компонента:

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

Определите метод onClick, который вы будете вызывать при нажатии кнопки.

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

Добавьте событие OnClick в кнопку SignIn.

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

Сохраните указанные выше изменения и перезапустите сервер. В своем браузере откройте http://localhost:7777/index.html. Введите адрес электронной почты и пароль и нажмите кнопку «Sign In», и вы сможете увидеть, как всплывают письма и пароль.

Передача данных из React в Node

После того, как у вас есть данные на стороне клиента, вам необходимо отправить эти данные на серверный метод Node.js, чтобы проверить вход пользователя в систему. Для отправки данных вы будете использовать другой скрипт под названием axios. Axios - это HTTP-клиент на основе промисов для браузера и Node.js. Подключите axios на странице index.html.

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

Внутри метода signin в файле main.jsx добавьте следующую строку кода, чтобы сделать пост запрос.

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

Код делает пост запрос методу /signin с указанными параметрами. Как только запрос будет успешным, промис будет разрешено в обратном вызове then. При ошибке ответ регистрируется в обратном вызове catch.

Давайте создадим метод signin на стороне Node.js для проверки процесса входа пользователя. В файле app.js создайте метод под названием signin.

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

Вы будете использовать модуль body-parser для анализа запроса, отправленного с клиентской стороны React. Установите модуль body-parser в проект.

1	npm install body-parser --save

Подключите модуль body-parser в файле app.js.

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

Добавьте следующую строку кода, чтобы разрешить разбор JSON.

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

Внутри метода signin вы можете разобрать запрос, как показано здесь:

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

Измените метод signin, как показано для подтверждения входа пользователя.

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');
  }
})

В настоящее время учетные данные пользователя жестко закодированы. Вы можете заменить его соответствующим сервисом в соответствии с вашими предпочтениями.

Как только параметры были проанализированы, они проверяются на ожидаемые учетные данные. Если true, передается сообщение об успешном завершении, иначе возвращается сообщение об ошибке.

Сохраните указанные выше изменения и перезапустите сервер Node.js. Введите действительное имя пользователя и пароль и нажмите метод входа. На основе учетных данных он вернет сообщение об успешном завершении или сбое, которое будет отображаться в консоли браузера.

Создание представления регистрации пользователя

Процесс создания пользовательского регистрационного представления очень похож на то, как вы внедрили модуль входа пользователя. Начнем с создания компонента Signup в файле 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>
        
      )
    }
}

Поскольку регистрация и вход в систему - это два разных компонента, вам необходимо связать эти два компонента. В целях маршрутизации вы будете использовать react-router. Если вы новичок в маршрутизации в React, я бы рекомендовал прочитать учебник по маршрутизации React.

Подключите react-router на странице index.html.

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

Определите требуемые переменные react-router для создания ссылок в файле 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;

Определите различные маршруты и маршрут по умолчанию, как показано ниже:

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

Включите ссылку на компонент входа в компонент регистрации и наоборот. Вот метод render компонента Signin со ссылкой для регистрации:

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>

  )
}

Сохраните указанные выше изменения и перезапустите сервер Node.js. В своем браузере откройте http://localhost:7777/index.html, и вы сможете увидеть экран входа с ссылкой на регистрацию. Нажмите на ссылку регистрации, и вы должны перейти на экран регистрации.

Внедрение регистрации пользователя аналогично тому, как вы выполнили вход пользователя. Я оставлю реализацию регистрации пользователя в качестве упражнения. В следующей части этой серии уроков я опубликую версию регистрации пользователя.

Подведем итоги

В этой части серии учебников вы создали и внедрили экран входа в систему. Вы также видели, как использовать react-router для реализации маршрутизации в React. В следующей части этого урока вы увидите, как реализовать раздел «Sign Up» и «Add Post».

Исходный код этого учебника доступен в GitHub.

Сообщите нам свои мысли и предложения в комментариях ниже.