ReactJS | Install Necessary Modules (Example)

Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about how to install the necessary modules in a React application.

The application uses below third-party react libraries -

• Redux

• React Redux

• React Router

• Formik

• Redux Thunk (for async fetch api)

Install all these libraries using npm package manager via the below command -

npm install --save redux react-redux react-router-dom formik redux-thunk

Configure Router

Next, create a new file, Home.js beneath the src/component folder and then write a basic Home component.

import React from "react";

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home</h1>
         </div>
      );
   }
}
export default Home;

Create a new file, ExpenseEntryItemForm.js under src/components folder and then write a basic ExpenseEntryItemForm component.

import React from "react";

class ExpenseEntryItemForm extends React.Component {
   render() {
      return (
         <div>
            <h1>Expense list</h1>
         </div>
      );
   }
}
export default ExpenseEntryItemForm;

Create a new file, ExpenseEntryItemList.js under src/components folder and then write a basic ExpenseEntryItemList component.

import React from "react";

class ExpenseEntryItemList extends React.Component {
   render() {
      return (
         <div>
            <h1>Expense form</h1>
         </div>
      );
   }
}
export default ExpenseEntryItemList;

Create a file, App.css under src/components folder and then include generic style for the application.

html {
   font-family: sans-serif;
}
a{
   text-decoration: none;
}
p, li, a{
   font-size: 14px;
}
nav ul {
   width: 100%;
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: rgb(235,235,235);
}
nav li {
   float: left;
}
nav li a {
   display: block;
   color: black;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 16px;
}
nav li a:hover {
   background-color: rgb(187, 202, 211);
}
input[type=text], input[type=number], input[type=date], select {
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-sizing: border-box;
}
input[type=submit] {
   width: 100%;
   background-color: #4CAF50;
   color: white;
   padding: 14px 20px;
   margin: 8px 0;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}
input[type=submit]:hover {
   background-color: #45a049;
}
input:focus {
   border: 1px solid #d9d5e0;
}
#expenseForm div {
   border-radius: 5px;
   background-color: #f2f2f2;
   padding: 20px;
}
#expenseForm span {
   color: red;
}
html {
   font-family: sans-serif;
}
table {
   border-collapse: collapse;
   border: 2px solid rgb(200,200,200);
   letter-spacing: 1px;
   font-size: 0.8rem;
}
td, th {
   border: 1px solid rgb(190,190,190);
   padding: 10px 20px;
}
th {
   background-color: rgb(235,235,235);
}
td, th {
   text-align: left;
}
tr:nth-child(even) td {
   background-color: rgb(250,250,250);
}
tr:nth-child(odd) td {
   background-color: rgb(245,245,245);
}
caption {
   padding: 10px;
}
tr.highlight td { 
   background-color: #a6a8bd;
}

READ: ReactJS | Building and Deployment

Next, open App.js file and then import router dependencies.

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

Next, import App.css.

import './App.css';

Next, import newly created components.

import Home from './Home'; 
import ExpenseEntryItemList from './ExpenseEntryItemList'; 
import ExpenseEntryItemForm from './ExpenseEntryItemForm';

Next, configure Router in App component.

class App extends React.Component {
   render() {
      return (
         <Router>
            <div>
               <nav>
                  <ul>
                     <li><Link to="/">Home</Link></li>
                     <li><Link to="/list">List Expenses</Link>lt;/li>
                     <li><Link to="/add">Add Expense</Link></li>
                  </ul>
               </nav>
               <Switch>
                  <Route path="/list">
                     <div style={   { padding: "10px 0px" }   }>
                        <ExpenseEntryItemList />
                     </div>
                  </Route>
                  <Route path="/add">
                     <div style={   { padding: "10px 0px" }   }>
                        <ExpenseEntryItemForm />
                     </div>
                  </Route>
                  <Route path="/">
                        <div>
                     <Home />
                     </div>
                  </Route>
               </Switch>
            </div>
         </Router>
      );
   }
}

The complete code of the App component is as follows -

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

import './App.css';
import Home from './Home';
import ExpenseEntryItemList from './ExpenseEntryItemList';
import ExpenseEntryItemForm from './ExpenseEntryItemForm';

class App extends React.Component {
   render() {
      return (
         <Router>
            <div>
               <nav>
                  <ul>
                     <li><Link to="/">Home</Link></li>
                     <li><Link to="/list">List Expenses</Link></li>
                     <li><Link to="/add">Add Expense</Link></li>
                  </ul>
               </nav>

               <Switch>
                  <Route path="/list">
                     <div style={{ padding: "10px 0px" }}>
                        <ExpenseEntryItemList />
                     </div>
                  </Route>
                  <Route path="/add">
                     <div style={{ padding: "10px 0px" }}>
                        <ExpenseEntryItemForm />
                     </div>
                  </Route>
                  <Route path="/">
                     <div>
                        <Home />
                     </div>
                  </Route>
               </Switch>
            </div>
         </Router>
      );
   }
}
export default App;

Next, serve the application making use of npm command.

npm start

Next, open the web browser and then enter http://localhost:3000 in the address bar and press enter.

READ: ReactJS | Redux

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be studying about ReactJS State Management (Example).

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.