Basics

React is a frontend framework. It is very popular in industry.

To start learning React, you should follow the official React tutorials. The main concepts you'll need to understand to start building in React are Components and Hooks.

Components

Components are instructions to React for rendering something on the page. They are generally written as functions which return a block of JSX. They can be reusable, in which case we would allow them to be configured with props.

JSX looks like HTML code with additional JavaScript expressions wrapped in curly braces. props are provided with a syntax like HTML attributes.

Hooks

Hooks are additional functionality that can allow components to interact with React's state management features. The first hooks you'll learn about are useState and useEffect.

Context

To avoid prop-drilling, the common issue in React where props are passed down a series of descendant components before they are finally used programmatically, the React team created the Context module.

To use it, you need to use the useContext hook. To build a Context provider, you create a specific component.

DOM Reference

Sometimes, you need direct access to the DOM element. This is where we would use the useRef hook.

We pass a ref prop to an HTML element in our JSX; React will then populate the ref.current property with a reference to the rendered DOM element, and from there we have full access to its properties.

React Router

Advancing from a basic single-page application, React Router allows for simulating multiple pages in the browser.

React Router is an open source package which is installed as an additional dependency. It it not maintained by the React maintainers, but by a third party.

Alternative build system

You will encounter create-react-app when starting to learn React. As standard, create-react-app uses webpack to bundle all your React code before serving it to the browser.

Vite is an alternative to using webpack. You can scaffold a new React app with Vite.

Advantages

The main advantage of switching to Vite is that it is much faster for development as it serves your code as modules.

Advanced

You can go even further by configuring Vite to chunk the dependencies too.

with Vite

It ought to be fast; I haven't tried it. Check out the Vite Server-side Rendering guide.

with Next.js

That's kind of the whole point of Next.js: server-side rendering your React code. Next has its own routing capabilities.

with Remix

That's the whole point of Remix: server-side rendering. Remix is built by the team behind React Router, so if you like React Router, you may like Remix.

Vue.js

People apparently really like it.

Svelte

It's very cool; I've seen it used once but it really seemed great.

SolidJS

People apparently prefer this even to Svelte. I don't like the name. It is built following in React's footsteps and should be easy to learn after learning React.