Components

Applications built with React are made with (reusable) components. Components are your building blocks. To gain confidence using React, you should learn to divide your application or project into these separate components. The following picture gives you an idea of how to do that with a very basic app.

JSX

JSX is an HTML-like syntax that is “transpiled” (or converted) into JavaScript so a browser is able to process it. One of the primary characteristics and features of React is the ability to combine JavaScript and JSX.

One thing you should know about JSX is that you can’t use some JavaScript protected words as html attributes anymore, such as class, onchange, or for. Instead of class you will need to use className, instead of onchange you write onChange, and instead of for, you must use … wait for it … htmlFor. All attributes in JSX are written in camelCase and some have their names changed completely to avoid the transpiler getting too confused.

When you want to return elements Sibling to another, they need to be wrapped in a single parent element.

// BAD - will throw an error!
render() {
    return (
        <h1>Hello world</h1>
        <h2>Welcome to my React page!</h2>
    )
}

// GOOD
render() {
    return (
        <div>
            <h1>Hello world</h1>
            <h2>Welcome to my React page!</h2>
        </div>
    )
}

Finally, to be able to reuse this App component we created in other files of our project, we have to export the component. In our example, we export the component as the file’s default export:

export default App;

When you are going to use a component in another component file you should import it first.

Function Component

So far, so good! We have already learned a lot about components in React. Using class components is one of two ways of defining components in React. The other, more modern, approach is to define the component as a function.

A basic functional component looks something like this:

import React from 'react';

function App() {
  return <div className="App">Hello World!</div>;
}

// OR (arrow-function syntax)

const App = () => {
  return <div className="App">Hello World!</div>;
};

// OR (implicit return)

const App = () => <div className="App">Hello World!</div>;

export default App;

As you can see, there are a few differences between functional and class components. With functional components:

1. We don’t have to import and extend “Component” from React.

2. We don’t need a constructor.

3. We don’t need the render function, instead, we put the return statement right at the end of the function body.

There are more differences which we will encounter when discussing props, state, and lifecycle methods, but it’s enough for you to understand this much for now. Also which kind of component (class or function) to use will be discussed later.