Learn-with-GPT

RU

Привет!

После очередного забрасывания изучения фронтенда я решил прибегнуть к помощи GPT у которого попросил написать основные навыки для прохождения собеседования на junior позицию и дедлайн на изучение в 2 месяца, а также дать задания для закрепления. На данный запрос я получил расписание:

Неделя 1: JavaScript (ES6 и выше)

• День 1-2: Основы JS (стрелочные функции, деструктуризация, шаблонные строки).
• День 3-4: Promises и async/await.
• День 5-6: Практика: напиши небольшие скрипты, используя изученные функции.
• День 7: Рефлексия: что тебе понравилось? Где у тебя возникли трудности?

Неделя 2: React (основа)

• День 8-9: Изучение функциональных и классовых компонентов, JSX и виртуальный DOM.
• День 10-11: useState и useEffect.
• День 12-14: Создание своего небольшого проекта на React (например, ToDo приложение).

Неделя 3: Углубление в React

• День 15-16: Обработка событий, работа с формами.
• День 17-18: Использование useReducer и контекста (useContext).
• День 19-21: Погружение в тестирование компонентов с использованием React Testing Library.

Неделя 4: TypeScript и Redux

• День 22-23: Изучение основ TypeScript и его использование в React.
• День 24-25: Введение в Redux (actions, reducers, store).
• День 26-28: Создание простого проекта с использованием Redux и TypeScript.

Неделя 5: Управление состоянием и Fetch API

• День 29-30: Глубокое изучение Redux и redux-thunk для асинхронных действий.
• День 31-32: Изучение Fetch API, работа с REST API.
• День 33-35: Реализация асинхронного API-вызова в проекте.

Неделя 6: CSS и инструменты

• День 36-37: Основы CSS и Flexbox.
• День 38-39: БЭМ-методология.
• День 40-42: Вводная работа с Git (настройка репозитория, коммиты, ветки).

Неделя 7: Инструменты сборки и тестирование

• День 43-44: Углубление в npm и yarn.
• День 45-46: Написание unit-тестов с Jest.
• День 47-49: Тестирование React-компонентов с React Testing Library.

Неделя 8: Повторение и практика

• День 50-54: Повторение ключевых тем, практическое применение знаний, работа над существующими проектами или создание нового проекта с использованием всех изученных технологий.
• День 55-56: Подготовка к собеседованию (практика ответов на вопросы, возможные проекты).

И задания для самостоятельной практики:

1. JavaScript (ES6 и выше)

Задание 1: Стрелочные функции

• Напиши функцию, которая принимает два числа и возвращает их сумму и произведение, используя стрелочные функции.

Задание 2: Деструктуризация

• Создай объект с данными пользователя (имя, возраст, email) и распакуй значения в отдельные переменные, затем выведи их в консоль.

Задание 3: Шаблонные строки

• Напиши функцию, которая принимает имя и возраст пользователя и возвращает строку в формате: "Имя: [имя], Возраст: [возраст]".

Задание 4: Promises и async/await

• Создай функцию, которая делает GET-запрос к публичному API (например, jsonplaceholder.typicode.com) и выводит результат в консоль. Используй как Promises, так и async/await.

2. React (основа)

Задание 5: Создание простого компонента

• Создай функциональный компонент Greeting, который принимает props и отображает приветствие (например, "Hello, [имя]!").

Задание 6: Состояние с useState

• Создай компонент Counter, который отображает число (изначально 0) и две кнопки: "Увеличить" и "Уменьшить". Используй useState для управления состоянием.

Задание 7: Эффекты с useEffect

• Создай компонент, который использует useEffect для вывода в консоль сообщения каждый раз, когда компонент монтируется.

3. Углубление в React

Задание 8: Обработка событий

• Создай форму с полем ввода и кнопкой. При нажатии на кнопку выводи значение поля ввода в консоль.

Задание 9: useReducer

• Создай компонент для управления сложным состоянием с помощью useReducer, например, для управления списком задач (то есть добавление, удаление и отметка выполненной задачи).

Задание 10: Тестирование компонентов

• Напиши тест для компонента Greeting с использованием React Testing Library, чтобы проверить, корректно ли отображается приветствие.

4. TypeScript и Redux

Задание 11: Применение TypeScript

• Конвертируй простой функциональный компонент из JavaScript в TypeScript, добавив типизацию для props.

Задание 12: Redux actions и reducers

• Создай простое приложение, которое включает в себя redux-store с одним action и соответствующим reducer для увеличения/уменьшения счётчика.

5. Управление состоянием и Fetch API

Задание 13: Асинхронный запрос с Fetch API

• Создай компонент, который загружает список пользователей из API jsonplaceholder и отображает их в виде списка на странице.

Задание 14: Использование redux-thunk

• Расширь своё приложение с redux, добавив асинхронный action creator с использованием redux-thunk для загрузки данных из API.

6. CSS и инструменты

Задание 15: Flexbox

• Создай простой макет из трёх колонок, используя Flexbox. Каждая колонка должна занимать равное пространство и иметь разные цвета фона.

Задание 16: БЭМ-методология

• Измени стили в существующем проекте, применяя БЭМ-методологию к классам CSS.

7. Инструменты сборки и тестирование

Задание 17: Управление зависимостями

• Создай новый проект на React, используя Create React App, и добавь несколько зависимостей (например, axios и react-router-dom) через npm или yarn.

Задание 18: Написание unit-тестов с Jest

• Напиши несколько unit-тестов для функции, выполняющей арифметические операции (сложение, вычитание).

Задание 19: Тестирование компонентов с React Testing Library

