1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start
2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again
3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<div class="modal show" id="modalCompose">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-header-info">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><span class="glyphicon glyphicon-envelope"></span> Compose Message</h4>
</div>
<div class="modal-body">
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2" for="inputTo"><span class="glyphicon glyphicon-user"></span>To</label>
<div class="col-sm-10"><input type="email" class="form-control" id="inputTo" placeholder="comma separated list of recipients"/></div>
</div>
<div class="form-group">
<label class="col-sm-2" for="inputSubject"><span class="glyphicon glyphicon-list-alt"></span>Subject</label>
<div class="col-sm-10"><input type="text" class="form-control" id="inputSubject" placeholder="subject"/></div>
</div>
<div class="form-group">
<label class="col-sm-12" for="inputBody"><span class="glyphicon glyphicon-list"></span>Message</label>
<div class="col-sm-12"><textarea class="form-control" id="inputBody" rows="8"></textarea></div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-warning pull-left">Save Draft</button>
<button type="button" class="btn btn-primary ">Send <i class="fa fa-arrow-circle-right fa-lg"></i></button>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
@import url('http://fonts.googleapis.com/css?family=Open+Sans:200,300');
body {
background-color:#333;
font-family: 'Open Sans',Arial,Helvetica,Sans-Serif;
}
.modal-header-info {
color:#fff;
padding:9px 15px;
border-bottom:1px solid #eee;
background-color: #5bc0de;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}