logo
logo
Login/Signup

Create ReactJS and Redux Blog Web Application boilerplate

ReactJS Redux Blog Web Application boilerplate

ReactJS

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

Redux

Redux is a predictable state container for JavaScript apps.

Redux makes it easy to manage the state of your application. Another way of looking at this – it helps you manage the data you display and how you respond to user actions.

  • Installation

Redux is available as a package on NPM for use with a module bundler or in a Node application:

npm install --save redux

  • Create a New React App

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 and npm >= 5.2 on your machine. To create a project, run:

npx create-react-app my-app
cd my-app
npm start

  • New Project Folder Structure

my-app/ 
    README.md 
    node_modules/ 
    package.json 
    public/ 
    index.html 
    favicon.ico 
    src/ 
        App.css 
        App.js 
        App.test.js 
        index.css 
        index.js 
        logo.svg
  • Change App.js => App.jsx then run this command for run react app on browser
npm start
  • After run success then install required package 
npm install --save bootstrap react-dom react-redux react-router-dom reactstrap
  • Open src/index.js add this code
import React from 'react';

import 'bootstrap/dist/css/bootstrap.min.css';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

ReactDOM.render(, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: http://bit.ly/CRA-PWA

serviceWorker.unregister();
  • After create components folder in src/components
  • After that create componets folder then create header compontent src/components/header/Header.jsx and add code 
import React, { Component } from 'react'

import { Collapse,

Navbar,

NavbarToggler,

Nav,

NavItem, } from 'reactstrap';

import { Link } from 'react-router-dom';

import './Header.css'


export default class Header extends Component {

constructor(props) {

super(props);


this.toggle = this.toggle.bind(this);

this.state = {

isOpen: false

};

}

toggle() {

this.setState({

isOpen: !this.state.isOpen

});

}

render() {

return (

<div className="mb-50">

<Navbar color="faded" light fixed='top' expand="md">

<Link href="/" to="/"><img width="100%" src="http://www.codesolution.co.in/assets/images/logoicon.png" alt="Codesolution"/></Link>

<NavbarToggler onClick={this.toggle} />

<Collapse isOpen={this.state.isOpen} navbar>

<Nav className="ml-auto" navbar>

<NavItem>

<Link to="/">Home</Link>

</NavItem>

<NavItem>

<Link href="/about" to="/about">About</Link>

</NavItem>

<NavItem>

<Link href="/news" to="/news">Updates</Link>

</NavItem>

<NavItem>

<Link href="/contact" to="/contact">Contact</Link>

</NavItem>

</Nav>

</Collapse>

</Navbar>

</div>

)

}

}

 

  • create header.css in header folder and add this code
nav.navbar, .navbar-default {

background-color: #7263bc !important;

border-bottom:5px solid #323f45; padding-top:10px;

}


.navbar-default {

background-image: none;

border: none;

border-radius: 0;

}

.mb-50{

margin-bottom: 60px;

}

.navbar-default .navbar-nav > li > a {

color: white;

}


.navbar-default .navbar-brand {

color: white;

}


.navbar-default .navbar-toggle {

border-color: white;

}


.navbar-default .navbar-toggle .icon-bar {

background-color: white;

}


.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {

background-color: transparent;

}


.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {

color: white;

background-color: transparent;

}


a, a:hover{

color: #FFF !important;

text-decoration: none;

padding: 10px;

}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {

color: white;

background-color: transparent;

}
  • After then create footer folder in components and create Footer.jsx and css like that

Footer.jsx

import React, { Component } from 'react'

import './Footer.css'


export default class Footer extends Component {


render() {

return (

<div>

<footer className="footer">

<div className="container background_color">

<p className="text-center">Copyright @2019 | Designed With by <a href="http://wapptechlogics.in/" target="blank">Wapptechlogics</a></p>

</div>

</footer>

</div>

)

}

}

Footer.css

/*footer*/

.col_white_amrc { color:#FFF;}

footer { width:100%; background-color:#263238; min-height:auto; padding:5px 0px 5px 0px ;}

footer p { font-size:13px; color:#CCC; padding-bottom:0px; margin-bottom:8px;}


.background_color{

background: #7263bc;

border-radius: 0;

}

.bottom_border { border-bottom:1px solid #323f45; padding-bottom:20px; background: #7263bc;border-radius: 0px;}
  • After then create home folder then create Home.jsx and css like that

Home.jsx

import React, { Component } from 'react'

import { Link } from 'react-router-dom';

import { Card, CardImg, CardText, CardBody,

CardTitle, CardSubtitle, Button, Container, Row, Col, ListGroup, ListGroupItem } from 'reactstrap';

import './Home.css';


export default class Home extends Component {

componentDidMount() {

window.scrollTo(0, 0)

}

render() {

return (

<div>

<Container>

<Row>

<Col xs="12" sm="8" md="9" lg="9">

<Row className="cart-list">

<Col xs="12" sm="6" md="6" lg="4" className="cart-item">

<Card>

<CardImg top width="100%" src="codeicon.png" alt="Card image cap" />

<CardBody>

<CardTitle>Card title</CardTitle>

<CardSubtitle>Card subtitle</CardSubtitle>

<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>

<Link to="/about"><Button>Button</Button></Link>

</CardBody>

</Card>

</Col>

<Col xs="12" sm="6" md="6" lg="4" className="cart-item">

<Card>

<CardImg top width="100%" src="codeicon.png" alt="Card image cap" />

<CardBody>

<CardTitle>Card title</CardTitle>

<CardSubtitle>Card subtitle</CardSubtitle>

<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>

<Link to="/about"><Button>Button</Button></Link>

</CardBody>

</Card>

</Col>

<Col xs="12" sm="6" md="6" lg="4" className="cart-item">

<Card>

<CardImg top width="100%" src="codeicon.png" alt="Card image cap" />

<CardBody>

<CardTitle>Card title</CardTitle>

<CardSubtitle>Card subtitle</CardSubtitle>

<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>

<Link to="/about"><Button>Button</Button></Link>

</CardBody>

</Card>

</Col>

<Col xs="12" sm="6" md="6" lg="4" className="cart-item">

<Card>

<CardImg top width="100%" src="codeicon.png" alt="Card image cap" />

<CardBody>

<CardTitle>Card title</CardTitle>

<CardSubtitle>Card subtitle</CardSubtitle>

<CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>

<Link to="/about"><Button>Button</Button></Link>

</CardBody>

</Card>

</Col>

</Row>

</Col>

<Col xs="12" sm="4" md="3" lg="3">

<ListGroup className="list_div">

<ListGroupItem>

<div className="image-div">

<img top width="100%" src="codeicon.png" className="image-left" alt="Card image cap" />

</div>

<div className="image-title">

<h2 className="font14">Cras justo odio</h2>

</div>

</ListGroupItem>

<ListGroupItem>

<div className="image-div">

<img top width="100%" src="codeicon.png" className="image-left" alt="Card image cap" />

</div>

<div className="image-title">

<h2 className="font14">Cras justo odio</h2>

</div>

</ListGroupItem>

<ListGroupItem>

<div className="image-div">

<img top width="100%" src="codeicon.png" className="image-left" alt="Card image cap" />

</div>

<div className="image-title">

<h2 className="font14">Cras justo odio</h2>

</div>

</ListGroupItem>

<ListGroupItem>

<div className="image-div">

<img top width="100%" src="codeicon.png" className="image-left" alt="Card image cap" />

</div>

<div className="image-title">

<h2 className="font14">Cras justo odio</h2>

</div>

</ListGroupItem>

<ListGroupItem>

<div className="image-div">

<img top width="100%" src="codeicon.png" className="image-left" alt="Card image cap" />

</div>

<div className="image-title">

<h2 className="font14">Cras justo odio</h2>

</div>

</ListGroupItem>

<ListGroupItem>

<div className="image-div">

<img top width="100%" src="codeicon.png" className="image-left" alt="Card image cap" />

</div>

<div className="image-title">

<h2 className="font14">Cras justo odio</h2>

</div>

</ListGroupItem>

<ListGroupItem>

<div className="image-div">

<img top width="100%" src="codeicon.png" className="image-left" alt="Card image cap" />

</div>

<div className="image-title">

<h2 className="font14">Cras justo odio</h2>

</div>

</ListGroupItem>

</ListGroup>

</Col>

</Row>

</Container>

</div>

)

}

}

 

Home.css

.jumbotron {

margin-bottom: 4em;

}

.person-wrapper {

margin-bottom: 2em;

}


.profile-pic {

width: 50%;

}

.container{

margin: 0px;

padding: 10px;

max-width: 100% !important;

}

.btn-primary {

background-image: none;

border: none;

border-radius: 0;

background-color: #2892D7;

}

.card{

padding: 10px;

margin: 0px;

}

.cart-list{

margin: 0%;

}

.cart-item{

padding: 10px;

}

.cart-item .card{

margin: 0px;

}

h3 {

margin-bottom: 1em;

}

.image-left{

width: 50px;

height: 50px;

border-radius: 100%;

}

.list-group-item{

padding: 5px 10px !important;

}

.list_div{

padding: 10px 0px !important;

}

.image-div{

width: 50px;

height: 50px;

display: inline-block;

}

.image-title{

padding-left: 10px;

display: inline-block;

word-break: break-all;

font-size: 14px !important;

}

.font14{

font-size: 14px !important;

}
  • Create news,about and contact folder and page like home folder and jsx 
  • Open App.jsx and add this code
import React, { Component } from 'react';

import { BrowserRouter as Router, Route } from 'react-router-dom';

import Home from './components/home/Home';

import About from './components/About/About';

import News from './components/news/News';

import Contact from './components/Contact/Contact';

import Navbar from './components/header/Header';

import Footer from './components/footer/Footer';

class App extends React.Component {

render() {

return (

<Router>

<div>

<Navbar />

<Route exact path="/" component={Home} />

<Route path="/about" component={About} />

<Route path="/news" component={News} />

<Route path="/contact" component={Contact} />

<Footer />

</div>

</Router>

);

}

}

export default App;

 

  • After that run code 
npm start

 

Thank You :)

youtube : https://www.youtube.com/watch?v=xFkN8-cWZW8

Github link: https://github.com/Sudarshan101/ReactRouting.git

About the author
Code solution

info@codesolution.co.in

Discussion
  • 0 comments
Add comment To Login
Add comment
Social Links
  • CodeSolution App
  • Facebook
  • Twitter
  • Linkedin
  • Youtube
  • Instagram
  • Discord
  • Whatsapp Group
    • Technologies
  • Android 21
  • NodeJS 15
  • Ionic 14
  • React Native 13
  • ReactJS 8
  • CSS/CSS3 6
  • Angular 4
  • Flutter 4
  • PHP 3
  • Bootstrap 2
  • NextJS 1
  • Javascript 1
    • Share
    Tags
    © 2024 - 2025. Developed by Wapptechlogics