React JS

react-js

React JS is a JavaScript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

It covers all the topic that we will cover in the React JS tutorial series.

We will be setting up our React app with CLI tool. For that, you need to have Node installed on your local machine. You can download the latest version from here. Once, you have Node installed we can start with generating our React app from CLI.

We will use CLI tool called create-react-app for creating react app which creates a sample app using react that can be used as a starting point to create a full-fledged react app. It has a dev server bundled by default for development. For a production build, u can run npm run build command

We can directly use npm to install create-react-app and to generate react boilerplate app. But we will be using npx. With npx, we can generate a react app with creat-react-app but without installing create-react-app on our local machine.

npx is a package runner tool that comes with npm 5.2+. You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine.

File Upload with React Js and Spring REST

By Dhiraj, 10 August, 2019

In this tutorial, we will learn how to upload images or files from a React Js app with Spring MVC Rest. We will have a React app with and without Axios integrated with it to push selected files in the browser to the server via REST. In the client-side, we will be using HTML5 FormData and in the server, we will be using Multipart file to accept those uploaded files. To ease our Spring configuration, we will be using Spring Boot. We will have examples to upload a single file as well as multiple files from React app....

Adding JWT Authentication in React Js (with Spring Security)

By Dhiraj, 31 July, 2019

In this article, we will add authentication to our React Js app that we created in our last example. Basically, we will secure our REST APIs in the server-side and our private routes at the client-side. We will add a JWT token-based authentication and authorization in our app. The backend will be a spring boot project with spring security integrated and post-login a JWT token will be generated. Once, the token is generated, the client needs to produce that token in the request header to access all other secured resources....

Getting Started with React Material UI

By Dhiraj, 21 July, 2019

In this article, we will create a sample React Js app with material UI integrated in it. We will have an app that performs different CRUD operation on a User entity and will have a list, add and edit user route built with the material UI. We will be using different material component such as Container, AppBar, Navbar, Text Field, Data Table, Icons, etc to build our frontend app....

Spring Boot React JS CRUD Example

By Dhiraj, 20 July, 2019

This tutorial is about creating a full-stack app using Spring Boot and React.js with example. With spring boot, we will build our backend app to expose REST endpoints to perform CRUD operations on a USER entity. For the persistence storage of user, we will be using MySQL DB. At the fronted side, we will be using React.js to create our user interface. The fronted app will be a single page application with Routing integrated with it. For the REST API calls, we will be using axios....