Skip to content

Basic Syntax

Alright, enough high-level ideas. Let's look at some code!

Code Playground

Open in CodeSandbox
import React from 'react';
import { createRoot } from 'react-dom/client';

function FriendlyGreeting() {
return (
<p
style={{
fontSize: '1.25rem',
textAlign: 'center',
color: 'sienna',
}}
>
Greetings, weary traveller!
</p>
);
}

const container = document.querySelector('#root');
const root = createRoot(container);
root.render(<FriendlyGreeting />);

In React, components are defined as JavaScript functions. They can also be defined using the class keyword, though this is considered a legacy alternative that isn't recommended in modern React applications.

Typically, React components return one or more React elements.

This component, FriendlyGreeting, creates a React element that describes a paragraph, with some built-in styles. For simplicity, we're using inline styles here; we'll talk more about React's rich styling ecosystem in an upcoming lesson.

We render a component the same way we render an HTML tag. Instead of rendering a <div> or an <h1>, we render a <FriendlyGreeting>.

The big component rule

There aren't a ton of rules when it comes to creating components, but there's an iron-clad one: React components need to start with a Capital Letter. This is how the JSX compiler can tell whether we're trying to render a built-in HTML tag, or a custom React component.

For example, here are two JSX elements:

const heading = <h1>Hello!</h1>
const greeting = <FriendlyGreeting />

…And here are those same elements, compiled into JavaScript:

const heading = React.createElement('h1', null, 'Hello!');
const greeting = React.createElement(FriendlyGreeting, null);

A React element is a description of a thing we want to create. In some cases, we want to create a DOM node, like an <h1> or a <p>. In other cases, we want to create a component instance.

The first argument that we pass to React.createElement is the “type” of the thing we want to create. For the first element, it's a string ("h1"). For the second element, it's a function! It's FriendlyGreeting, and not "FriendlyGreeting".

The convention is to use for all React component names, though technically it's only the first letter that truly matters. We could name it Friendlygreeting, but it's much more conventional to go with FriendlyGreeting.