Как создать Новую программу

Быстро настройте среду разработки Rust и напишите небольшое приложение!

Установить Rust

Вы можете попробовать Rust онлайн в Rust Playground без установки чего-либо на ваш компьютер.

Rustup: Установщик Rust и инструмент для управления версиями

Основным способом установки Rust, который используют люди, является Rustup — инструмент для установки и управления версиями Rust.

Кажется у вас запущена macOS, Linux или другая Unix-подобная ОС. Для загрузки Rustup и установки Rust, запустите следующее в вашем терминале и следуйте инструкциям на экране.

curl —proto ‘=https’ —tlsv1.2 -sSf https://sh.rustup.rs | sh

Похоже, вы работаете под управлением Windows. Чтобы начать использовать Rust, загрузите установщик, затем запустите программу и следуйте инструкциям на экране. Возможно, Вам потребуется установитьVisual Studio C++ Build tools при появлении соответствующего запроса. Если вы не работаете в Windows, смотрите «другие методы установки».

Раздел 1.3 Создание новой программы с использованием .NET Core

Windows Subsystem for Linux

Если вы используете Windows Subsystem for Linux, для установки Rust запустите следующее в вашем терминале и затем следуйте инструкциям на экране.

curl —proto ‘=https’ —tlsv1.2 -sSf https://sh.rustup.rs | sh

Rust запускается на Windows, Linux, macOS, FreeBSD и NetBSD. Если вы используете одну из этих платформ и видите это, то пожалуйста, сообщите о проблеме и следующих значениях:

navigator.platform: MacIntel
navigator.appVersion: 5.0 (Macintosh)

Если вы используете Unix, то для установки Rust
запустите в терминале следующую команду и следуйте инструкциям на экране.

curl —proto ‘=https’ —tlsv1.2 -sSf https://sh.rustup.rs | sh

Если у вас запущен Windows,
скачайте и запустите rustup‑init.exe и затем следуйте инструкциям на экране.

curl —proto ‘=https’ —tlsv1.2 -sSf https://sh.rustup.rs | sh

Если у вас запущен Windows,
скачайте и запустите rustup‑init.exe, а затем следуйте инструкциям на экране.

Обновлён ли Rust?

Rust обновляется достаточно часто. Если вы устанавливали Rustup некоторое время назад, есть вероятность что версия Rust устарела. Получите актуальную версию Rust, запустив команду rustup update .

Cargo: Менеджер пакетов и инструмент сборки для Rust

При установке через Rustup, вы получаете последнюю стабильную версию пакетного менеджера и средства сборки Rust, известного, как Cargo. Cargo делает многие вещи:

• собирает ваш проект с cargo build
• запускает ваш проект с cargo run
• тестирует ваш проект с cargo test
• собирает документацию для вашего проекта с cargo doc
• публикует библиотеку на crates.io с cargo publish

Чтобы удостовериться, что Rust и Cargo установлены, вы можете запустить в терминале следующую команду:

Другие инструменты

Поддержка Rust есть во многих редакторах:

Создание нового проекта

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

Раздел 1.5 Создание новой программы с использованием LinqPad

cargo new hello-rust

Эта команда создаст новую директорию, зовущуюся hello-rust со следующими файлами:

hello-rust |- Cargo.toml |- src |- main.rs

Cargo.toml — это файл манифеста. Здесь хранятся метаданные вашего проекта, такие как описание.

В файле src/main.rs вы пишете код приложения.

cargo new создал для нас проект «Hello, world!». Для запуска этой программы мы перейдём в директорию, которая была создана, и запустим в терминале:

Вы должны увидеть следующее:

$ cargo run Compiling hello-rust v0.1.0 (/Users/ag_dubs/rust/hello-rust) Finished dev [unoptimized + debuginfo] target(s) in 1.34s Running `target/debug/hello-rust` Hello, world!

Добавление зависимостей

Давайте добавим зависимость в наше приложение. Вы можете найти разного рода библиотеки на crates.io, реестре пакетов для Rust. В Rust мы обычно называем пакет «crates».

В этом проекте, мы используем пакет с именем ferris-says .

