React 2020 — P2: Deeper Intro. Let’s take a deeper look into React and…
By: Dino Cajic
Tags: React, JavaScript, Programming, Web Development, Software Development

In the previous article, we skimmed the surface of the React application that we created. Now, let’s take a deeper look into the application and setup the project structure for the React app that we’ll be creating throughout this series.

We’ve looked at public/index.html in the previous article, but why is this the file that gets the React app? This is the file that your server will send the user to when he/she visits your website. The name index is the default file name that most servers will look for in the public directory. If you start your React application using npm start and inspect the code in your browser, you’ll notice that there are some scripts that are included at the bottom of the page.

Those scripts are what load the React application into your <div id=”root”>.

We’ve already walked through the current process, but lets recap it quickly.

React’s entry point is src/index.js src/index.js imports React, ReactDOM, and the App component. React and ReactDOM are packages. The App component is imported from src/App.js. The App component is a functional component that returns a JSX element. In this case, it returns <div>Blank Page</div>. The App component is exported from App.js and is imported in index.js. Once imported, it’s rendered using the ReactDOM.render() method. The render() method places the App component content into the HTML element that contains the id=”root” attribute.

What if we wanted to create another page? In traditional static HTML page website creation, you would need to create public/about.html. React applications are called Single Page Applications, so the only point of entry to the app is through public/index.html: <div id=”root”>.

Components

A component is just a single portion of the UI. Once created, it can be used over and over again. Let’s take a look at the same diagram we looked at in the Intro/Installation article.

We have numerous different component: header, nav, footer, etc. The article components are grouped inside of the section component, which means that components can house other components. All of the components above are located inside of the main component, which for us will be the App component.

There are different components that we can create, but they fall under two categories: statefull and stateless components. Some components have state, and others don’t. We’ll be covering state in a later article, but in essence, state is an object that stores data and is accessible to the component.

There are also functional components and class-based components. You’ve seen an example of a functional component when you looked at src/App.js. A functional component is just a JavaScript function that returns a JSX element.

In the example above, src/App.js contains a function named App (the functional component), which returns the JSX div element.

You might not be familiar with class based components though. A class based component is a class that extends React.Component and contains a render() method that returns a JSX element. We can convert the App functional component above into a class component pretty easily.

No other changes are necessary to your code. React knows to call the render() method, which will return the JSX element.

Why use class-based components over functional components? Before hooks were introduced, only class components could make use of state. That’s not true anymore. I come from a class-based OOP background so I tend to prefer classes over hooks. However, hooks seemed to be pushed by React, so I think it’s a safer bet right now to use hooks than classes. I’ve secretly been enjoying all of the other OOP based developers voicing their opinions online stating that they enjoy class components rather than functional components. However, we’re here to learn React so we’ll be looking at both in detail.

Setting up the Project Structure

We’re going to be using the App.js file as our entry point. Any new component that we create will be imported into App.js and will be rendered there. We’ll create a Components directory under our src directory and will place all of our components there.

Let’s create a quick component to demonstrate that. Right click on the directory and create a new file: Test.js.

Each React component must start with the react import statement. We’ll create a functional component that returns a JSX element and we’ll export that component.

The component is created but it does nothing for us right now. Since we’ll be using our App component to render all of our other components, we’ll need to import the Test component into our App component and render it there.

Looking at src/App.js above, we import the Test component from the src/Components/Test.js file. The ‘./’ states, start from the current directory (where this file is located), and then go into the Components directory. Once imported, the Test component is rendered on line 9 using the <ComponentName /> syntax. If a JSX element does not have a closing tag, you must provide it with a self closing tag: <ComponentName> is not valid.

I hope that you’re starting to understand how the logic flows throughout the React app. We’ll be exploring each of these concepts individually in the next few articles and reiterating how the code flows through the app.