React - rvdegroen/notes GitHub Wiki
Table of contents
What is React?
React is a front-end framework that uses javascript to create faster and easier user interfaces and repitive elements. It is open source created and maintained by Facebook. It's a tool to render the User Interface (UI) of modern web applications. React utilizes a component architecture for building user interfaces. Each component can be re-used.
How does React work?
You can combine HTML, JS and CSS for each different component on the website. This way you can make the website more interactive.
For example, with Twitter you can scroll down. The website recognizes that you have reached the bottom and only your tweets will refresh even though the rest of the page stays the same.
React is written in JSX
Efficient rendering
React has a more effecient way of rendering webpages by comparing the differences of the old DOM tree to the new one, which is called ‘divving’ or ‘divvying’.
By looking at the differences it will only re-render the parts that have changed in comparison with the old version of the website.
How did we set up our project?
Since we'll be using Vite for building our application, we'll be using the Vite React Template with the following line, written in the terminal: npm create vite@latest my-vue-app -- --template react
In node we manually install our dependencies and require our dependencies in order to use them.
const react = require("react");
const reactDom = require("react-dom");
You can also use import, whcih would look as following:
import React from "react";
import ReactDOM from "react-dom";