В нашем Cargo.toml файле мы добавим следующую информацию (которую мы получили со страницы пакета):

[dependencies] ferris-says = «0.2»

Теперь мы можем запустить:

. и Cargo установит наши зависимости.

Вы увидите, что эта команда создала новый файл, Cargo.lock . Этот файл представляет собой журнал точных версий зависимостей, которые мы используем локально.

Для использования нашей зависимости, мы можем открыть файл main.rs , удалить всё, что там есть (это просто ещё один пример) и добавить следующую строку:

use ferris_says::say;

Это строка означает, что мы теперь можем использовать функцию say , которую нам предоставил пакет ferris-says .

Небольшое приложение на Rust

Теперь давайте напишем небольшое приложение с нашей новой зависимостью. В файл main.rs добавьте следующий код:

use ferris_says::say; // from the previous step use std::io::; fn main()

После того, как мы это сохраним, мы можем запустить наше приложение набрав:

При условии, что всё пошло хорошо, вы должны увидеть, что ваше приложение вывело на экран следующее:

—————————- < Hello fellow Rustaceans! >—————————- _~^~^~_ ) / o o (/ ‘_ — _’ / ‘——‘

Узнать больше!

Теперь вы Растацианин! Добро пожаловать! Мы так рады видеть вас.

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

Кто этот краб, Ferris?

Ferris (Феррис) — это неофициальный талисман сообщества Rust. Многие программисты на Rust называют себя «Растациане», обыгрывая слово «crustacean».

Ferris — это имя, обыгрывающее прилагательное «ferrous» («железистый»), обозначающее «содержащий железо». Поскольку Rust (один из переводов которого — «ржавчина») образуется на железе, название нашего талисмана выглядит забавным!

Вы можете найти больше изображений Ферриса на rustacean.net.

Получить помощь!

• Документация
• Rust Forge (Документация для контрибьюторов)
• Задать вопрос на пользовательском форуме

Источник: www.rust-lang.org

Руководство. Создание приложения Windows Forms с помощью .NET

Из этого краткого руководства вы узнаете, как создать новое приложение Windows Forms с помощью Visual Studio. После создания первоначального приложения вы научитесь добавлять элементы управления и обрабатывать события. По завершении работы с этим руководством у вас будет простое приложение, добавляющее имена в список.

Документация по классическим приложениям для .NET 7 и .NET 6 находится в стадии разработки.

В этом руководстве описано следующее:

• Создание приложения Windows Forms
• Добавление элементов управления на форму
• Обработка событий элемента управления для предоставления функциональных возможностей приложения
• Запустите приложение

Предварительные требования

• Visual Studio 2022 версии 17.0 или более поздней.

• Выберите рабочую нагрузку Разработка классических приложений .NET.
• Выберите отдельный компонент .NET 6.

• Visual Studio 2022 версии 17.4 или более поздней версии

• Выберите рабочую нагрузку Разработка классических приложений .NET.
• Выбор отдельного компонента .NET 7

Используйте Visual Studio 2022 версии 17.4 или более поздней и установите отдельные компоненты .NET 7 и .NET 6. Поддержка .NET 7 была добавлена в Visual Studio 2022 версии 17.4.

Создание приложения Windows Forms

Первым шагом в создании нового приложения является запуск Visual Studio и создание приложения на основе шаблона.

1. Запустите Visual Studio.
2. Выберите Создать новый проект.
3. В поле Поиск шаблонов введите winforms и дождитесь появления результатов поиска.
4. В раскрывающемся списке язык кода выберите C# или Visual Basic.
5. В списке шаблонов выберите Приложение Windows Forms и щелкните Далее.

Важно! Не выбирайте шаблон Приложение Windows Forms (.NET Framework) .

На приведенном ниже рисунке показаны шаблоны проектов как для C#, так и для Visual Basic .NET. Если применить фильтр языка кода, отобразится соответствующий шаблон.

В окне Настроить новый проект задайте в поле Имя проекта значение Names и щелкните Создать. Вы также можете сохранить проект в другую папку, изменив путь в поле Расположение.

Наконец, на странице Дополнительные сведения выберите для параметра Платформа значение .NET 6.0 (долгосрочная поддержка) и нажмите кнопку Создать.

1. Запустите Visual Studio.
2. Выберите Создать новый проект.
3. В поле Поиск шаблонов введите winforms и дождитесь появления результатов поиска.
4. В раскрывающемся списке язык кода выберите C# или Visual Basic.
5. В списке шаблонов выберите Приложение Windows Forms и щелкните Далее.

Важно! Не выбирайте шаблон Приложение Windows Forms (.NET Framework) .

На приведенном ниже рисунке показаны шаблоны проектов как для C#, так и для Visual Basic .NET. Если применить фильтр языка кода, отобразится соответствующий шаблон.

В окне Настроить новый проект задайте в поле Имя проекта значение Names и щелкните Создать. Вы также можете сохранить проект в другую папку, изменив путь в поле Расположение.

Наконец, в окне Дополнительные сведения выберите .NET 7.0 (поддержка стандартных терминов) для параметра Framework и нажмите кнопку Создать.

После создания приложения Visual Studio должен открыть панель конструктора для формы по умолчанию Form1. Если конструктор форм не отображается, дважды щелкните форму в области Обозреватель решений, чтобы открыть окно конструктора.

Важные элементы среды Visual Studio

Поддержка Windows Forms в Visual Studio состоит из четырех важных компонентов, с которыми вы будете взаимодействовать при создании приложения.

1. Обозреватель решений Все файлы проекта, код, формы и ресурсы отображаются в этой области.
2. Properties (Свойства) На этой панели отображаются параметры свойств, которые можно настроить в зависимости от выбранного элемента. Например, если выбрать элемент в Обозревателе решений, отобразятся параметры свойств, связанные с файлом. Если выбрать объект в конструкторе, отобразятся параметры элемента управления или формы.
3. Конструктор форм Это конструктор для формы. Он является интерактивным, и на него можно перетаскивать объекты из панели элементов. Выбирая и перемещая элементы в конструкторе, можно визуально создавать пользовательский интерфейс для приложения.
4. Панель элементов Панель элементов содержит все элементы управления, которые можно добавить на форму. Чтобы добавить элемент управления на текущую форму, дважды щелкните элемент управления или перетащите его.

Если панель элементов не отображается, ее можно отобразить в пункте меню Вид>панели элементов .

Добавление элементов управления на форму

Открыв конструктор форм Form1, используйте панель Область элементов, чтобы добавить на форму следующие элементы управления:

• Метка
• Кнопка
• Listbox
• Текстовое поле

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

Объект Параметр Значение

Form	Текст	Names
Размер	268, 180
Label	Расположение	12, 9
Текст	Names
Listbox	Имя	lstNames
Расположение	12, 27
Размер	120, 94
текстовое поле;	Имя	txtName
Расположение	138, 26
Размер	100, 23
Button	Имя	btnAdd
Расположение	138, 55
Размер	100, 23
Текст	Add Name

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

Обработка событий

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

1. Выберите в форме элемент управления «Кнопка».
2. В области Свойства щелкните значок события , чтобы вывести список событий кнопки.
3. Найдите событие Click и дважды щелкните его, чтобы создать обработчик событий. Это действие добавляет следующий код в форму:

private void btnAdd_Click(object sender, EventArgs e)
Private Sub btnAdd_Click(sender As Object, e As EventArgs) Handles btnAdd.Click End Sub
private void btnAdd_Click(object sender, EventArgs e)
Private Sub btnAdd_Click(sender As Object, e As EventArgs) Handles btnAdd.Click If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then lstNames.Items.Add(txtName.Text) End If End Sub

Запустите приложение

Теперь, когда у нас есть код события, можно запустить приложение, нажав клавишу F5 или выбрав пункт меню Отладка>Начать отладку. Отобразится форма, и вы можете ввести имя в текстовое поле, а затем добавить его, нажав кнопку.

Источник: learn.microsoft.com

Создание React-приложения с помощью Create React App

В этой статье изучим, как с помощью инструмента Create React App создать новое одностраничное приложение на React. После этого подробно разберём файловую структуру созданного проекта и команды для управления им.

Инструмент Create React App

Для полноценного создания пользовательских интерфейсов на React или каком-нибудь другом инструменте перед веб-разработчиком в большинстве случаев стоит задача в выборе необходимых средств для этого (webpack, Babel, ESLint, и т.д.) и корректной их настройки.

К счастью, разработчики React подготовили для нас готовый инструмент, который позволяет всё это сделать автоматически. Называется он Create React App.

Итак, Create React App (сокращенно CRA ) – это инструмент, который позволяет нам настроить среду для создания одностраничных веб-приложений на основе React, посредством выполнения всего одной команды. Также можно отметить, что этот инструмент официально поддерживается командой React.

Одностраничное приложение ( Single Page Application или сокращённо SPA ) – это приложение, содержащее всего одну единственную HTML-страницу, контент которой динамически обновляется с помощью JavaScript. Т.е. SPA состоит из одной страницы, контент для которой загружается и изменяется посредством JavaScript без её полной перезагрузки.

Это программа имеет открытый исходный код и расположена она на Github.

Требования

Чтобы использовать Create React App , необходимо убедиться, что у вас на компьютере установлена программа Node.js.

Для проверки её наличия, можно запросить версию:

node -v

Для разработки на локальном компьютере необходим «Node.js» версии не ниже 14 и npm не ниже 5.6. При установке «Node.js» также устанавливает программу npm .

npm (сокращенно от Node Package Manager ) – это пакетный менеджер, который позволяет нам устанавливать и удалять JavaScript пакеты, управлять их версиями и зависимостями. Проверить установленную версию npm можно так:

npm -v

В качестве альтернативы вы можете использовать пакетный менеджер Yarn . Yarn – это инструмент аналогичный npm , т.е. он также предназначен для установки пакетов и управления ими. Причём он их берёт из того же репозитория, что npm .

Чтобы использовать Yarn , его необходимо установить:

npm install -g yarn

Создание нового React-приложения

Для создания нового проекта посредством create-react-app необходимо перейти в нужную папку и ввести в терминале следующую команду:

# через npm npx create-react-app my-app # через yarn yarn create react-app my-app

npx – это инструмент, который появился в npm , начиная с версии 5.2.0. С его помощью мы можем, например, запустить пакет create-react-app без необходимости его глобальной установки:

npm install -g create-react-app

Команда npx create-react-app my-app создаст нам новое React-приложение .

В результате у нас появится каталог внутри текущей папки и в нём все необходимые файлы. В данном случае каталог my-app . Он будет содержать всё необходимое для разработки этого проекта на React.

Откроем только что созданный проект в редакторе коде, например, Visual Studio Code, и рассмотрим его структуру.

Структура проекта

В корне проекта расположены следующие файлы и папки:

node_modules/ public/ src/ .gitignore package-lock.json package.json README.md

• node-modules – это папка, которая содержит пакеты (зависимости), которые требуются нашему приложению. Их загружает и обновляет npm .
• public – это папка, в которой находится страница index.html , определяющая HTML шаблон всего нашего приложения; кроме этого она ещё содержит некоторые другие файлы для нашего приложения ( favicon.ico , manifest.json , robots.txt и т.д.), а также в неё при необходимости можно поместить любые другие файлы, которые должны быть скопированы в папку build нетронутыми, т.е. без обработки их с помощью webpack.
• src (сокращенно от source) – каталог, содержащий исходный код приложения. Разработка проекта практически ведётся здесь.
• .gitignore – нужен для скрытия файлов и папок от системы контроля версий GIT. Этот файл содержит все необходимые записи, каким-то определённым образом его настраивать не нужно.
• package.json – это набор метаданных о вашем приложении: название проекта, версия, пакеты от которых зависит проект и т.д. package.json является ключевым файлом для любых приложений, основанных на Node.js.
• package-lock.json – файл, который создаёт npm автоматически при установке зависимостей. Он содержит в себе полную информацию обо всех установленных зависимостях, включая их точные версии. Кроме package-lock.json у вас может быть ещё yarn.lock , если вы используете Yarn для установки пакетов.
• README.md — это краткая справочное руководство по использованию инструмента create-react-app .

В файле package.json в ключе dependencies перечислены зависимости, т.е. библиотеки, которые необходимы приложению. Среди основных:

• react и react-dom – ядро проекта на React (в предыдущей теме мы их подключали через CDN);
• react-scripts – набор скриптов, которые используются для разработки, сборки и тестирования приложения. Они выполняют настройку среды разработки, запуск сервера с живой перезагрузкой, подключают необходимые зависимости, модули и т.д.

Команды для управления проектом

В файле package.json в свойстве script определены ключи для запуска различных команд, посредством которых мы можем определённым образом управлять нашим приложением.

1. Запуск проекта. Осуществляется с помощью команды start :

npm start

Эту команду можно ввести прямо в терминале Visual Studio Code , если вы его используете в качестве текстового редактора:

Эта команда запускает приложение в режиме разработки. В результате запускается сервер и открывается браузер с адресом http://localhost:3000 , в котором показывается рабочее React-приложение. При внесении изменения в код, страница автоматически перезагружается. Все ошибки и предупреждения выводятся в консоль.

2. Сборка приложения:

npm run build

Эту команду обычно запускают после завершения разработки проекта. Она выполняет сборку приложения из исходных файлов для продакшена. Полученные оптимизированные файлы помещаются в папку build и они отвечают за функционал всего приложения. После сборки вы можете приступать к развертыванию приложения.

3. Запуск тестов:

npm test

4. Команда, которая позволяет извлечь все файлы конфигурации и зависимости непосредственно в проект :

npm run eject

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

Содержимое папки public

В папке public находятся:

• favicon.ico , logo192.png , logo512.png – иконки;
• index.html – HTML шаблон страницы;
• manifest.json – манифест веб-приложения;
• robots.txt – текстовый файл, который содержит указания для роботов поисковых систем;

Кроме этого, в эту папку можно поместить другие файлы, которые необходимо скопировать в каталог build нетронутыми (т.е. без обработки).

Чтобы ссылаться на ресурсы в public , необходимо использовать переменную с именем PUBLIC_URL :

При запуске npm run build инструмент Create React App заменит %PUBLIC_URL% правильным абсолютным путем, чтобы ваш проект работал, даже если вы используете маршрутизацию на стороне клиента или размещаете его по некорневому URL-адресу.

index.html

Инструмент create-react-app , как мы уже отмечали выше, выполняет генерацию проекта для разработки одностраничных приложений на React. В нём файл index.html как раз является той единственной страницей, которая будет входной для всего нашего приложения. Изменить название этого файла нельзя.

Содержимое файла index.html :

React App You need to enable JavaScript to run this app. tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. —>

В этом файле устанавливаются некоторые базовые настройки для нашего приложения: язык, кодировка, favicon, viewport, заголовок, manifest, title, description и т.д.

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

Но самое важное на что необходимо обратить внимание – это на тег . Это корневой элемент , в который будет выводиться весь контент нашего приложения. Здесь нам необходимо запомнить его id , т.к. в JavaScript мы будем использовать его для получения этого элемента.

Как можете заметить здесь нет подключённых скриптов. Они будут добавляться инструментом create-react-app автоматически. Т.е. как-то самостоятельно их подключать здесь не нужно.

При необходимости вы можете в этом файле подключить другие ресурсы. Например, стили, шрифты и т.д. Но в большинстве случаев так делать не нужно, рекомендуется это выполнять в JavaScript через import .

manifest.json

manifest.json – это манифест, в котором описывается информация о веб-приложении. Он представляет собой текстовый файл, который в формате JSON содержит название приложения, некоторое количество иконок, стартовый URL, как оно будет выглядеть и некоторые другие параметры.

Содержимое файла manifest.json :

{ «short_name»: «React App», «name»: «Create React App Sample», «icons»: [ { «src»: «favicon.ico», «sizes»: «64×64 32×32 24×24 16×16», «type»: «image/x-icon» }, { «src»: «logo192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «logo512.png», «type»: «image/png», «sizes»: «512×512» } ], «start_url»: «.», «display»: «standalone», «theme_color»: «#000000», «background_color»: «#ffffff» }

При этом манифест является частью веб-технологии, который называется PWA (сокращено от Progressive Web Apps ). Этот файл позволяет установить PWA на главный экран смартфона, предоставляя пользователю более быстрый доступ к приложению.

Содержимое папки src

Папка src (сокращенно от source) – это место, в котором хранятся исходные коды разрабатываемого проекта и где веб-разработчик проводит почти всё время работая над ним.

В этой папке имеется файл index.js . Этому файлу нельзя изменять имя, т.к. он является точкой входа для JavaScript. Т.е. так же как public/index.html .

При необходимости вы можете удалить или переименовать другие файлы, но названия public/index.html и src/index.js в структуре проекта нужно оставить так как они есть.

index.js

Изначально файл src/index.js содержит следующий код:

import React from ‘react’; import ReactDOM from ‘react-dom/client’; import ‘./index.css’; import App from ‘./App’; import reportWebVitals from ‘./reportWebVitals’; const root = ReactDOM.createRoot(document.getElementById(‘root’)); root.render( ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();

Начинается файл с импорта модулей JavaScript и других ресурсов. import позволяют index.js использовать код, определенный в другом месте. На первой строчке импортируется библиотека React, а на второй – ReactDOM, которая предоставляет методы для взаимодействия с DOM или другими словами с HTML-страницей. Эти две библиотеки составляют ядро React.

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

import ‘./index.css’;

Затем – React-компонент App из App.js :

import App from ‘./App’;

На следующей строчке – функция reportWebVitals , которая позволяет нам получить результаты производительности нашего приложения с использованием различных метрик. Для их измерения используется сторонняя библиотека web-vitals.

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

reportWebVitals(console.log);

После этого создаётся корень приложения посредством вызова метода ReactDOM.createRoot() , которому в качестве аргумента передаем DOM-элемент, который мы получили с помощью document.getElementById(‘root’) .

Затем выполняется рендеринг React-компонента в DOM:

root.render( );

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

React-компонент App

React-компонент App , который используется в src/index.js , находится в src/App.js . Этот компонент в данном случае представляет всё наше приложение, которое мы видим в браузере:

import logo from ‘./logo.svg’; import ‘./App.css’; function App() { return (

Edit src/App.js and save to reload.

Learn React ); } export default App;

Этот файл можно разделить на 3 основные части: импорт различных ресурсов, компонент App и инструкция export для экспортирования App .

C помощью import выполняется импорт логотипа из ./logo.svg и CSS, связанный с нашим компонентом.

Далее расположена простая функция с именем App . Эта функция используется для создания простого React-компонента, в данном случае App .

В самом низу файла инструкция export default App делает компонент App доступным для других модулей.

Компонент App

Код простого React-компонента :

function App() { return (

Edit src/App.js and save to reload.

Learn React ); }

В качестве результата с помощью оператора return эта функция возвращает React-элементы для отображения их на странице.

Именование React-компонентов осуществляется в стиле PascalCase . Т.е. их название всегда начинаются с заглавной буквы, а другие слова, которые являются частью его названия тоже начинаются с большой буквы. Не допускается пробелов, тире и других знаков, т.е. всё пишется слитно.

После return внутри круглых скобках мы описываем, по сути, HTML, который будет отображать этот компонент на странице. Но на самом деле это не HTML, а JSX – специальное расширение языка JavaScript, с помощью которого мы производим элементы.

Конструкция {logo} выводит значение переменной logo .

Изменение React-приложения

Изменим компонент App так, чтобы он выводил Hello, world! .

Для этого откроем файл src/App.js и заменим всё содержимое в return на Hello, world! :

import ‘./App.css’; function App() { return ( Hello, world! ); } export default App;

Также удалим файлы с SVG-изображением logo.svg и файлы, связанные с тестами.

Содержимое файла App.css , отвечающего за стили компонента App , изменим на следующий код:

.App { display: flex; justify-content: center; align-items: center; min-height: 100vh; font-size: 5rem; }

После выполненных изменений, сохраним файлы App.css и App.js путём нажатия Ctrl+S и перейдём в браузер.

В браузере мы увидим изменённое приложение, причём даже без перезагрузки страницы благодаря функции горячей перезагрузки проекта:

Источник: itchief.ru