React JS Provide Separate Component for Header, Middle and Footer part that can be easily called into the application
React-JS especially created to design single-page applications but now we can implement multiple web page-based applications using React JS.
1) Integrate Single Page Template in React-JS:-
1.1) Create an HTML page or download a free CSS template for a one-page template.
1.2) put all site content (img,js,css, assets) into public folder
1.3) create a component and integrate all Html content into under body tag under render()
1.4) Html head section CSS and js file or footer section js file should be liked on index.html page of react-js
Complete Code of App
import React from "react";
export class Home extends React.Component
{
render()
{
return(
<div>
<div id="preloader">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>
<header class="header-area header-sticky">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="main-nav">
<a href="index.html" class="logo">
Lava
</a>
<ul class="nav">
<li class="scroll-to-section"><a href="#welcome" class="menu-item">Home</a></li>
<li class="scroll-to-section"><a href="#about" class="menu-item">About</a></li>
<li class="scroll-to-section"><a href="#testimonials" class="menu-item">Testimonials</a>
</li>
<li class="submenu">
<a href="javascript:;">Drop Down</a>
<ul>
<li><a href="" class="menu-item">About Us</a></li>
<li><a href="" class="menu-item">Features</a></li>
<li><a href="" class="menu-item">FAQ's</a></li>
<li><a href="" class="menu-item">Blog</a></li>
</ul>
</li>
<li class="scroll-to-section"><a href="#contact-us" class="menu-item">Contact Us</a></li>
</ul>
<a class='menu-trigger'>
<span>Menu</span>
</a>
</nav>
</div>
</div>
</div>
</header>
<div class="welcome-area" id="welcome">
<div class="header-text">
<div class="container">
<div class="row">
<div class="left-text col-lg-6 col-md-12 col-sm-12 col-xs-12"
data-scroll-reveal="enter left move 30px over 0.6s after 0.4s">
<h1>Simple App that we <em>CREATE</em></h1>
<p>Lava <a href="#">HTML landing page</a> template is provided by <a href="#">TemplateMo</a>.
You can modify and use it for your commercial websites for free of charge. This template is last updated on 29 Oct 2019.</p>
<a href="#about" class="main-button-slider">KNOW US BETTER</a>
</div>
</div>
</div>
</div>
</div>
<div class="left-image-decor"></div>
<section class="section" id="about">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"
data-scroll-reveal="enter left move 30px over 0.6s after 0.4s">
<div class="features-item">
<div class="features-icon">
<h2>01</h2>
<img src="assets/images/features-icon-1.png" alt="" />
<h4>Trend Analysis</h4>
<p>Curabitur pulvinar vel odio sed sagittis. Nam maximus ex diam, nec consectetur diam.</p>
<a href="#testimonials" class="main-button">
Read More
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"
data-scroll-reveal="enter bottom move 30px over 0.6s after 0.4s">
<div class="features-item">
<div class="features-icon">
<h2>02</h2>
<img src="assets/images/features-icon-2.png" alt="" />
<h4>Site Optimization</h4>
<p>Curabitur pulvinar vel odio sed sagittis. Nam maximus ex diam, nec consectetur diam.</p>
<a href="#testimonials" class="main-button">
Discover More
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"
data-scroll-reveal="enter right move 30px over 0.6s after 0.4s">
<div class="features-item">
<div class="features-icon">
<h2>03</h2>
<img src="assets/images/features-icon-3.png" alt="" />
<h4>Email Design</h4>
<p>Curabitur pulvinar vel odio sed sagittis. Nam maximus ex diam, nec consectetur diam.</p>
<a href="#testimonials" class="main-button">
More Detail
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="left-image-decor"></div>
<section class="section" id="promotion">
<div class="container">
<div class="row">
<div class="left-image col-lg-5 col-md-12 col-sm-12 mobile-bottom-fix-big"
data-scroll-reveal="enter left move 30px over 0.6s after 0.4s">
<img src="assets/images/left-image.png" class="rounded img-fluid d-block mx-auto" alt="App" />
</div>
<div class="right-text offset-lg-1 col-lg-6 col-md-12 col-sm-12 mobile-bottom-fix">
<ul>
<li data-scroll-reveal="enter right move 30px over 0.6s after 0.4s">
<img src="assets/images/about-icon-01.png" alt="" />
<div class="text">
<h4>Vestibulum pulvinar rhoncus</h4>
<p>Please do not redistribute this template ZIP file for a download purpose. You may <a
rel="nofollow" href="https://templatemo.com/contact" target="_parent">contact</a> us for
additional licensing of our template or to get a PSD file.</p>
</div>
</li>
<li data-scroll-reveal="enter right move 30px over 0.6s after 0.5s">
<img src="assets/images/about-icon-02.png" alt="" />
<div class="text">
<h4>Sed blandit quam in velit</h4>
<p>You can <a rel="nofollow"
href="https://templatemo.com/tm-540-lava-landing-page">download Lava
Template</a> from our website. Duis viverra, ipsum et scelerisque placerat, orci
magna consequat ligula.</p>
</div>
</li>
<li data-scroll-reveal="enter right move 30px over 0.6s after 0.6s">
<img src="assets/images/about-icon-03.png" alt="" />
<div class="text">
<h4>Aenean faucibus venenatis</h4>
<p>Phasellus in imperdiet felis, eget vestibulum nulla. Aliquam nec dui nec augue
maximus porta. Curabitur tristique lacus.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<div class="right-image-decor"></div>
<section class="section" id="testimonials">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="center-heading">
<h2>What They Think <em>About Us</em></h2>
<p>Suspendisse vitae laoreet mauris. Fusce a nisi dapibus, euismod purus non, convallis odio.
Donec vitae magna ornare, pellentesque ex vitae, aliquet urna.</p>
</div>
</div>
<div class="col-lg-10 col-md-12 col-sm-12 mobile-bottom-fix-big"
data-scroll-reveal="enter left move 30px over 0.6s after 0.4s">
<div class="owl-carousel owl-theme">
<div class="item service-item">
<div class="author">
<i><img src="assets/images/testimonial-author-1.png" alt="Author One" /></i>
</div>
<div class="testimonial-content">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<h4>Jonathan Smart</h4>
<p>“Nullam hendrerit, elit a semper pharetra, ipsum nibh tristique tortor, in tempus
urna elit in mauris.”</p>
<span>Besta CTO</span>
</div>
</div>
<div class="item service-item">
<div class="author">
<i><img src="assets/images/testimonial-author-1.png" alt="Second Author" /></i>
</div>
<div class="testimonial-content">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<h4>Martino Tino</h4>
<p>“Morbi non mi luctus felis molestie scelerisque. In ac libero viverra, placerat est
interdum, rhoncus leo.”</p>
<span>Web Analyst</span>
</div>
</div>
<div class="item service-item">
<div class="author">
<i><img src="assets/images/testimonial-author-1.png" alt="Author Third" /></i>
</div>
<div class="testimonial-content">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<h4>George Tasa</h4>
<p>“Fusce rutrum in dolor sit amet lobortis. Ut at vehicula justo. Donec quam dolor,
congue a fringilla sed, maximus et urna.”</p>
<span>System Admin</span>
</div>
</div>
<div class="item service-item">
<div class="author">
<i><img src="assets/images/testimonial-author-1.png" alt="Fourth Author" /></i>
</div>
<div class="testimonial-content">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<h4>Sir James</h4>
<p>"Fusce rutrum in dolor sit amet lobortis. Ut at vehicula justo. Donec quam dolor,
congue a fringilla sed, maximus et urna."</p>
<span>New Villager</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer id="contact-us">
<div class="container">
<div class="footer-content">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="contact-form">
<form id="contact" action="" method="post">
<div class="row">
<div class="col-md-6 col-sm-12">
<fieldset>
<input name="name" type="text" id="name" placeholder="Full Name" required="" />
</fieldset>
</div>
<div class="col-md-6 col-sm-12">
<fieldset>
<input name="email" type="text" id="email" placeholder="E-Mail Address" required="" />
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
<textarea name="message" rows="6" id="message" placeholder="Your Message" required="" ></textarea>
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
<button type="submit" id="form-submit" class="main-button">Send Message
Now</button>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
)
}
}import React from "react";
export class Home extends React.Component
{
render()
{
return(
<div>
<div id="preloader">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>
<header class="header-area header-sticky">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="main-nav">
<a href="index.html" class="logo">
Lava
</a>
<ul class="nav">
<li class="scroll-to-section"><a href="#welcome" class="menu-item">Home</a></li>
<li class="scroll-to-section"><a href="#about" class="menu-item">About</a></li>
<li class="scroll-to-section"><a href="#testimonials" class="menu-item">Testimonials</a>
</li>
<li class="submenu">
<a href="javascript:;">Drop Down</a>
<ul>
<li><a href="" class="menu-item">About Us</a></li>
<li><a href="" class="menu-item">Features</a></li>
<li><a href="" class="menu-item">FAQ's</a></li>
<li><a href="" class="menu-item">Blog</a></li>
</ul>
</li>
<li class="scroll-to-section"><a href="#contact-us" class="menu-item">Contact Us</a></li>
</ul>
<a class='menu-trigger'>
<span>Menu</span>
</a>
</nav>
</div>
</div>
</div>
</header>
<div class="welcome-area" id="welcome">
<div class="header-text">
<div class="container">
<div class="row">
<div class="left-text col-lg-6 col-md-12 col-sm-12 col-xs-12"
data-scroll-reveal="enter left move 30px over 0.6s after 0.4s">
<h1>Simple App that we <em>CREATE</em></h1>
<p>Lava <a href="#">HTML landing page</a> template is provided by <a href="#">TemplateMo</a>.
You can modify and use it for your commercial websites for free of charge. This template is last updated on 29 Oct 2019.</p>
<a href="#about" class="main-button-slider">KNOW US BETTER</a>
</div>
</div>
</div>
</div>
</div>
<div class="left-image-decor"></div>
<section class="section" id="about">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"
data-scroll-reveal="enter left move 30px over 0.6s after 0.4s">
<div class="features-item">
<div class="features-icon">
<h2>01</h2>
<img src="assets/images/features-icon-1.png" alt="" />
<h4>Trend Analysis</h4>
<p>Curabitur pulvinar vel odio sed sagittis. Nam maximus ex diam, nec consectetur diam.</p>
<a href="#testimonials" class="main-button">
Read More
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"
data-scroll-reveal="enter bottom move 30px over 0.6s after 0.4s">
<div class="features-item">
<div class="features-icon">
<h2>02</h2>
<img src="assets/images/features-icon-2.png" alt="" />
<h4>Site Optimization</h4>
<p>Curabitur pulvinar vel odio sed sagittis. Nam maximus ex diam, nec consectetur diam.</p>
<a href="#testimonials" class="main-button">
Discover More
</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"
data-scroll-reveal="enter right move 30px over 0.6s after 0.4s">
<div class="features-item">
<div class="features-icon">
<h2>03</h2>
<img src="assets/images/features-icon-3.png" alt="" />
<h4>Email Design</h4>
<p>Curabitur pulvinar vel odio sed sagittis. Nam maximus ex diam, nec consectetur diam.</p>
<a href="#testimonials" class="main-button">
More Detail
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="left-image-decor"></div>
<section class="section" id="promotion">
<div class="container">
<div class="row">
<div class="left-image col-lg-5 col-md-12 col-sm-12 mobile-bottom-fix-big"
data-scroll-reveal="enter left move 30px over 0.6s after 0.4s">
<img src="assets/images/left-image.png" class="rounded img-fluid d-block mx-auto" alt="App" />
</div>
<div class="right-text offset-lg-1 col-lg-6 col-md-12 col-sm-12 mobile-bottom-fix">
<ul>
<li data-scroll-reveal="enter right move 30px over 0.6s after 0.4s">
<img src="assets/images/about-icon-01.png" alt="" />
<div class="text">
<h4>Vestibulum pulvinar rhoncus</h4>
<p>Please do not redistribute this template ZIP file for a download purpose. You may <a
rel="nofollow" href="https://templatemo.com/contact" target="_parent">contact</a> us for
additional licensing of our template or to get a PSD file.</p>
</div>
</li>
<li data-scroll-reveal="enter right move 30px over 0.6s after 0.5s">
<img src="assets/images/about-icon-02.png" alt="" />
<div class="text">
<h4>Sed blandit quam in velit</h4>
<p>You can <a rel="nofollow"
href="https://templatemo.com/tm-540-lava-landing-page">download Lava
Template</a> from our website. Duis viverra, ipsum et scelerisque placerat, orci
magna consequat ligula.</p>
</div>
</li>
<li data-scroll-reveal="enter right move 30px over 0.6s after 0.6s">
<img src="assets/images/about-icon-03.png" alt="" />
<div class="text">
<h4>Aenean faucibus venenatis</h4>
<p>Phasellus in imperdiet felis, eget vestibulum nulla. Aliquam nec dui nec augue
maximus porta. Curabitur tristique lacus.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<div class="right-image-decor"></div>
<section class="section" id="testimonials">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<div class="center-heading">
<h2>What They Think <em>About Us</em></h2>
<p>Suspendisse vitae laoreet mauris. Fusce a nisi dapibus, euismod purus non, convallis odio.
Donec vitae magna ornare, pellentesque ex vitae, aliquet urna.</p>
</div>
</div>
<div class="col-lg-10 col-md-12 col-sm-12 mobile-bottom-fix-big"
data-scroll-reveal="enter left move 30px over 0.6s after 0.4s">
<div class="owl-carousel owl-theme">
<div class="item service-item">
<div class="author">
<i><img src="assets/images/testimonial-author-1.png" alt="Author One" /></i>
</div>
<div class="testimonial-content">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<h4>Jonathan Smart</h4>
<p>“Nullam hendrerit, elit a semper pharetra, ipsum nibh tristique tortor, in tempus
urna elit in mauris.”</p>
<span>Besta CTO</span>
</div>
</div>
<div class="item service-item">
<div class="author">
<i><img src="assets/images/testimonial-author-1.png" alt="Second Author" /></i>
</div>
<div class="testimonial-content">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<h4>Martino Tino</h4>
<p>“Morbi non mi luctus felis molestie scelerisque. In ac libero viverra, placerat est
interdum, rhoncus leo.”</p>
<span>Web Analyst</span>
</div>
</div>
<div class="item service-item">
<div class="author">
<i><img src="assets/images/testimonial-author-1.png" alt="Author Third" /></i>
</div>
<div class="testimonial-content">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<h4>George Tasa</h4>
<p>“Fusce rutrum in dolor sit amet lobortis. Ut at vehicula justo. Donec quam dolor,
congue a fringilla sed, maximus et urna.”</p>
<span>System Admin</span>
</div>
</div>
<div class="item service-item">
<div class="author">
<i><img src="assets/images/testimonial-author-1.png" alt="Fourth Author" /></i>
</div>
<div class="testimonial-content">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<h4>Sir James</h4>
<p>"Fusce rutrum in dolor sit amet lobortis. Ut at vehicula justo. Donec quam dolor,
congue a fringilla sed, maximus et urna."</p>
<span>New Villager</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer id="contact-us">
<div class="container">
<div class="footer-content">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="contact-form">
<form id="contact" action="" method="post">
<div class="row">
<div class="col-md-6 col-sm-12">
<fieldset>
<input name="name" type="text" id="name" placeholder="Full Name" required="" />
</fieldset>
</div>
<div class="col-md-6 col-sm-12">
<fieldset>
<input name="email" type="text" id="email" placeholder="E-Mail Address" required="" />
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
<textarea name="message" rows="6" id="message" placeholder="Your Message" required="" ></textarea>
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
<button type="submit" id="form-submit" class="main-button">Send Message
Now</button>
</fieldset>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
)
}
}
Code of index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/assets/css/font-awesome.css">
<link rel="stylesheet" href="%PUBLIC_URL%/assets/css/templatemo-lava.css">
<link rel="stylesheet" href="%PUBLIC_URL%/assets/css/owl-carousel.css">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script src="%PUBLIC_URL%/assets/js/jquery-2.1.0.min.js"></script>
<!-- Bootstrap -->
<script src="%PUBLIC_URL%/assets/js/popper.js"></script>
<script src="%PUBLIC_URL%/assets/js/bootstrap.min.js"></script>
<!-- Plugins -->
<script src="%PUBLIC_URL%/assets/js/owl-carousel.js"></script>
<script src="%PUBLIC_URL%/assets/js/scrollreveal.min.js"></script>
<script src="%PUBLIC_URL%/assets/js/waypoints.min.js"></script>
<script src="%PUBLIC_URL%/assets/js/jquery.counterup.min.js"></script>
<script src="%PUBLIC_URL%/assets/js/imgfix.min.js"></script>
<!-- Global Init -->
<script src="%PUBLIC_URL%/assets/js/custom.js"></script>
</body>
</html>
تعليقات
إرسال تعليق
POST Answer of Questions and ASK to Doubt