How to Create a React App with CRUD Operations the Easy Way

Introduction

In this article, I’m going to be building a React App with CRUD (create, read, update, and delete) operations without writing any code whatsoever using Visual Studio 2017 and ASP.NET Core 2.0. To accomplish this, I’ll be using React App Generator, which you can download for free from http://bssdev.biz/React-App-Generator (look for the free download link at the bottom). Note: You will need to create a free account in order to download the app.

Background

React App Generator is an ASP.NET Core tool that allows .NET developers to quickly build a 100% React application. React App Generator creates everything you need for a 100% React application with full CRUD capabilities from either your Database Schema or your Application Models.

Note: This version of React App Generator requires ASP.NET Core 2.0. It is incompatible with ASP.NET Core 1.x and 2.1, which creates React project with different structures.

Let’s start by building our base app…

Building a New React App

1. Open Visual Studio and select New Project.
2. From the New Project dialog box, select .NET Core and then ASP.NET Core Web Application (Figure 1):

   

   Figure 1.
3. From the ASP.NET Core Web Application dialog box, select React.js (Figure 2):

   

   Figure 2.

Creating Our Models

We need to create a model to use with our app. For this article, we’ll be creating a model called Actor as shown below. We’ll name the file models.cs since we’ll be keeping all of our models in this file.

public class Actor
{
[DatabaseGenerated(DatabaseGeneratedOption.Identity)]
[Key]
[Required]
[DisplayName("Id")]
public int Id {get; set;}

[Required]
[MaxLength(50)]
[DisplayName("Name")]
public string Name {get; set;}

[MaxLength(10)]
[DisplayName("Gender")]
public string Gender {get; set;}

[DisplayName("Age")]
public int? Age {get; set;}

[MaxLength(255)]
[DisplayName("Picture")]
public string Picture {get; set;}
}

Note: If you’re new to Visual Studio, you may need to hover over any text with squiggly lines and add any necessary “using” statements.

We’ll also need a DbContext for our model since our data will be coming from a SQL database, but it just as easily could have come from MySQL or a NOSQL DocumentDb store. We’ll name it AppDbContext.cs.

public class AppDbContext : DbContext
 {
 public AppDbContext(DbContextOptions<appdbcontext> options)
 : base(options)
 {
 }
 
 public DbSet<actor> Actors {get; set;}

}
}    
</actor></appdbcontext>

That’s all we need. We can now use React App Generator to create our entire app with CRUD operations, and even built-in paging and sorting…

Running React App Generator

1. Run the React App Generator application.
2. In the Source section, specify the path to your models.cs file by clicking the browse button (…) and navigating to it.
3. In the Table/Model box, specify the name of the model to process using the browse button (…) and selecting it. For this example, it's Actor.
4. In the DbContext box, specify AppDbContext as the Database Context.
5. And in the Namespace box, enter the name of the application that you created above in “Building a New React Application”.
6. Then, click the Let’s Go button to make the magic happen.

If all went well, you should see a Result message box that says everything succeeded and tells you what the next steps are. If you’ve gotten that message, make a mental note of the Next Steps and click the OK button.

To apply the content to the base application we created above, we simply copy the content to our project. To do that, just click the magnifying glass button to the right of the Let’s Go button. Windows Explorer will open showing the output. Simply select all of the files and paste them to the root of your project (the folder that contains the: bin/ and ClientApp/ folders as well as a few others). We just need to configure a few things and we can run our app…

Configuring Your React App

We need to ensure that all of the npm packages required by the app have been downloaded. In Solution Explorer, we need to expand Dependencies, then right-click on the npm folder, and select Restore Packages from the popup menu. It may take a while so you’ll need to be patient.

tsconfig.json

We also need to make sure ‘strict’ mode is turned off in tsconfig.json (located at the root of your application).

"compilerOptions": { "strict": false

AppSettings.json

We also need to make sure we have a connection string for our AppDbContext in appsettings.json. It should look something like this:

"ConnectionStrings": {
 "AppDbContext": "Server=localhost;Database=Movies;Integrated Security=true;"
 },

We can now compile our app by right-clicking on the project in Solution Explorer and selecting Rebuild. If the npm packages have not finished downloading, you’ll get a message indicating the build is being delayed.

And that’s it! Once the app compiles, you can run it…

…you’ll notice we have links for our CRUD operations: Create, Details, Edit and X (Delete), as well as built-in paging and sorting without writing any code (except for creating our model). And React App Generator also includes support for OpenIDConnect authentication and authorization, which I’ll leave for another article. Ciao!