React is perhaps the most popular JavaScript library for creating and building user interfaces. It was developed for the needs of Facebook and Instagram, which are actively investing in it today. React is widely used in Front-End development to create web applications with changing data.
This course will help you understand the features of React and answer why this library is so popular in the world of Front-End. During the study, we will go from the general principles according to which the web works to writing modern applications using React. Let’s look at the advantages and disadvantages of SPA and consider worthy alternatives.
AT THE END OF THE COURSE YOU WILL
- Learn how to use React to create modern applications
- Learn how to work with data and manage the status of an application (Redux)
- Freely use new features of React
- Learn how to work with API (+ authentication)
- Learn to work with forms and the tools available to them
FOR WHOM
The course is aimed at developers with minimal experience in JavaScript programming (but with a strong theoretical background).
The program is useful for those who have worked with other frameworks on the Front-End, or face the choosing of the main tool for further work.
PROGRAM
The course is designed for 14 lessons up to 2 hours each. After each lesson, homework and individual student work are provided. There is also a final project upon completion of the course.
LESSON 1 Introduction
- Review of the course structure and work on it
- Overview of tools that will be used during the course (Git, Github, Git flow, IDE, Chrome dev tools, NPM, Node.js)
- How the web works
- Overview of approaches to creating web applications (SPA, MPA, PWA). Development of these approaches
- What is a Framework
- Why React
LESSON 2 Review of JavaScript basics
- Overview of the language as a whole
- Objects
- Arrays
- Functions
- Asynchronous JS
- New ES6 + standards
- Recommendations for writing quality code
LESSON 3 DOM && BOM
- Events
- Navigation by elements
- Available data warehouses in the browser and how to work with them
- Overview of other browser APIs
LESSON 4 Introduction to React
- What is React
- How to add React to a page
- Advantages and disadvantages
- VirtualDOM
- How to properly divide the application into components
- React tools – create-react-app, code debugging, browser extensions
LESSON 5 JSX and rendering
- JSX overview
- Rendering of elements
- JSX event handling
- Lists and work with them
- Conditional rendering
- Ref
- Fragments
- Render prop
LESSON 6 Condition and properties of the component
- Stateful and stateless components
- Data flow and exchange in components
- PropTypes
- Anti-patterns for condition and properties
LESSON 7 Life cycle of components
LESSON 8 Forms and work with them
- Validation of forms
- Overview of existing packages for working with forms
LESSON 9 React routing
- History API
- React router
LESSON 10 Application Status Management (Redux)
- Application status management options
- Redux pros and cons
- Flux architecture
- Redux architecture
- Side effects: middleware (redux-thunk, redux-saga, redux-router, etc.)
- Structuring Redux in the project structure
- Redux tools
LESSON 11 Hooks API
- An overview of the hooks available in React
- Basics of creating your own hooks and possible options for their use
- Best practices
- Anti-patterns
LESSON 12 Interacting with a data server via API
- Fetch API
- Packages for sending requests
- Authentication and authorization
LESSON 13 Styles in React
- Overview of tools for writing styles
- Animation in React
LESSON 14 Final
- React testing – review of tools, general recommendations
- React Native and React VR
- Where to move next
REQUIREMENTS FOR PARTICIPANTS
- Knowledge of HTML / CSS
- Basic knowledge of JS
- Knowledge of DOM
- Basic GIT knowledge will be a plus
LANGUAGE
Classes will be held in English.
