/ Новости и уроки / Как создать React приложение за 5 минут?

Как создать React приложение за 5 минут?

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

В этой статье я собираюсь создать простое React приложение с извлечением данных из API, показываю вам все шаг за шагом. Чтобы создать это приложение, было бы неплохо иметь основные познания в React, Javascript, HTML и CSS.

Кстати, чтобы установить React, мы будет использовать npm, который мы также скачаем.

Давайте начнем.

1. Установка create-react-app

В начале мы должны установить create-react-app. Это инструмент, предоставляемый создателями React.js, который позволяет устанавливать готовое к использованию приложение React приложение со всеми необходимыми зависимостями.

Для установки, мы должны написать следующее: 


npm install -g create-react-app

После успешного завершения процесса, React установится. Теперь давайте создадим наше приложение!

2. Создание приложения

Для создания нашего приложения мы будем использовать create-react-app.

Сначала перейдите в папку, в которой вы хотите разместить свое приложение, через командную строку, а затем выполните следующую команду, где reactapp - это название нашего приложения: 


npx create-react-app reactapp

Если процесс завершился без ошибок, у вас должна быть появится готовая папка с приложением! Давайте запустим приложение сейчас!

3. Запуск приложения

Запускать наше приложение мы будет через эти команды: 


cd reactapp
npm start

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

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

Приложение на React.js1

4. Получение данных через API

Давайте откроем код приложения в любимом редакторе кода. Внутри папки ./src находится наш основной файл App.js.

Теперь нам нужно установить локальное состояние, в котором мы собираемся хранить наши данные из API. 


import React, { Component } from 'react';

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }
  render() {
    return (
      <p>Hello world!</p>
    );
  }
}
export default App;

Я добавил конструктор, затем я установил локальное состояние с названием "posts" и передал ему значение пустого массива.

Хорошо, теперь я готов сделать вызов API. Я собираюсь использовать поддельный API с веб-сайта JSONPlaceholder (https://jsonplaceholder.typicode.com/). Чтобы получить данные, я буду использовать метод .fetch из Javascript. Давайте сделаем вызов: 


import React, { Component } from 'react';

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }
  componentDidMount() {
    const url = "https://jsonplaceholder.typicode.com/posts";
    fetch(url)
    .then(response => response.json())
    .then(json => this.setState({ posts: json }))
  }
  render() {
    return (
      <p>Hello world!</p>
    );
  }
}
export default App;

Я добавил конструктор, затем я установил локальное состояние с названием "posts" и передал ему значение пустого массива.

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


[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
...
]

5. Вывод данных

Для вывода данных мы будем использовать функцию map(), которая перебирает данные из массива. 


import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }

  componentDidMount() {
    const url = "https://jsonplaceholder.typicode.com/posts";
    fetch(url)
    .then(response => response.json())
    .then(json => this.setState({ posts: json }))
  }

  render() {
    const { posts } = this.state;
    return (
      <div className="container">
        {posts.map((post) => (
          <div className="card" key={post.id}>
              #{post.id} {post.title}
              <p className="text">{post.body}</p>
          </div>
        ))}
      </div>
    );
  }
}
export default App;

Данные мы передали с помощью этого: post.title, post.body и post.id.

Заключение

В этой статье мы создали простое React приложение с извлечением данных из REST API. Мы создали простой список с короткими постами в блоге. Мы использовали create-react-app для простой установки готового приложения React.js.

Я надеюсь, что вам понравилась моя статья и вы воспользуетесь статьей в качестве основы для своей первой практике по применению React.js!

Кстати, если вы хотите выучить React, у нас на сайте есть курс