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>
<section class="container principal-content">
<h1 class="text-center title">Your site name</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<p class="text-center lead">Put here your site description for example: Bootdey is a gallery of free bootstrap framework snippets Html Css Js codes</p>
<div class="row">
<div class="col-xs-6">Some brand-tacular designs even have home page content that is taller that 12,000 pixels. That's a lotta content.</div>
<div class="col-xs-6 text-right">Anyhoo, this is just some random blurb of text, and bootdey.com is a gallery of free bootstrap snippets bootdeys</div>
</div>
<p class="text-center">
<img src="https://bootdey.com/img/Content/Manbrown2.png" class="img-responsive center-block img-user"/>
</p>
<div class="row">
<div class="controls">
<form action="/Jiita/cursos/buscar" method="get">
<div class="input-group">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
</div>
<input type="text" style={{/*padding:6px 6px;*/}} value="" name="q" placeholder="Email to suscribe" class="form-control"/>
<div class="input-group-btn">
<button type="submit" class="btn btn-success"><i class="glyphicon glyphicon-book"></i>Suscribe</button>
</div>
</div>
</form>
</div>
</div>
<br/>
<br/>
</div>
</div>
</section>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
background:#eee;
}
.principal-content{
background-color: #168ccc;
color: #FFFFFF;
}
.img-user{
width:200px;
height:200px;
}
.title {
color: #fff;
text-shadow: 1px 1px 0 #888;
line-height: normal;
font-weight: 1em;
font-family: serif;
font-size: 40px;
margin-bottom: 10px;
font-weight:bold;
}