Creating the server part (.NET Core Web API part) is just a half of the job we want to accomplish. From this point onwards, we are going to dive into the client side of the application to consume the Web API part and show the results to a user by using React components and many other features.

So let’s dive right into it.

If you want to see all the basic instructions and complete navigation for the .NET Core series, check out the following link: Introduction to the .NET Core series.

For the complete navigation and all the basic instructions of the React series, check out: Introduction to the React series.

The source code is available at GitHub: React series – Creating React Project – master branch

This post is divided into several sections:

Creating a New Project

To create a new project, we need to execute the Create React App command which is going to create a new application. Let’s open Visual Studio Code, and in a terminal window (CTRL+`), we need to navigate to the folder we want our project in and type the command:

After some time a new project is going to be created:

Created project - Creating React Project

If you want to learn in more detail about the Create React App, visit this site: https://github.com/facebook/create-react-app.

Third-Party Libraries

We are going to use the React-Bootstrap library for styling our components, so let’s install it and import it into the project.

Type this command to install the React-Bootstrap and Bootstrap version 3 libraries:

React Bootstrap - Creating React Project

After the installation, import the Bootstrap library inside the index.js file:

Now we can use Bootstrap in our project.

React Components Overview

The React is a framework for creating the SPA’s (Single Page Application) applications. Therefore, we are going to create all of our pages in one page. That page is the index.html. If we take a look at that page, we are going to find this code line:

This is the place where all of our pages are going to be generated.

But how does React know to render all the pages inside that tag?

Well, if we take a look at the index.js file, we are going to find this code line:

What this means is that React will render all the components from the App component to the index.html page inside the div with id=root. This also means that App component is going to be the main component of our entire application.

So let’s talk a bit about components in React. There are two types of components:

  • Stateful (class) components and
  • Stateless (functional) components

The App component is a stateful component because it has access to the state. Stateful components also have the lifecycle events and access to the props object with the this.props expression. If we look in the App.js file, we are going to notice the render() function which is one of the lifecycle functions. Stateful components must have at least the render() function from all the lifecycle functions inside the React. They must inherit from the Component class.

Stateless components are much simpler than stateful components. They don’t have a lifecycle and should be used when there’s no need for the state inside our component. They have access to the props as well, but that props object is provided by React as a parameter.

Whether we use the stateful or the stateless components we must export that component to use it in any other component.

Creating Our Components

Before we start with the creation of the components, let’s modify the App.js and App.css files. Remove all the code from the App.css file and modify the App.js file:

We are going to notice an error now because the return() function demands one root tag, but we are going to fix this soon.

Before we continue, let’s create the base folder structure for the stateful components (containers) and functional components (components). This action is not a must but it is a good practice to separate your class and functional components. We are going to put the App.js file inside the containers folder and to modify the index.js file because it imports the App.js.

Folder structure - Creating React Project

Now just modify import statement inside the index.js file and remove import for the logo.svg:

Excellent.

Let’s create our first component.

In the components folder, create a new folder and name it Layout. Then inside this folder, create a Layout.js file and modify it:

Layout created - Creating React Project

Let’s take some time to review this code. First of all, this is a stateless component (functional) and that’s because we don’t have class in here but just a function (arrow function to be more precise). Because this is not a class component we don’t need to extend Component, therefore we are not importing it at all. The Grid and a Row are React-Bootstrap components. If you are familiar with the Bootstrap library, the Grid and the Row are equivalents to the <div class=”row”> and <div class=”container”> elements.

The functional component is fetching the props object through the props argument and all the properties from the props object are going to be available inside this functional component. One of those properties is the “children” property, which is going to show all the data between the opening and closing Layout tag (<Layout> everything in here is a children property of a props object </Layout>). We are going to see this in action in the next example.

Finally, we are exporting this component. This type of export is called the default export.

Let’s continue by modifying the App.js file:

Execute the npm start command in our terminal and we should be able to see our page on the localhost:3000 (not a pretty page but it is a start 🙂 ) :

First page - Creating React Project

Home Component

We are going to continue with the Home component. So, let’s create a folder structure for this component first:

Home component folder structure

Now, let’s modify the Home.js component:

Then we need to modify the Home.css file:

Finally, modify the App.js file:

When we save all of our files, the page on the localhost:3000 should look like this:

Home component - Creating React Project

Conclusion

At this point, we have a working component and a React application that we can run in our browser. But it is just a beginning. We have a long way ahead of us because there are still a lot of important React features to introduce to the project.

By reading this post you’ve learned:

  • The way to set up third-party libraries
  • The overview of the React components
  • How to create components
  • Difference between stateless and stateful components
  • How to use React-Bootstrap

Thank you for reading the article and I hope you found something useful in it.

In the next part of the series, we are going to learn how to create navigation in the project and also how to use routing.


If you have enjoyed reading this article, please leave a comment in the comments section below, and if you want to receive the notifications about the freshly published content we encourage you to subscribe to our blog.