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="#5bc0de" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="100%" align="center" valign="top" bgcolor="#5bc0de" style={{/*background-color:#5bc0de; min-height: 200px;*/}}>
<table>
<tbody>
<tr>
<td class="table-td-wrap" align="center" width="600">
<table class="table-row" style={{/*table-layout: auto; padding-right: 24px; padding-left: 24px; width: 580px; background-color: transparent;*/}} bgcolor="transparent" width="580" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr height="50px" style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; height: 50px; background-color: transparent;*/}}>
<td class="table-row-td" style={{/*height: 50px; padding-right: 16px; font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; vertical-align: middle;*/}} valign="middle" align="left">
<a href="#/" style={{/*color: #ffffff; text-decoration: none; padding: 0px; font-size: 18px; line-height: 20px; height: 50px; background-color: transparent;*/}}>
Bootdey Newsletter
</a>
</td>
<td class="table-row-td" style={{/*height: 50px; font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; text-align: right; vertical-align: middle;*/}} align="right" valign="middle">
<a href="#/" style={{/*color: #fff; text-decoration: none; background-color: transparent;*/}}>
View inside browser
</a>
</td>
</tr>
</tbody>
</table>
<table class="table-space" height="16" style={{/*height: 16px; font-size: 0px; line-height: 0; width: 580px; background-color: #ffffff;*/}} width="580" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-space-td" valign="middle" height="16" style={{/*height: 16px; width: 580px; background-color: #ffffff;*/}} width="580" bgcolor="#FFFFFF" align="left"> </td>
</tr>
</tbody>
</table>
<table class="table-row" width="580" 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: 24px; padding-right: 24px;*/}} valign="top" align="left">
<table class="table-col" align="left" width="532" cellspacing="0" cellpadding="0" border="0" style={{/*table-layout: fixed;*/}}>
<tbody>
<tr>
<td class="table-col-td" width="532" style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal;*/}} valign="top" align="left">
<div style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; text-align: center;*/}}>
<img src="https://www.bootdey.com/image/520x280/FF69B4/000000" style={{/*border: 0px none #444444; vertical-align: middle; display: block; padding-bottom: 9px;*/}} hspace="0" vspace="0" border="0"/>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="table-row" width="580" 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="508" cellspacing="0" cellpadding="0" border="0" style={{/*table-layout: fixed;*/}}>
<tbody>
<tr>
<td class="table-col-td" width="508" style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal;*/}} valign="top" align="left">
<table class="header-row" width="508" cellspacing="0" cellpadding="0" border="0" style={{/*table-layout: fixed;*/}}>
<tbody>
<tr>
<td class="header-row-td" width="508" style={{/*font-size: 28px; margin: 0px; font-family: Arial, sans-serif; font-weight: normal; line-height: 19px; color: #478fca; padding-bottom: 10px; padding-top: 15px;*/}} valign="top" align="left">Hi, Susan Calvin</td>
</tr>
</tbody>
</table>
<div style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px;*/}}>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</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: 580px; background-color: #ffffff;*/}} width="580" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-space-td" valign="middle" height="12" style={{/*height: 12px; width: 580px; background-color: #ffffff;*/}} width="580" bgcolor="#FFFFFF" align="left"> </td>
</tr>
</tbody>
</table>
<table class="table-space" height="12" style={{/*height: 12px; font-size: 0px; line-height: 0; width: 580px; background-color: #113d68;*/}} width="580" bgcolor="#113D68" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-space-td" valign="middle" height="12" style={{/*height: 12px; width: 580px; background-color: #113d68;*/}} width="580" bgcolor="#113D68" align="left"> </td>
</tr>
</tbody>
</table>
<table class="table-row" width="580" bgcolor="transparent" style={{/*table-layout: fixed; background-color: transparent;*/}} cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="table-row-td" height="45px" bgcolor="transparent" style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; height: 45px; padding-left: 24px; padding-right: 24px; background-color: transparent;*/}} valign="top" align="left">
<table class="table-col" align="left" width="532" cellspacing="0" cellpadding="0" border="0" style={{/*table-layout: fixed;*/}}>
<tbody>
<tr>
<td class="table-col-td" width="532" align="center" style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #444444; font-size: 13px; font-weight: normal; text-align: center;*/}} valign="top">
<span style={{/*font-family: Arial, sans-serif; line-height: 19px; color: #113d68; font-size: 13px;*/}}>click here to unsubscribe</span>
</td>
</tr>
</tbody>
</table>
</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;}
