What Is React? A Simple Guide for Students

React is a JavaScript library for building user interfaces, created at Facebook and now used by a huge number of companies. Instead of writing one long page, you build small pieces called components (a header, a product card, a search box) and combine them, like building with Lego.

When data changes, React updates only the parts of the screen that need to change. That is why it suits apps where things change all the time: dashboards, chats, shopping carts.

Learn this before React

React is JavaScript, so weak JavaScript makes React confusing. Be comfortable with HTML, CSS and these JavaScript ideas first: functions and arrow functions, arrays with map and filter, objects and destructuring, modules (import/export), and promises with async/await for fetching data.

The four ideas that are React

• Components: functions that return what should appear on the screen (written in JSX, which looks like HTML).
• Props: data a parent passes into a child component, like arguments to a function.
• State: data a component remembers and changes, such as the text in a search box. Changing state re-draws the component.
• Hooks: functions such as useState and useEffect that give components state and let them fetch data.

A first React project

Build a movie or book search: a search box, a list of results from a free public API, a loading message and an error message. Then add a favourites list that survives a page refresh. This one small app uses components, props, state, effects and data fetching.

Create the project with Vite (the old create-react-app is no longer recommended), and deploy it free on a static host so you can share a live link.

What comes after

• Routing between pages with React Router.
• A framework such as Next.js for server rendering and SEO.
• TypeScript, which most React teams now use.
• Connecting to your own backend with Node.js and a database, which makes you a full stack developer.

Where to go next

The Frontend Developer track and MERN Stack Developer track take you from JavaScript to React projects, and the frontend internship or MERN stack internship gives you reviewed React tasks for your portfolio.