React JS with Bootstrap: React can be used together with Bootstrap. We want to demonstrate how this can be done by creating a simple Mailbox editor which is reusable. This will help us in composing and formatting an email before sending it. However, we will not cover how to send the email.
React JS with Bootstrap – Setting up the Page
We are in need of creating an HTML file which will form the entry point for our Mailbox editor. Create a new file and give it the name “index.html.” Add the code given below to it:
Setting up the Page Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> A MailBox Editor</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"></ script> </head><body> <div class="container"> </div> </body> <script type="text/babel"></script> </html>
We have just added the necessary React libraries to our code. Note that we also have to use JSX for adding the components. This means that Babel has to be added to the code, and this will serve to translate to plain JavaScript. The JSX has to be included in the tag given below:
<script type="text/babel"></script>
Since we have set up the above, we can start to create our first component. Add the code given below inside your script tag:
var Mbox = React.createClass({
render: function () {
return <h1>Hello there!</h1>;
});
var options = {};
var elem = ReactereateElement(Mbox, options);
ReactDOM.render(elem, document.querySelector
tor('.container'));
To see the result, just open it in your browser. You will just see the “Hello there!” text, showing how basic our component is at this point.
The Mailbox editor
This should be implemented in the same file but as a separate component. An external plugin can be implemented so that the implementation can become a bit easier.
We will use a What You See Is What You Get (WYSIWYG) editor named “Trumbowyg” which is based on jQuery. This can be installed with Bower and then the jQuery and Trumbowyg loaded at the top of your HTML file.
The Mailbox editor Example
This is shown in the code given below:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>A MailBox Editor</title> <script src="bower /jquery/dist/jquery.min.js"></script> <script src="bower /trumbowyg/bowyg.min.js"></script> <script src="https://cdnjs.cloudflare.ajax/libs/react/0.14.0/react.js"></script> <script src="https://cdnjs.cloudflare.ajax/libs/react/0.14.0/react-dom.js"> <script src="https://cdnjs.cloudflare.ajax/libs/babel-core/5.8.25/browser</script> <link rel="stylesheet" href=" componet.trumbowyg/dist/ui/trumbowyg.min.cs. </head> <body> <div class="container">2/div> </body> <script type="text/babel"> </script> </html>
JSX Code
The following code can then be added to the JSX code:
var Ed = React.createClass({
getDefaultProps: function() {
return {
placeholder: 'Compose your message here..",
body:
};
};
componentDidMount: function (){
$('#editor').trumbowyg({
fullscreenable: false
});
$('#editor').trumbowyg('html', this.props.
body);
},
render: function () {
return <div id="editor" placeholder={this.props.placeholder}></div>;
});
The above code will create a class for “React.js” rendering a simple div. The method “component DidMount” has been used for calling trumbowyg for the purpose of transforming the div into an editor of type WYSIWYG. The editor component can then be rendered inside your application as shown below:
var Mbox = React.createClass({
render: function () {
return <Editor />;
});
You can then refresh your browser and see what happens.
Styles
Creating the Form
Our editor is ready at this point. However, there is something we do not have. How do we add the recipients to our email? We have to add a form for taking care of this. Bootstrap can be added to the app via the Bower.
Creating the Form Example
The following lines in the file “index.html” should be updated:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> A MailBox Editor</title> <script src="bower /jquery/dist/jquery.min.js"></script> <script src="bower/trumbowyg/dist/trumbowyg.min.js"></script> <script src="bower /bootstrap/dist/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"</script> <link rel="stylesheet"href="bower_components/trumbowyg/dist/trumbowyg.min.css"> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"> </head> <body> <div class="container"> </div> </body> <script type="text/babel"> </script> </html>
Adding to the main component Example
The form has to be added to the app inside our main component. The main component is the Mbox. This is shown below:
var Mbox = React.createClass({
getInitialState: function () {
return
"emailTo": "",
"email CC":
"email BCC":"",
"email Subject":"",
"email Body":
}
},
render: function () {
return
<div className="panel panel-default">
<div className="panel-heading">
<div className="row">
<div className="col-xs-8 center">
<div className="inbox-title">
<span className="glyphicon glyphicon-
envelope center"></span>
<h2 className="center">{this.props.title}</h2>
tle}</h2>
</div>
</div>
<div className="col-xs-4 center">
<div className="inbox-avatar text right">
<img src={this.props.urlImage}/>
<div className="inbox-avatar
name"><a href={this.props.link}>{this.prop
s.username}</a></div>
</div>
</div>
</div>
<hr />
<div className="row">
<div className="col-xs-12">
<form className="form-horizontal">
<div className="form-group">
<label htmlFor="email-to" className"col-sm-1 control-label">Email To</label>
<div className="col-sm-11">
<input type="email"className="form-control" id="email-to" value={this.state.email To}
placeholder="Example:name@domain.com" onChange={this.handle Email To Change} />
</div>
</div>
<div className="form-group">
<label htmlFor="email-ce" className="col-sm-1 control-label">CC</label>
<div className="col-sm-11">
<input type="email"className="form-control" id="email-cc"
value={this.state.emailCC}
onChange={this.handleEmailccChange}/>
</div>
</div>
<div className="form-group">
<label htmlFor="email-bcc" className="col-sm-1 control-label"> BCC</label>
<div className="col-sm-11">
<input type="email" className="form-control" id="email-bcc" value={this.state.email BCC)onChange={this.handle Email BCC Change}/>
</div>
</div>
<div className="form-group">
<label htmlFor="email-subject" class
Name="col-sm-1 control-label">Subject</label>
<div className="col-sm-11">
<input type="email" className="form-control" id="email-subject"
value={this.state.emailSubject} onChange={this.handle Email Subject Change}/>
</div>
</div>
</form>
</div>
</div>
</div>
<div className="panel-body">
<Editor onChange={this.handle Editor Change} />
</div>
<div className="panel-footer">
</div>
</div>
) ;
},
handle Editor Change: function (email Body){this.setState({ "emailBody": emailBody });
},
handle Email Change: function (e) {this.setState({ "email To": e.target.value });
},
handle Email CCChange: function (e) {this.setState({ "emailCC": e.target.value });
},
handle Email Bcc Change: function (e) {this.setState({ "emailBCC": e.target.value });
},
handleEmail Subject Change: function (e) {this.setState({ "emailSubject": e.target.value });
}
});
var options = {username: "Nicholas Joel",link: "https://ncjl.fr",urlImage:"https://ncjl.fr/images/avatar.jpg",
title: "A Mailbox Editor"
};
var elem = React.createElement(Mbox, options);
ReactDOM.render(element, document.querySelector('.contains:"));
The above form now has all the fields which are necessary. Bootstrap has been used for the purpose of designing the form. In the method “getInitial State,” all of the fields for the recipient have been set to empty.
Once any changes have been made on any of the text fields, an update of the state will be triggered via the event “onChange” and the method “this.setState.” An “onChange” event has also been added to the editor so that it can store the state of the Mailbox about the text which the users write.
onChange event Example
This is shown below:
var Ed = React.createClass({
getDefaultProps: function() {...),
componentDidMount: function () {
var t this;
$(#editor').trumbowyg({
fullscreenable: false
})
on('tbwchange', function () {that.props.onChange($('#editor').trumbowyg('html'));
});
$('#editor').trumbowyg('html', this.props.body);
},
render: function () {
return <div id="editor" placeholder=
{this.props.placeholder}></div>;
}
});
var Mbox React.createClass({...
render: function () {
return (...
<div className="panel-body">
<Ed onChange={this.handle Editor
Change} />
</div>
);
},
handleEditorChange: function (email Body) {this.setState({ "emailBody": emailBody });
},
);
Mail-box Editor Example
The following styles can be added to our Mail-box Editor, and then it can be loaded to the file “index.html.”
/* General */
body{background-color: #e9f0f5;
}
img{border-radius: 25px;height: 45px;width: 45px;
}
label{color: #89949B;
}
container {margin-top: 12px;
glyphicon{font-size: 3.5em;
}
center display:inline-block;
float: none;
vertical-align: middle;
}
/* Editor */
trumbowyg{border: none;margin: 0;width: 100%;
}
trumbowyg-button-pane{background-color: white;
}
/* Form Structure /
panel {border: none
}
panel .panel-heading{background-color: white;padding: 25px;
}
panel .panel-body{padding: 0;
}
panel .panel-footer{background-color: white;
padding: 25px;
}
inbox-title h2{display:inline-block;padding-left: 12.5px;text-align: left;vertical-align: middle;
}
inbox-avatar-namel
display: inline-block;font-size: 1.1em;padding-left: 13px;text-align: left;vertical-align: middle;
}
inbox-avatar-name af
color: #ccc;
}
form-horizontal padding-left: 65px;
}
form-control
border: 2px solid #ccc;border-radius: 0;
}
You can then refresh the browser and next observe what you have.
Improving the Interactivity
We have to include some buttons to the app so as to trigger some actions which are possible in the Mailbox. After clicking on the “send” and “save” buttons, we will trigger the method “handleClick.” It is after this that a modal with the appropriate message will be displayed. The button cancel will only discard the changes made to the editor and the text fields. This is shown below:
handleClick Example
var Modal = React.createClass({
render: function () {
return (
<div className%3"modal fade" tabIndex-"-1"role="dialog">
<div className="modal-dialog">
<div className%3"modal-content">
<div className="modal-header">
<button type="button" className3"close" data-dismiss-"modal"><span>×</span></button>
<h4 className%3"modal-title">{this.props.title]</h4></div>
<div className="modal-body">{this.props.body}</div>
<div className%="modal-footer">
<div className="btn-toolbar pull-right"role="toolbar">
<div className%3"btn-group"role="group">
<button type-"button" className"btn btn-danger outline" data-dismiss="modal">
Close</button>
</div>
</div>
<div className="clearfix" />
</div>
</div>
</div>
</div>
);
});
var Mbox = React.createClass({render: function () {
return
<div className="panel-footer">
<div className="btn-toolbar pull-right"role="toolbar">
<div className="btn-group"role="group">
<button type="button" onClick={this.handleCancelClick} className"btn btn-danger">Cancel</button>
<button type="button" onClick={this.handleSaveClick} className="btn btn-success">Save</button> </div>
<div className="btn-group"role="group">
<button type="button"
onClick={this.handleClick} className="btn btn-primary outline">Send</button>
</div>
<Modal ref="modalSend" title="Email sent!" body="The email was successfully sent" />
<Modal ref="modalSave" title="Email saved!" body="The email was successfully saved" />
</div>
<div className="clearfix" />
</div>
</div>
) ;
},
…
handle Cancel Click: function () {
this.setState({
"emailTo": "
"email CC":
"email BCC".
"email Subject":"",
"email Body".
}) ;
},
handle Save Click: function () {
$(ReactDOM.findDOMNode(this.refs.modalSave)).modal();
},
handle Send Click: function () {$(ReactDOM.findDOMNode(this.refs.modalSend)).modal();
}
});
The state of the email Body will be passed from your Mbox component to the component child editor. By use of the method “component WillReceiveProps,” we will be in a position to remove the text from our editor after your user has clicked on the button “Cancel” from the Mbox component. Consider the code given below:
component WillReceiveProps Example
var Ed = React.createClass({
componentWillReceiveProps: function
(nxtProps) {
if (nxtProps.body == ""){
$('#editor').trumbowyg('empty');
}
}
...
});
var Mbox = React.createClass({
...
render: function () {
return(
…
<div className="panel-body">
<Ed onChange={this.handleEditor Change}
body={this.state.email Body} />
</div>
…
);
},
...
});