Getting Started with React
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 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
wrapped in curly braces.
props are provided with a
syntax like HTML attributes.
Hooks are additional functionality that can allow components to
interact with React's state management features. The first hooks
you'll learn about are
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.
Sometimes, you need direct access to the DOM element. This is
where we would use the
We pass a
ref prop to an HTML element in our JSX;
React will then populate the
with a reference to the rendered DOM element, and from there we
have full access to its properties.
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.
The main advantage of switching to Vite is that it is much faster for development as it serves your code as modules.
You can go even further by configuring Vite to chunk the dependencies too.
It ought to be fast; I haven't tried it. Check out the Vite Server-side Rendering guide.
That's kind of the whole point of Next.js: server-side rendering your React code. Next has its own routing capabilities.
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.
Alternatives to React
People apparently really like it.
It's very cool; I've seen it used once but it really seemed great.
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.