REACT MASTER CLASS /// LEARN COMPONENTS /// BUILD UI /// JSX SYNTAX /// REACT MASTER CLASS /// LEARN COMPONENTS /// BUILD UI /// JSX SYNTAX /// REACT MASTER CLASS ///

React First Steps

Say goodbye to manual DOM manipulation. Welcome to declarative UIs, Components, and the power of JSX.

⚛️App.jsx
1 / 12
1234567
⚛️

Tutor:Welcome to React! React is a JavaScript library for building user interfaces. Instead of building one giant page, React lets you build small, reusable blocks of code called Components.


Skill Matrix

UNLOCK NODES BY MASTERING CONCEPTS.

Concept: Components

A React component is a JavaScript function that returns markup. It must start with a capital letter.

System Check

Which of the following is a valid React Component name?

React Dev Network

Showcase Your Components

ACTIVE

Built your first functional React UI? Share your CodeSandbox or GitHub links!

Support Us

React: The First Steps

Author

Pascual Vila

Frontend Instructor // Code Syllabus

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called components.

What is a Component?

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen. The golden rule is that component names must always start with a capital letter (e.g., Welcome, not welcome).

JSX: JavaScript XML

JSX is a syntax extension for JavaScript. It produces React "elements". We recommend using it with React to describe what the UI should look like. Although it looks like HTML, there are stricter rules:

  • Return a single root element: To return multiple elements from a component, wrap them with a single parent tag or a <Fragment>.
  • Close all the tags: Tags like <img> must become self-closing: <img />.
  • camelCase all most things: JSX turns into JavaScript, and attributes written in HTML become keys of JavaScript objects. Therefore, class becomes className, and tabindex becomes tabIndex.

Rendering to the DOM

To render a React element into a root DOM node, pass the DOM element to createRoot(), then pass the React element to root.render().

View Full Transcript+

This section contains the full detailed transcript covering why React was created, the concept of Declarative Programming vs Imperative DOM manipulation, and the architectural benefits of the Virtual DOM (how React batches updates for performance).

React Glossary

Component

An independent, reusable piece of UI. In modern React, they are primarily JavaScript functions that return JSX.

snippet.jsx

JSX

A syntax extension for JavaScript that looks similar to XML or HTML. It translates into React.createElement() calls.

snippet.jsx

Fragment

A pattern in React for a component to return multiple elements without adding an extra node (like a div) to the DOM.

snippet.jsx

Virtual DOM

An in-memory representation of the Real DOM. React uses it to calculate the minimum number of changes needed before updating the screen.

snippet.jsx

createRoot

The React 18 API used to create a root to render or unmount React components inside a browser DOM node.

snippet.jsx

className

The JSX equivalent of the standard HTML 'class' attribute. It is camelCased because class is a JS reserved word.

snippet.jsx