After have created our first app, now we need to understand what's happening inside our React application. I've made some changes to the application I created in the previous post, this is the new structure:

I deleted some files that we are not going to need. I like to use this structure: I put all the Component's folders inside a containers folder, and I only leave outside the containers folder the <App>component, which I use as a wrapper. Now, let's start analyzing the files.

index.html & index.js

These two files are very related. After cleaning up the index.html file that create-react-app created, we have this:

The most important thing for us right now is the highlighted area: <div id="root"></div>. Believe or not, our index file's body will not have much more than this simple div. The key element here is the id="root", because with this id, we're going to indicate React where all the components are going to be rendered. That is, all the elements and components we create, after rendering, will appear inside this div.

Now, in the other hand, let's check index.js file:

Let's analyze it line by line:

• Line 1: every React component must have this line. This indicates that we are going to need the React library to work. No React, means no application.
• Line 2: we need this library to indicate to our application that we are we going to render our components in some place in the DOM (See line 5).
• Line 3: this line will import a component called App that's inside the ./ directory. The components are the basic structures that contains the HTML code we want to be shown.
• Line 5:

ReactDOM.render(
    <App />, 
    document.getElementById('root')
);

This is one of the most important parts. In this line, the ReactDOM.render() method receives two arguments: a React component, and a place somewhere in the index.html file where the React component we just specified is going to be rendered. Then, this means that our <App/> component will be rendered in the element in our index.html file whose id is root.

It's kind of a convention that we use the <App/> component as a wrapper: we put all the components that will structure our web application inside <App/> and then, we render it.

Components

By the time we created our application the only component we had was App. I created another one called TestComponent. Every component follows this basic structure:

import React, { Component } from 'react';

class componentName extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default componentName;

Now we know that every React component is a class. This class extends the Component class from the react module, and as we said before, we need to import React from react in order to get our component to work. Inside the render() method, we are going to return only one element, it's common that we wrap everything with a big <div>. Inside the component file we can define several classes, but we specify which one is going to be exported as default with the last line. I just added some information to my TestComponent, and style with some CSS:

We are working basically with Javascript: the word class becomes a Javascript's reserved word, that means that we can not use class inside our HTML tags like we used to do, but instead we use the word className, as shown in the example above.

Now, we are going to import our newly created TestComponent inside Appto see how it looks like.

As you might notice, we imported the test component, and we use it as HTML tags. In the example, I used it in two ways: as a self-closing tag, and in the traditional open-closing tag way. In React, every component must be properly closed, that means we cannot use tags like <br>, but we can use <br/>. Now let's see how our apps looks like.

As expected, the two ways of using our TestComponent component worked.

Now you know the basics of React's components. If you liked this post, upvote, resteem it and comment it below. I'd really appreciate your suggestions and I'll answer your questions.