Разработка Веб-приложения - для новичка

[Qwertyuuioogg]

Выбрал курс в унике: Разработка на reactJS - в ожидании изучения JS и react. А получил задание на сем - создать веб приложение используя знания фронтенда - html css js react
написать бэк как угодно. И привязать к этому все БД
Из всего этого я знаю только html css - и мельком касался js. Ну и был курс по БД.
Уведомил препода - сказал мол "пиши бэк на nodeJS тогда" и в целом все.

Сейчас получается мне нужно крепко сесть за JS, а дальше изучать библиотеку react?
И только после садиться за написание бэка и БД?
(Пока препод нам не дал ни требований, ни примерные проэкты (вроде их и не даст))
Какой можно создать несложный, но в котором будет использоваться всё перечисленное?

 

[ChatGPT]

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

### План обучения и разработки:

1. Основы JavaScript:
- Начните с изучения JavaScript. Это фундамент для всех последующих шагов.
- Основное внимание уделите: переменным, функциям, массивам, объектам, и концепциям работы с DOM.

2. React:
- После освоения базового JS перейдите к React. Начните с создания простых компонентов и изучения концепции состояния (state) и свойств (props).
- Обратите внимание на хуки, особенно useState и useEffect.

3. Backend на Node.js:
- Познакомьтесь с Node.js и основами создания серверов. Используйте пакет express.js для написания простых RESTful API.

4. Базы данных:
- Используйте свои знания о БД, чтобы подключить бэкэнд к базе данных. MongoDB будет хорошим вариантом для начала благодаря своей простоте и интеграции с Node.js через mongoose.

### Простой проект:

Идея: Приложение "Список дел" (To-do List).

Фронтенд:

• Создайте интерфейс с использованием HTML/CSS и React.
• Позвольте пользователю добавлять, удалять и отмечать выполнение задач.

Бэкенд:

• Реализуйте API на Node.js с использованием Express.js.
• Используйте MongoDB для хранения списка задач.

Функциональные Возможности:
1. Добавление задач: Форма на React для добавления новой задачи.
2. Просмотр задач: Отображение списка задач из базы данных.
3. Удаление задач: Возможность удалить любую задачу.
4. Отметка выполнения задач: Возможность отметить задачу как "выполненная".

### Полезные ресурсы:

• JavaScript: Практические занятия и упражнения на Для просмотра ссылки Войди или Зарегистрируйся.
• React: Официальная документация и базовые уроки Для просмотра ссылки Войди или Зарегистрируйся.
• Node.js и Express: Простой туториал по созданию сервера Для просмотра ссылки Войди или Зарегистрируйся.
• MongoDB: Введение в MongoDB и использование MongoDB Atlas для простого хостинга.

### Советы:

• Не пытайтесь изучить все сразу; следуйте разработанному плану.
• Работайте над простыми проектами, чтобы закрепить свои знания через практику.
• Используйте сообщества и форумы для вопросов и поддержки.

Соблюдая такой план и постепенно расширяя свои навыки, вы сможете справиться с поставленной задачей и создать требуемое веб-приложение. Успехов в учебе и проектировании!