These components can be composed together to build complex user interfaces. You can think of the components as building blocks that you can mix and match to create any kind of website you can imagine. Whether it's a button, a form, a navigation, or a whole section of a page, React lets you build it with ease.
One of React's secret weapons is the Virtual Document Object Model (DOM). Instead of directly changing what you see on the screen, React works behind the scenes with a virtual version of the DOM. It can compare the state of the real DOM with the Virtual DOM and trigger rerendering when it's needed. React tracks which components have changed and can update only them, without having to rerender the entire page. The Virtual DOM allows React to make updates super fast and keep your website running smoothly, even when things get complicated.
Here is an example of a JSX element:
One of the biggest problems that React is trying to solve is dynamic page updates. These updates are achieved by React's Reactivity (you can probably figure out where the library name comes from, lol). React uses special variables called state variables that allow React to determine when a component needs to be updated. By modifying these variables, React looks for a list of dependencies and updates all the necessary UI parts.
Here you can see the classic example with the count incremention.
Each time the button is pressed, the count is incremented by 1 and the component is re-rendered.
- Variables - differences between var, let, const
- Data types - string, number, object, array
- Conditions - if, else
- Functions - body, arguments, return statement, callback functions
- Loops - forEach, map, reduce, filter
- DOM manipulation / DOM Events
- ES6 - arrow functions, array methods, object destruction, modules import & export
- Promises - Fetch API, promise chaining and/or async - await