Главная > Блог > Web-разработка > JavaScript и TypeScript >

React.js. Начало работы. Часть 7 из 12

20.10.2019

Теги: AJAX • JavaScript • React.js • Web-разработка • XmlHttpRequest • Компонент • Фреймворк

Работа с внешними данными

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

Все это происходит без обновления страницы или потери состояния, в котором находится страница. Давайте напишем небольшое приложение, которое будет показывать пользователю IP-адрес компьютера. Это приложение после первоначальной загрузки будет выполнять AJAX-запрос, чтобы получить извне IP-адрес устройства.

Переходим в директорию, где надо создать новое приложение и выполняем компанду:

> create-react-app ipaddress

Удаляем все содержимое директорий src и public. В директории public создаем файл index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Ваш IP адрес</title>
</head>
<body>
    <div id="container"></div>
<body>
</html>

В директории src создаем файл index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import IpAddressGetter from './IpAddressGetter';
import './index.css';

ReactDOM.render(
    <IpAddressGetter/>,
    document.getElementById('container')
);

В директории src создаем файл index.css:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background: #FFCC99;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

Далее нам нужно создать компонент IpAddressGetter, задача которого — получение IP-адреса от веб-сервиса, сохранения его в виде состояния, а затем предоставление этого состояния в качестве свойства любому компоненту, которому оно потребуется. Итак, создаем файл IpAddressGetter.js:

import React, {Component} from 'react';

class IpAddressGetter extends Component {
    render() {
        return (
            <span>Здесь будет IP-адрес</span>
        );
    }
}

export default IpAddressGetter;

Чтобы проверить работу приложения, переходим в директорию ipaddress и выполняем команду:

> npm start

Хорошо, теперь добавим код, который будет получать IP-адрес и сохранять его в состоянии:

import React, {Component} from 'react';

var xhr;

class IpAddressGetter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            ip_address: '...'
        }
        this.processRequest = this.processRequest.bind(this);
    }

    componentDidMount() {
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'https://api.ipify.org?format=json', true);
        xhr.send();

        xhr.addEventListener('readystatechange', this.processRequest, false);
    }

    processRequest() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            this.setState({
                ip_address: response.ip
            });
        }
    }

    render() {
        return (
            <span>{this.state.ip_address}</span>
        );
    }
}

export default IpAddressGetter;

Если мы сейчас проверим работу приложения, то увидим, что все работает как надо:

Но не хватает оформления для вывода результатов работы. Создадим еще один компонент, задача которого — исключительно оформление:

import React, {Component} from 'react';

class IpAddressWrapper extends Component {
    render() {
        return (
            <div>
                <p>Это ваш IP-адрес</p>
                <h1>{this.props.ip_address}</h1>
            </div>
        );
    }
}

export default IpAddressWrapper;

Теперь компонент IpAddressGetter больше не показывает IP-адрес, а вызывает для этого IpAddressWrapper:

import React, {Component} from 'react';
import IpAddressWrapper from './IpAddressWrapper';

var xhr;

class IpAddressGetter extends Component {
    /* .......... */
    render() {
        return (
            <IpAddressWrapper ip_address={this.state.ip_address} />
        );
    }
}

Поиск: AJAX • JavaScript • React.js • Web-разработка • XmlHttpRequest • Компонент • Фреймворк