In this blog, I am explaining how to install bootstrap to React and how to create a simple Form.
In my previous blog, I have explained the basics of React Router. Do visit it too.
- Creating a React App
So let’s start creating our app. Just create a Simple React application and make sure your server runs well.
npx create-react-app my-app
cd my-app
npm startThe above command creates and starts the server. Once created you must see the default welcome page of React.
2. Installing React Bootstrap
React Bootstrap is a React library that provides us the same functionality that the normal Bootstrap gives. Now let’s install react-bootstrap.
$ npm install react-bootstrap bootstrapAfter installing react-bootstrap, just import react-bootstrap in the main file.
my-app/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.min.css'; # Add this lineReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
3. Styling existing template with bootstrap
Now we have successfully set Bootstrap to React. So let’s start styling our Pages. I am creating a simple Bootstrap Navbar.
my-app/src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Route, Switch ,Link, BrowserRouter as Router } from 'react
router-dom';
import Home from './Pages/Home';
import About from './Pages/About';
import Portfolio from './Pages/Portfolio';
import NotFound from './Pages/404.js';
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import NavDropdown from 'react-bootstrap/NavDropdown'function App() { return (
<Router>
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href='/'>Home</Nav.Link>
<Nav.Link href='/about'>About</Nav.Link>
<Nav.Link href='/portfolio'>Portfolio</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/portfolio" component={Portfolio} />
<Route component={NotFound} />
</Switch>
</Router>
);
}export default App;
The above code brings a UI just like this.
4. Table to display Employee details
Now let's create our CRUD Forms. Here I am creating a simple form that displays all the employee details.
src/Pages/Home.js
import React, { Component } from 'react'
import Table from 'react-bootstrap/Table'
import Container from 'react-bootstrap/Container'
import Button from 'react-bootstrap/Button'export default class Home extends Component {
render() {
return (
<Container style={{ marginTop: '100px' }}>
<Button variant="secondary" style={{ float: 'right', margin: '20px' }}>Add a Employee</Button> <Table striped bordered hover>
<thead>
<tr>
<th>ID</th>
<th>Employee Name</th>
<th>Employee Email</th>
<th>Employee Mobile</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>sjlouji10@gmail.com</td>
<td>932104</td>
<td><Button>Update</Button> <Button variant="danger">Delete</Button
</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>sjlouji@gmail.com</td>
<td>2345</td>
<td><Button>Update</Button> <Button variant="danger">Delete</Button></td>
</tr>
</tbody>
</Table>
</Container>
)
}
}
5. Create View
Now I am creating a Create Employee View. After creating It, just connect it to the Route.
src/Pages/Create.js
import React, { Component } from 'react'
import { Container , Form, Row, Col, Button} from 'react-bootstrap'export default class Create extends Component {
render() {
return (
<Container style={{ marginTop: '100px' }}>
<h1>Add Employee</h1>
<Form style={{ margin: '50px' }}>
<Form.Row>
<Col>
<Form.Control placeholder="Employee Name" />
</Col>
<Col>
<Form.Control placeholder="Employee Email" />
</Col>
<Col>
<Form.Control placeholder="Employee Mobile" />
</Col>
</Form.Row>
<Button style={{ margin: '30px', float: 'right' }}>Add Employee</Button>
</Form>
</Container>
)
}
}
src/Pages/App.js
<Route exact path="/" component={Home} />
<Route path="/createemp" component={Create} />
<Route path="/about" component={About} />
<Route path="/portfolio" component={Portfolio} />
<Route component={NotFound} src/Pages/Home.js
<Button variant="secondary" style={{ float: 'right', margin: '20px' }} onClick={() => this.props.history.push('/createemp')}>Add a Employee</Button>
6. Update View
Now I am creating an Update Employee View. After creating It, just connect it to the Route.
import React, { Component } from 'react'
import { Container , Form, Row, Col, Button} from 'react-bootstrap'export default class Update extends Component {
render() {
return (
<Container style={{ marginTop: '100px' }}>
<h1>Update Employee</h1>
<Form style={{ margin: '50px' }}>
<Form.Row>
<Col>
<Form.Control placeholder="Employee Name" value="Joan Louji"/>
</Col>
<Col>
<Form.Control placeholder="Employee Email" value="sjlouji10@gmail.com"/>
</Col>
<Col>
<Form.Control placeholder="Employee Mobile" value="1902348"/>
</Col>
</Form.Row>
<Button style={{ margin: '30px', float: 'right' }}>Add Employee</Button>
</Form>
</Container>
)
}
}
src/Pages/App.js
<Route exact path="/" component={Home} />
<Route path="/createemp" component={Create} />
<Route path="/updateemp/:id" component={Update} />
<Route path="/about" component={About} />
<Route path="/portfolio" component={Portfolio} />
<Route component={NotFound}src/Pages/Home.js
<td><Button onClick={() => this.props.history.push(`/updateemp/1`)}>Update</Button> <Button variant="danger">Delete</Button></td>
In my next blog, I am explaining how to connect React JS with Django. Stay connected.
In my previous blog, I have explained how to perform Route in React Js. Do visit.
Feel free to contact me for any queries.
Email: sjlouji10@gmail.com
Linkedin: https://www.linkedin.com/in/sjlouji/
The complete code can be found on my Github: https://github.com/sjlouji/React-Js-and-DRF---CRUD-Form.git
Happy coding…
