nayacirdan / react-learning-course-short

This repo dedicated to the course "React for Beginners". The course was created to support Ukraine 🇺🇦 and Ukrainians in the war against russia. It's completely free and open-sourced.

React For Beginners - free course by Itera

✔️ ✔️ ✔️ ✔️ ✔️ ⏳ ⏳ ⏳ ⏳ ⏳ ⏳ ⏳ ⏳

About

DISCLAIMER: All requests to "remove politics" will be removed completely without any comments. If you have another opinion - just skip this course.

This repo dedicated to the course "React for Beginners". The course was created to support Ukraine 🇺🇦 and Ukrainians in the war against russia. It's completely free and open-sourced. Feel free to contribute or make any relevant suggestions.

• Full program is here
• Presentations can be found here - https://drag13.io/react-learning-course-short/0 where the number equals the number of the lesson
• Changelog is here
• Video - pending. I will record the lessons and publish them afterwards
• Technical details are here

PreRequisites

Basic knowledge with HTML/CSS/JS

Self check:

• Example of the block element, how to draw a button
• What is the width of block element, how to center element (vertically and horizontally)
• What does .map returns, how to sum all values in array

Basic knowledge with GIT:

Self Check:

• How to create new repository, how to push to remote

Existing account at https://github.com Installed Node.JS with NPM Installed VsCode

Lessons structure, preliminary timing

• 00:00 - 00:10 - Looking through random home task
• 00:10 - 00:50 - First part of the lecture
• 00:50 - 01:00 - Break and questions
• 01:00 - 01:40 - Second part of the lecture
• 01:40 - 01:45 - New Home Task
• 01:45 - 02:00 - Questions

Workshop timing - about 1 hour

Program summary

0 Lecture: What is React

Presentation: https://drag13.io/react-learning-course-short/0/index.html

1 Workshop: Starting new project with create-react-app

Presentation: https://drag13.io/react-learning-course-short/1/index.html

2 Lecture: What is component and why you should use it

Presentation: https://drag13.io/react-learning-course-short/2/index.html

3 Workshop: Building your own component

Presentation: https://drag13.io/react-learning-course-short/3/index.html

4 Lecture: Detecting changes

Presentation: https://drag13.io/react-learning-course-short/4/index.html

5 Workshop: Managing state in React

6 Workshop: Forms with React, Formik and Yup

7 Lecture: Single Page Application

8 Lecture: React Router

9 Lecture: Network, Fetch and Axios

10 Lecture: Styling, CSS Modules and Styled Components

11 Lecture: UI libraries

12 Lecture: Tests

Donations

All donations are highly welcomed. You can donate any amount to the National Bank of Ukraine directly or to the well known charity fund Come Back Alive.

Feel free to contact me directly if any question

Sponsors