Обмен технологиями

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Друг рассказал мне, что он закончил учебу и начал стажировку.Но компания до сих пор используетВью, вождь сказал, что ему разрешат использовать его через некоторое времяРеагироватьПрежде чем делать проект, сначала изучите его сами.

Я нашел для него несколько документов. Кстати, поскольку я тоже веду блог, я мог бы написать его и сам, надеюсь, это поможет нуждающимся.

Оглавление

1 установка проекта

1.1 Выберите каталог и запустите терминал

1.2 Установите команду create-реагировать-приложение

1.3 Создать проект

1.4 Просмотр файлов каталога

1.5 Запуск проекта

2 сторонние библиотеки, которые обязательно будут использоваться

2.1 js-tool-большой-ящик

2.1.1 Класс времени и даты

2.1.2 Класс интернет-магазина

2.1.3 Класс события

2.1.4 Класс номера

2.1.5 Строковый класс

2.1.6 Класс регулярной проверки

2.1.7 класс ajax

2.1.8 данные: Класс данных.

2.1.9 класс браузера браузера

2.2 less или препроцессор Sass

2.3 библиотека запросов axios

2.4 Библиотека пользовательского интерфейса

---

1 установка проекта

1.1 Выберите каталог и запустите терминал

Вы можете найти папку на своем компьютере в качестве каталога для практики этого проекта React, затем ввести «cmd» по URL-адресу папки, появится всплывающее окно терминала, а также вы можете указать целевой каталог:

 

Здесь вы вводите «cmd» и нажимаете Enter, чтобы открыть всплывающее окно терминала.

1.2 Установите команду create-реагировать-приложение

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

npm install -g create-react-app

1.3 Создать проект

Например, мы хотим создать файл с именем js-инструмент-большой-ящик-реакция проект, то вы можете выполнить следующую команду:

создать-реагировать-приложение js-инструмент-большой-ящик-реакция

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

1.4 Просмотр файлов каталога

• В общедоступном каталоге хранятся знакомые HTML-файлы и некоторые необходимые статические файлы;
• Каталог src — важный каталог для разработки проекта.
• Далее index.js — это входной файл.
• Вы можете попробовать внести некоторые изменения в App.js, а затем проверить эффект веб-страницы.

1.5 Запуск проекта

На рисунке выше мы используем редактор VSCode, чтобы открыть проект React. В это время введите команду в консоли:

начало нпм

Затем проект будет активно помогать нам активировать браузер,http://localhost:3000/Адрес, после чего вы увидите вращающийся значок React, и проект будет установлен.

 

2 сторонние библиотеки, которые обязательно будут использоваться

После завершения установки проекта начнется разработка проекта. Как говорится, если работник хочет хорошо выполнять свою работу, он должен сначала заострить свою энергию.Прежде чем приступить к разработке проекта, давайте поговорим о нескольких вещах, которые обязательно будут использоваться при разработке фронтенд-проекта.Сторонние библиотеки .Используя эти сторонние библиотеки, они могут помочь нам в разработкеболее эффективным。

2.1 js-tool-большой-ящик

Сначала зайдите на учебный адрес js-tool-big-box, нажмите здесь:Учебный адрес библиотеки инструментов js-tool-big-box

js-tool-big-box — это почти обязательная библиотека npm для проектов фронтенд-разработки. Она обладает богатыми функциями и проста в использовании, что делает фронтенд-разработку чрезвычайно эффективной. Его текущие функции включают, помимо прочего:

2.1.1 Класс времени и даты

1. Преобразование времени и даты;
2. Более гибкий формат времени;
3. Более персонализированный учет времени;
4. Период времени от определенного момента времени до настоящего времени (более подробная информация о возврате)
5. Определить, обычный ли это год или високосный;
6. Сколько дней в месяце;
7. знак зодиака;
8. официальные праздники в году;
9. Узнайте время в ключевых городах мира;

2.1.2 Класс интернет-магазина

1. Получить значение параметра в URL
2. установить файлы cookie;
3. Получить файлы cookie;
4. Удалить файлы cookie;
5. Установить локальное хранилище;
6. Получить локальное хранилище

2.1.3 Класс события

1. Стабилизатор
2. Дроссель

2.1.4 Класс номера

1. Тысячи разделены запятой;
2. Определите, больше ли оно 0;
3. Определить, больше ли целое число 0;
4. Генерировать случайные числа в указанном диапазоне;
5. Генерировать случайное число с указанным количеством цифр;
6. Преобразование чисел в строчные китайские буквы;
7. Преобразование чисел в прописные китайские буквы;

2.1.5 Строковый класс

1. реверс строки;
2. Хэнган и маленький горб
3. Хэнган превращается в большой горб;
4. Сравнение номеров версий;
5. Получить длину строки в байтах;
6. сгенерировать UUID;
7. Получить пол, возраст и дату рождения на основе идентификационного номера;
8. Добавьте специальные символы в середину строки, чтобы скрыть ключевую информацию;
9. Преобразование строк в верхний и нижний регистр букв;

2.1.6 Класс регулярной проверки

1. Проверка формата электронной почты;
2. Проверка формата номера мобильного телефона;
3. проверка формата URL;
4. проверка формата идентификационного номера;
5. проверка формата IP-адреса;
6. Проверка формата почтового индекса;

7. Определите, является ли это символом Юникода;

8. Определить значение надежности пароля;

2.1.7 класс ajax

1. Отправить запрос jsonp;
2. Загрузите чисто функциональную версию файла;
3. Загрузка файлов, выборка + версия функции загрузки;

2.1.8 данные: Класс данных.

1. Получить случайное количество значений из массива;
2. Скопировать текст в буфер обмена;
3. дедупликация массива;
4. Получить более подробные типы данных;
5. Сортировка числовых массивов (прямой и обратный порядок);
6. Сортировка массива объектов (прямой и обратный порядок)

2.1.9 класс браузера браузера

1. Определить, является ли текущий браузер мобильным;
2. Определите, находится ли элемент в видимом диапазоне;

3. Узнайте, прокручивается ли текущий браузер вверх или вниз, и получите текущее расстояние сверху и снизу;

4. Включение и выключение полноэкранного режима;

5. Получите пользовательский агент браузера и подробную информацию;

2.2 less или препроцессор Sass

Традиционный способ написания CSS является относительно простым. Использование препроцессоров, таких как less или sass, может сделать разработку CSS более эффективной и настоятельно рекомендуется.

Учебные документы(Less Quick Start | Документация Less.js на китайском языке — веб-сайт Less Chinese (bootcss.com))

2.3 библиотека запросов axios

Как правило, проекты предполагают взаимодействие с сервером, и в настоящее время вы можете использовать axios для отправки запросов.

документация по обучению axios(документация axios на китайском языке | веб-сайт axios на китайском языке | axios (axios-js.com))

2.4 Библиотека пользовательского интерфейса

Что касается React, если это разработка на стороне C, мы все еще надеемся, что сможем вручную написать некоторые относительно легкие библиотеки пользовательского интерфейса, но если это разработка на стороне B, мы рекомендуем Ant Design.

Учебный документ по Ant Design(Ant Design — язык проектирования пользовательского интерфейса корпоративного уровня и библиотека компонентов React.)