Сегодня мы создадим простое react-приложение с помощью Smart Code Snippets на Codiga’s Coding Assistant tool. Мы создадим приложение React, которое будет получать данные из API Github. Перед началом работы вам понадобятся следующие зависимости:
- NodeJS
- Bootstrap
- Codiga Smart Code Snippets
Прежде чем перейти непосредственно к созданию приложения, давайте посмотрим, что мы будем делать сегодня.
Вот видео для этого.
Обратите внимание, что все умные фрагменты кода, используемые при создании этого приложения, находятся в этой поваренной книге Codiga.
Итак, давайте создадим приложение
- Шаг 1: Настройка приложения react
- Шаг 2: Привязка bootstrap к приложению
- Шаг 3: Очистите существующий код
- Шаг 4: Создание панели навигации для приложения
- Шаг 5: Создание компонента формы
- Шаг 6: Создание карточки для отображения данных из Github API
- Шаг 7: Логика кода
- Функция «Установить имя пользователя»:
- Функция onSubmit
- Присваивайте форме значения из файла result.json
- Подведение итогов
Шаг 1: Настройка приложения react
Мы будем создавать приложение на react; давайте сначала настроим приложение react с помощью команды npx.
npx create-react-app github-api-demo
Настройка приложения может занять некоторое время, поэтому вы можете сделать перерыв на кофе или изучить Codiga Smart Code Snippets.
Когда приложение react будет настроено, мы будем использовать комбинацию react+bootstrap. Для этого нам нужно связать bootstrap с файлом index.html.
Шаг 2: Привязка bootstrap к приложению
Есть два способа связать файл bootstrap с вашим приложением. Либо путем загрузки исходного кода, либо с помощью сети доставки контента.
В данном примере мы будем использовать сеть доставки контента.
Традиционно код для связывания bootstrap CSS с помощью сети доставки контента выглядит примерно так:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Аналогично, для связывания bootstrap javascript также требуется расширенный код, как показано выше.
Мы создали сниппет Smart Code Snippet. Используйте приведенные ниже ярлыки с установленным расширением Codiga, чтобы облегчить себе работу.
для CSS bootstrap: bootstrap.css, используйте этот ярлык в теге <head>.
для bootstrap JS: bootstrap.js, используйте этот ярлык под тегом <body>.
Ваш файл index.html должен выглядеть следующим образом.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>GitHub Demo</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Шаг 3: Очистите существующий код
Нам не нужен существующий код, присутствующий в стартовом шаблоне. Поэтому, пожалуйста, очистите весь существующий код в папке src. Нам понадобится только файл App.js и папка component для добавления наших компонентов.
Это приложение разделено на два компонента; первый — это навигационная панель, а второй — форма. Далее рассмотрим, как мы будем создавать навигационную панель для приложения.
Шаг 4: Создание панели навигации для приложения
В папке components создайте файл Nav.js. Используя сниппет умного кода navbar, создайте навигационную панель с помощью bootstrap.
navbar.0
Здесь нам нужно изменить название приложения на панели навигации. Здесь мы назовем его Github API.
Теперь вы можете видеть, как легко сделать navbar на этот раз. Верно? В этом и заключается сила Smart Code Snippets (LOL) от Codiga.
Шаг 5: Создание компонента формы
Вы можете создать компонент формы без каких-либо проблем. Просто используйте этот сниппет Smart Code Snippet, и все готово.
bootstrap.form.0
Обязательно отредактируйте заголовки формы.
Мы будем использовать карточки для отображения деталей, полученных из API GitHub. Давайте создадим карточку в том же файле Form.js.
Шаг 6: Создание карточки для отображения данных из Github API
Простую карточку можно создать с помощью этого сниппета Smart Code Snippet.
bootstrap.cards.1
Поскольку все готово в течение нескольких минут, теперь мы можем сосредоточиться на логике кода.
Шаг 7: Логика кода
Логика кода приведена ниже.
Функция «Установить имя пользователя»:
const [username, setUsername] = useState("");
const onChangeHandler = (e) => {
setUsername(e.target.value);
};
Убедитесь, что вы задали форме функцию-обработчик onChange & onSubmit.
Функция onSubmit
const [data , setData] = useState({});
const onSubmiteHandler = (e) => {
e.preventDefault();
fetch(`https://api.github.com/users/${username}`)
.then((result) => {
return result.json();
}).then((values) => {
console.log(values);
setData(values);
}
)
Убедитесь, что вы присвоили форме значение имени пользователя.
Присваивайте форме значения из файла result.json
<div className='container'>
<div className="card p-3">
<div className="d-flex align-items-center">
<div className="image">
<img src={data.avatar_url}className="rounded" width="155"/>
</div>
<div className="ml-3 w-100">
<h3 className="mb-0 mt-0">{data.login}</h3><span>{data.bio}</span>
<div className="p-2 mt-2 bg-primary d-flex justify-content-between rounded text-white stats">
<br />
<div className="d-flex flex-column"> <span className="articles">Repo</span> <span className="number1">{data.public_repos}</span> </div>
<div className="d-flex flex-column"> <span className="followers">Followers</span> <span className="number2">{data.followers}</span> </div>
<div className="d-flex flex-column"> <span className="rating">following</span> <span className="number3">{data.following}</span> </div>
</div>
</div>
</div>
</div>
</div>
И вы готовы к работе! Приложение создано. Если вы где-то застряли, можете обратиться к этому видео.
Подведение итогов
В этой статье блога мы создали приложение за несколько минут. Используя Smart Code Snippets, мы смогли быстро написать код, чтобы сосредоточиться на логике кода. Мы использовали готовые шаблонные фрагменты кода, созданные Codiga, и изменили их в соответствии с нашими потребностями. Чтобы узнать больше о Coding Assistant и наших умных фрагментах кода, которые помогут вам сэкономить драгоценное время и энергию, нажмите здесь, чтобы начать работу, или пообщайтесь с нами в Discord здесь.
Эта статья была первоначально опубликована на Codiga.