npm i react router semantic ui react semantic ui css with code examples 2

React Router and Semantic UI are widely used in web development to create modern and responsive web applications. React Router provides a flexible and easy-to-use way to handle routing in React applications, whereas Semantic UI offers a powerful set of pre-designed components to build visually appealing user interfaces. In this article, we will show you how to use React Router and Semantic UI along with semantic ui css in a React application with code examples.

First, we need to start a new React project and install the required dependencies. For this, we need to open the terminal and run the following commands:

npx create-react-app my-react-app
cd my-react-app
npm i react-router-dom semantic-ui-react semantic-ui-css

Here, we are installing React Router, Semantic UI React, and Semantic UI CSS in our project. Now, let's start by creating a simple React Component that will use the components from Semantic UI.

First, we import the required components from Semantic UI React:

import { Container, Header, Menu, Segment } from 'semantic-ui-react';

Now, we can use these components in our React Component:

function App() {
  return (
    <div>
      <Menu fixed="top" inverted>
        <Container>
          <Menu.Item as="a" header>
            My React App
          </Menu.Item>
          <Menu.Item as="a">Home</Menu.Item>
        </Container>
      </Menu>

      <Container text style={{ marginTop: '7em' }}>
        <Header as="h1">My React App</Header>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
      </Container>

      <Segment inverted vertical style={{ margin: '5em 0em 0em', padding: '5em 0em' }}>
        <Container>
          <Header as="h3" inverted>
            Footer Header
          </Header>
          <p>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
          </p>
        </Container>
      </Segment>
    </div>
  );
}

In the above code, we have used three components from Semantic UI:

1. Menu – This is used for creating a navigation menu. We have set the fixed="top" prop to make it fixed at the top of the page.
2. Container – This is a container for content. We have used it to wrap our header and paragraph elements.
3. Header – This is used for creating headers. We have used it to create the main header of our page.

Now, we need to use React Router to handle routing in our application. For this, we will create two more components: Home and About.

function Home() {
  return (
    <div>
      <Header as="h2">Home</Header>
      <p>Welcome to my React App!</p>
    </div>
  );
}

function About() {
  return (
    <div>
      <Header as="h2">About</Header>
      <p>This is a simple React App using Semantic UI.</p>
    </div>
  );
}

At this point, if we run the application using npm start, it will only show the contents of the App component. To show the Home and About components on different paths, we need to use React Router.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div>
        <Menu fixed="top" inverted>
          <Container>
            <Menu.Item as="a" header>
              My React App
            </Menu.Item>
            <Menu.Item as={NavLink} exact to="/">
              Home
            </Menu.Item>
            <Menu.Item as={NavLink} to="/about">
              About
            </Menu.Item>
          </Container>
        </Menu>

        <Container text style={{ marginTop: '7em' }}>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
          </Switch>
        </Container>

        <Segment inverted vertical style={{ margin: '5em 0em 0em', padding: '5em 0em' }}>
          <Container>
            <Header as="h3" inverted>
              Footer Header
            </Header>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
            </p>
          </Container>
        </Segment>
      </div>
    </Router>
  );
}

Here, we have imported three components: BrowserRouter, Route and Switch from react-router-dom.

1. BrowserRouter – This is the root Router component that we need to wrap our entire application in.
2. Route – This is used to specify the path and component that should be rendered when that path is matched.
3. Switch – This is used to group Route components and render the first one that matches the current URL.

We have also used NavLink from react-router-dom in our Menu component instead of a to create links that are aware of the current route. We have used exact prop with the Home component to match the exact path '/'.

Finally, we have used the semantic-ui-css package to import the CSS styles for Semantic UI components. We import this package in our index.js file like this:

import 'semantic-ui-css/semantic.min.css';

This will load the styles for all the Semantic UI components used in our application.

In conclusion, React Router and Semantic UI are powerful tools that can be used together to create modern and responsive web applications with ease. With our code examples, we have demonstrated how to use these libraries to create a simple React application with routing and Semantic UI components. By following these best practices, you can build robust web applications that will delight your users.

React Router is a popular library that is widely used for routing in React applications. It provides a simple and flexible way to handle client-side routing in a single-page application. React Router provides a set of components that can be used to define route configurations for a React application.

One of the key features of React Router is the ability to handle nested routes and multiple levels of routing. With React Router, you can define nested routes by specifying child routes within a parent route. This helps to keep your application organized and maintainable.

React Router also provides a range of history management strategies, including HTML5 history, hash history, and memory history. The history object is an essential part of React Router as it enables navigation between different pages in the application. It provides an API for pushing and popping states from the history stack, which allows users to navigate backwards and forwards through their history.

Another feature of React Router is the ability to pass parameters or data through URLs. This is important for making dynamic routes that can respond to user input. React Router allows you to define route parameters using a colon syntax, and these parameters can be accessed through React Router's match object. The match object contains information about how a match was found, including the URL parameters and any query string parameters.

Semantic UI is another popular library that provides pre-designed UI components for building modern web applications. The library contains a wide range of components including buttons, forms, grids, menus, and much more. These components are designed to work well together and to provide a consistent user experience across different devices and browsers.

The key benefits of Semantic UI are that it provides a flexible and modular system for building custom UI components. This means that developers can easily modify, customize, and extend the library to suit their specific needs. Semantic UI components are also designed to be easy to use, with clear and concise documentation.

Semantic UI also provides a range of theming options, which allows developers to customize the appearance of the UI components by changing the color scheme, fonts, and other visual elements. This is important for creating a consistent and cohesive user experience across different pages and sections of an application.

Finally, we also briefly discussed the semantic-ui-css package, which is used to import the CSS styles for Semantic UI components. This package contains all of the CSS styles for Semantic UI components, and it can be imported into your application's main stylesheet file. This allows you to easily apply the pre-designed UI styles to your own custom components.

Popular questions

1. What is React Router and how does it work with React applications?
   Answer: React Router is a popular library that provides a simple and flexible way to handle client-side routing in a single-page application. It provides a set of components that can be used to define route configurations for a React application. React Router works with React applications by enabling developers to define nested routes, handle history management, and pass parameters or data through URLs.

2. What are some key features of React Router that are useful for building web applications?
   Answer: Some of the key features of React Router include support for nested routes, multiple levels of routing, flexible history management strategies, and the ability to pass parameters or data through URLs. These features make it easy for developers to create complex routing configurations, respond to user input, and maintain the application's state across different pages.

3. How does Semantic UI help developers build modern and responsive user interfaces?
   Answer: Semantic UI is a library of pre-designed UI components that can be used to create modern and responsive web applications. The library contains a wide range of components including buttons, forms, grids, menus, and much more. These components can be easily customized and extended to suit the specific needs of a project. Additionally, Semantic UI provides theming options that allow developers to customize the appearance of the UI components to provide a consistent user experience across different pages and sections of an application.

4. What is the semantic-ui-css package and how is it used in combination with Semantic UI components?
   Answer: The semantic-ui-css package contains all the CSS styles for Semantic UI components. It can be used to import the CSS styles for Semantic UI components into your application's main stylesheet file. By using this package, developers can easily apply the pre-designed UI styles to their custom components.

5. How can React Router and Semantic UI be used together to create modern and responsive web applications?
   Answer: React Router and Semantic UI can be used together to create modern and responsive web applications by defining routing configurations using React Router components and incorporating Semantic UI components on different pages. By using these two libraries together, developers can create a seamless user experience that is visually appealing and easy to navigate.

Tag

stack