• Проверь, что компонент счётчика корректно обновляет состояние и рендерится при изменении состояния.

8. Повторение и практика

Задание 20: Итоговый проект

• Создай небольшое приложение, которое объединяет все изученные темы. Например, приложение для задач (ToDo), в котором использованы:
  • React для интерфейса
  • Redux для управления состоянием
  • TypeScript для типизации
  • Fetch API для загрузки данных из внешнего источника.
  • Применение CSS с Flexbox и БЭМ.

В этот раз точно должно получиться!

ENG

Hi!

After another bout of frontend learning, I decided to enlist the help of GPT, who asked me to write down the basic skills to interview for a junior position and a deadline of 2 months to learn them, as well as give me assignments to reinforce them. I received a timetable for this request:

Week 1: JavaScript (ES6 and above)

• Day 1-2: JS basics (arrow functions, destructuring, pattern strings).
• Day 3-4: Promises and async/await.
• Day 5-6: Practice: write small scripts using the learned functions.
• Day 7: Reflection: what did you like? Where did you have difficulties?

Week 2: React (basics)

• Day 8-9: Learning functional and class components, JSX and virtual DOM.
• Day 10-11: useState and useEffect.
• Day 12-14: Creating your own small project in React (e.g. ToDo app).

Week 3: Getting Deeper into React

• Day 15-16: Handling events, working with forms.
• Day 17-18: Using useReducer and context (useContext).
• Day 19-21: Diving into component testing using the React Testing Library.

Week 4: TypeScript and Redux

• Day 22-23: Learning the basics of TypeScript and its use in React.
• Day 24-25: Introduction to Redux (actions, reducers, stores).
• Day 26-28: Creating a simple project using Redux and TypeScript.

Week 5: State Management and Fetch APIs

• Day 29-30: An in-depth look at Redux and redux-thunk for asynchronous actions.
• Day 31-32: Exploring the Fetch API, working with the REST API.
• Day 33-35: Implementing an asynchronous API call in a project.

Week 6: CSS and tools

• Day 36-37: CSS and Flexbox basics.
• Day 38-39: BEM methodology.
• Day 40-42: Introduction to Git (repository setup, commits, branches).

Week 7: Build tools and testing

• Day 43-44: Getting deeper into npm and yarn.
• Day 45-46: Writing unit tests with Jest.
• Day 47-49: Testing React components with the React Testing Library.

Week 8: Repetition and Practice

• Day 50-54: Repeating key topics, practicing, working on existing projects or creating a new project using all the learned technologies.
• Day 55-56: Preparing for the interview (practicing answering questions, possible projects).

And assignments for independent practice:

1. JavaScript (ES6 and above)

Assignment 1: Arrow functions

• Write a function that takes two numbers and returns their sum and product using arrow functions.

Assignment 2: Destructuring

• Create an object with user data (name, age, email) and unpack the values into separate variables, then output them to the console.

Assignment 3: Template strings

• Write a function that takes a user's name and age and returns a string in the format: “Name: [name], Age: [age]”.

Assignment 4: Promises and async/await

• Create a function that makes a GET request to a public API (e.g., jsonplaceholder.typicode.com) and outputs the result to the console. Use both Promises and async/await.

2. React (basics).

Assignment 5: Create a simple component

• Create a functional Greeting component that accepts props and displays a greeting (e.g., “Hello, [name]!”).

Task 6: State with useState

• Create a Counter component that displays a number (initially 0) and two buttons, Increase and Decrease. Use useState to control the state.

Assignment 7: Effects with useEffect

• Create a component that uses useEffect to display a message to the console each time the component is mounted.

3. Getting Deeper in React

Assignment 8: Event Handling

• Create a form with an input field and a button. When the button is clicked, output the value of the input field to the console.

Assignment 9: useReducer

• Create a component to manage complex state using useReducer, for example, to manage a list of tasks (i.e. adding, deleting and marking a task completed).

Assignment 10: Testing Components

• Write a test for the Greeting component using the React Testing Library to see if the greeting is displayed correctly.

4. TypeScript and Redux

Assignment 11: Applying TypeScript

• Convert a simple functional component from JavaScript to TypeScript by adding typing for props.

Assignment 12: Redux actions and reducers

• Create a simple application that includes a redux-store with one action and a corresponding reducer to increase/decrease the counter.

5. State management and Fetch API

Assignment 13: Asynchronous Query with Fetch API

• Create a component that loads a list of users from the jsonplaceholder API and displays them as a list on the page.

Assignment 14: Using redux-thunk

• Extend your application with redux by adding an asynchronous action creator using redux-thunk to load data from the API.

6. CSS and tools

Assignment 15: Flexbox

• Create a simple three-column layout using Flexbox. Each column should occupy equal space and have different background colors.

Assignment 16: BEM Methodology

• Change the styles in an existing project by applying BEM methodology to CSS classes.

7. Build tools and testing

Assignment 17: Dependency Management

• Create a new React project using Create React App and add a few dependencies (e.g. axios and react-router-dom) via npm or yarn.

Assignment 18: Writing unit tests with Jest

• Write some unit tests for a function that performs arithmetic operations (addition, subtraction).

Assignment 19: Testing Components with the React Testing Library

• Verify that the counter component correctly updates the state and renders when the state changes.

8. Repetition and practice

Assignment 20: Final Project

• Create a small application that integrates all the topics you have learned. For example, a task application (ToDo) that uses:
  • React for the interface
  • Redux for state management
  • TypeScript for typing
  • Fetch API for loading data from an external source.
  • Applying CSS with Flexbox and BEM.

It should definitely work this time!