Shibin Khan

What is React Router?

ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook. ReactJS uses a virtual DOM-based mechanism to fill in data (views) in HTML DOM. The virtual DOM works fast owning to the fact that it only changes individual DOM elements instead of reloading complete DOM every time.

A React application is made up of multiple components, each responsible for outputting a small, reusable piece of HTML. Components can be nested within other components to allow complex applications to be built out of simple building blocks. A component may also maintain an internal state - for example, a TabList component may store a variable corresponding to the currently open tab.

React allows us to write components using a domain-specific language called JSX. JSX allows us to write our components using HTML, whilst mixing in JavaScript events. React will internally convert this into a virtual DOM, and will ultimately output our HTML for us.

React "reacts" to state changes in your components quickly and automatically to rerender the components in the HTML DOM by utilizing the virtual DOM. The virtual DOM is an in-memory representation of an actual DOM. By doing most of the processing inside the virtual DOM rather than directly in the browser's DOM, React can act quickly and only add, update, and remove components that have changed since the last render cycle occurred.

What is React Router?

When we build a website, most of them built with React.js are SPA (single page application), but it doesn’t mean your app will have only one view. It means your app doesn’t need to reload to another view, but how can we change views and go to the next page? React Router helps us to do that!

React Router is the official and standard routing package that we use in React.js to change views, and move between pages. With the React router, we can specify the whole routing for our modules that will decide what view should be visible when we enter the specified URL but not only.

React router gives us the possibility to create protected views like, for example, the view that we need to be logged in or have any special requirements to visit. One more useful feature of the React Router is the routing history, which can keep all of the histories of our views, and come back to the specified step when needed.

I couldn’t forget to tell about handling the URL params like, for example, the id of element, to render the route that can show specified elements, and give you access to that param. We can use routing navigation in a few ways. The most popular is to type URL, visit URL by a link inside the menu, or add data to the routing history.

Lets see some example:
 

How To Import CSS In ReactJS?

Now I’ll show you how to import CSS in react.js components, in the two most easy, and kinda popular ways. When we build apps in React.js in some cases, we can use CSS frameworks like bootstrap, Bulma, or something popular now. Next, we can build a layout like puzzles and focus only on things like Javascript or Typescript logic. But sometimes, we need to create our own styling even I’d say that can happen kind of often, and how can we solve that?

There are a few methods of including CSS into the React.js components, some of them are more complicated, some less, but all of them have pros and cons. Anyway, today I’ll show you one of them, the easiest one, and the quickest to implement. I like to use that method, especially in bigger projects, when we need to have all the styles sorted and put into separate folders.

We can import the sass file into our files by using a relative import path. With that method, we can create a directory “styles” inside our project directory, sort all of the style files by feature, function, or how we want, and import the file into our component directly. It helps us sort all the helpers, variables, and necessary style up to files, where it’s needed, but still can be kept in one place.
 

import './styles.scss';

What is Node?

Node is a JavaScript environment built on the same JavaScript engine used in Google’s Chrome web browser. It has some great features that make it an attractive choice for building server-side application middle tiers, including web servers and web services for platform APIs. The non-blocking event-driven I/O model gives it very attractive performance, easily beating threaded server environments like PHP and Ruby on Rails, which block on I/O and handle multiple simultaneous users by spinning up separate threads for each.

Node Features:

Fast! (Non-blocking I/O by default). Easy to get started.
Event-driven.
First-class networking.
First-class streaming API.
Great standard libraries for interfacing with the OS, filesystem, etc…
Support for compiled binary modules when you need to extend Node’s capabilities with a lower-level language like C++.
Trusted and backed by large enterprises running mission-critical apps. (Adobe, Google, Microsoft, Netflix, PayPal, Uber, Walmart, etc…).

What is Express?

It’s a minimalist and extensible web framework built for the Node.js ecosystem. It enables you to create a web server that is more readable, flexible, and maintainable than you would be able to create using only the Node HTTP library, which can get verbose and complicated for even the most basic web servers. Express is going to make creating a web server much easier! As a matter of fact, it’s difficult to even find examples of real-world web applications that use only the Node HTTP library because you’d have to be sadistic to do it.

Hello, World!

Node & Express are easy enough that you get a basic web server to serve “Hello, world!” in about 11 lines of code:
 

What is CRUD Operation?

The CRUD concept was not originally conceived as a modern way to create APIs. CRUD actually has its roots in database records. Most modern web and mobile applications contain some form of CRUD functionality. In addition, most programmers have to deal with CRUD at some point. So, a CRUD application would be one that utilizes forms to retrieve and return data from a database.

A relational database consists of tables with rows and columns. In a relational database, each row in a table is called a record, and each column in the table represents a specific attribute or field. Users can call four CRUD functions to perform different types of operations on selected data in the database. This can be done through code or through GUI. Now, let’s take a look at each function separately.

CREATE:

This feature will add a new student to the app/database by some trigger, for example, by pressing the “Add” button in the application, which will call the corresponding function. The program calling the function would supply the values ​​for “first_name”, “last_name”, and “course”. After the function is called, a new student record will appear in the database.

READ:

This function allows you to see if there is a record about a specific student in the database. This function does not change the information about the student in any way, but only allows you to get information about him. You can also see a certain attribute.

UPDATE:

It's a function that changes information about a student. Let’s write his name. After the function is applied, the corresponding record in the database table will be changed.

DELETE:

Of course, everything should be clear here. This function either completely removes the object or removes its selected attribute.

By definition, CRUD is more of a cycle than an architectural concept. There are several CRUD loops in any web application. For example, in an online store, a customer can CREATE an account, UPDATE account information, and DELETE items from the cart. At the same time, a store admin using the same web application can CREATE shipping records, READ them as needed, and UPDATE supply lists.