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 start2. 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 again3. 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>
<table width="100%" height="100%" bgcolor="#E4E6E9" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top" bgcolor="#E4E6E9" style={{/*background-color:#E4E6E9; min-height: 200px;*/}}>
<table>
<tbody>
<tr>
<td class="table-td-wrap" align="center" width="458">
<table class="table-space" height="18" style={{/*height: 18px; font-size: 0px; line-height: 0; width: 450px; background-color: #e4e6e9;*/}} width="450" bgcolor="#E4E6E9" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-space-td" valign="middle" height="18" style={{/*height: 18px; width: 450px; background-color: #e4e6e9;*/}} width="450" bgcolor="#E4E6E9" align="left"> </td>
</tr>
</tbody>
</table>
<table class="table-space" height="8" style={{/*height: 8px; font-size: 0px; line-height: 0; width: 450px; background-color: #ffffff;*/}} width="450" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-space-td" valign="middle" height="8" style={{/*height: 8px; width: 450px; background-color: #ffffff;*/}} width="450" bgcolor="#FFFFFF" align="left"> </td>
</tr>
</tbody>
</table>
<table class="table-row" width="450" bgcolor="#FFFFFF" style={{/*table-layout: fixed; background-color: #ffffff;*/}} cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-row-td" style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; padding-left: 36px; padding-right: 36px;*/}} valign="top" align="left">
<table class="table-col" align="left" width="378" cellspacing="0" cellpadding="0" border="0" style={{/*table-layout: fixed;*/}}>
<tbody>
<tr>
<td class="table-col-td" width="378" style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; width: 378px;*/}} valign="top" align="left">
<table class="header-row" width="378" cellspacing="0" cellpadding="0" border="0" style={{/*table-layout: fixed;*/}}>
<tbody>
<tr>
<td class="header-row-td" width="378" style={{/*font-family: Arial, sans-serif; font-weight: normal; line-height: 19px; color: #478fca; margin: 0px; font-size: 18px; padding-bottom: 10px; padding-top: 15px;*/}} valign="top" align="left">Thank you for registering with us!</td>
</tr>
</tbody>
</table>
<div style={{/*font-family: Arial, sans-serif; line-height: 20px; color: #444444; font-size: 13px;*/}}>
<b style={{/*color: #777777;*/}}>We are excited to have you join us in Bootdey community</b>
<br/> Please confirm your registration to continue
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="table-space" height="12" style={{/*height: 12px; font-size: 0px; line-height: 0; width: 450px; background-color: #ffffff;*/}} width="450" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-space-td" valign="middle" height="12" style={{/*height: 12px; width: 450px; background-color: #ffffff;*/}} width="450" bgcolor="#FFFFFF" align="left"> </td>
</tr>
</tbody>
</table>
<table class="table-space" height="12" style={{/*height: 12px; font-size: 0px; line-height: 0; width: 450px; background-color: #ffffff;*/}} width="450" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-space-td" valign="middle" height="12" style={{/*height: 12px; width: 450px; padding-left: 16px; padding-right: 16px; background-color: #ffffff;*/}} width="450" bgcolor="#FFFFFF" align="center">
<table bgcolor="#E8E8E8" height="0" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td bgcolor="#E8E8E8" height="1" width="100%" style={{/*height: 1px; font-size:0;*/}} valign="top" align="left"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="table-space" height="16" style={{/*height: 16px; font-size: 0px; line-height: 0; width: 450px; background-color: #ffffff;*/}} width="450" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-space-td" valign="middle" height="16" style={{/*height: 16px; width: 450px; background-color: #ffffff;*/}} width="450" bgcolor="#FFFFFF" align="left"> </td>
</tr>
</tbody>
</table>
<table class="table-row" width="450" bgcolor="#FFFFFF" style={{/*table-layout: fixed; background-color: #ffffff;*/}} cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-row-td" style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; padding-left: 36px; padding-right: 36px;*/}} valign="top" align="left">
<table class="table-col" align="left" width="378" cellspacing="0" cellpadding="0" border="0" style={{/*table-layout: fixed;*/}}>
<tbody>
<tr>
<td class="table-col-td" width="378" style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; width: 378px;*/}} valign="top" align="left">
<div style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; text-align: center;*/}}>
<a href="#/" style={{/*color: #ffffff; text-decoration: none; margin: 0px; text-align: center; vertical-align: baseline; border: 4px solid #6fb3e0; padding: 4px 9px; font-size: 15px; line-height: 21px; background-color: #6fb3e0;*/}}> Confirm </a>
</div>
<table class="table-space" height="16" style={{/*height: 16px; font-size: 0px; line-height: 0; width: 378px; background-color: #ffffff;*/}} width="378" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-space-td" valign="middle" height="16" style={{/*height: 16px; width: 378px; background-color: #ffffff;*/}} width="378" bgcolor="#FFFFFF" align="left"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="table-space" height="6" style={{/*height: 6px; font-size: 0px; line-height: 0; width: 450px; background-color: #ffffff;*/}} width="450" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-space-td" valign="middle" height="6" style={{/*height: 6px; width: 450px; background-color: #ffffff;*/}} width="450" bgcolor="#FFFFFF" align="left"> </td>
</tr>
</tbody>
</table>
<table class="table-row-fixed" width="450" bgcolor="#FFFFFF" style={{/*table-layout: fixed; background-color: #ffffff;*/}} cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-row-fixed-td" style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; padding-left: 1px; padding-right: 1px;*/}} valign="top" align="left">
<table class="table-col" align="left" width="448" cellspacing="0" cellpadding="0" border="0" style={{/*table-layout: fixed;*/}}>
<tbody>
<tr>
<td class="table-col-td" width="448" style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal;*/}} valign="top" align="left">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style={{/*table-layout: fixed;*/}}>
<tbody>
<tr>
<td width="100%" align="center" bgcolor="#f5f5f5" style={{/*font-family: Arial, sans-serif; line-height: 24px; color: #bbbbbb; font-size: 13px; font-weight: normal; text-align: center; padding: 9px; border-width: 1px 0px 0px; border-style: solid; border-color: #e3e3e3; background-color: #f5f5f5;*/}} valign="top">
<a href="#/" style={{/*color: #428bca; text-decoration: none; background-color: transparent;*/}}>Bootdey.com © 2016</a>
<br/>
<a href="#/" style={{/*color: #478fca; text-decoration: none; background-color: transparent;*/}}>twitter</a> .
<a href="#/" style={{/*color: #5b7a91; text-decoration: none; background-color: transparent;*/}}>facebook</a> .
<a href="#/" style={{/*color: #dd5a43; text-decoration: none; background-color: transparent;*/}}>google+</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="table-space" height="1" style={{/*height: 1px; font-size: 0px; line-height: 0; width: 450px; background-color: #ffffff;*/}} width="450" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-space-td" valign="middle" height="1" style={{/*height: 1px; width: 450px; background-color: #ffffff;*/}} width="450" bgcolor="#FFFFFF" align="left"> </td>
</tr>
</tbody>
</table>
<table class="table-space" height="36" style={{/*height: 36px; font-size: 0px; line-height: 0; width: 450px; background-color: #e4e6e9;*/}} width="450" bgcolor="#E4E6E9" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-space-td" valign="middle" height="36" style={{/*height: 36px; width: 450px; background-color: #e4e6e9;*/}} width="450" bgcolor="#E4E6E9" align="left"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
);
}
export default App;4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{margin-top:20px;}
