Как создать React приложение за 5 минут?
В этой статье я собираюсь создать простое 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, но мы можем изменить порт в настройках.
После запуска приложения у вас появится вкладка с приложением и вы увидите следующее изображение:
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, у нас на сайте есть курс