What is React & React Router & How to use CSS in react?

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:

<Switch>
    <Route path="/about">
        <About />
    </Route>
    <Route path="/contact/:id">
        <Contact />
    </Route>
    <Route path="/contact">
        <AllContacts />
    </Route>
    <Route path="/">
        <Home />
    </Route>
</Switch>

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.