React Router Dom Boilerplate – codeburst

Intro to React Router Dom V4.2.2

☞ 

#Reactjs #javascript

  • First we install new app using create-react-app – npm install -g introRouter – cd introRouter – npm start //to start appNow we want to install the react-router-dom – npm i –save react-router-dom Now create a router folder in src directory – In router folder create new file with name router.js…
  • /components/Posts”;import Header from “.
  • /header”;const ReactRouter =()={return (React.FragmentHeader /Route exact path=”/” component={App} /Route path=”/posts” component={Posts} //React.Fragment);}export default ReactRouter;we added exact it tells to load only these component – Now create components folder in src directory/folderDelete App.js file in your src folder – Add new App.js in the Components Folder – Add below code in…
  • we are importing Navlink from react-router-dom – to create link tags – import React, { Component } from “react”;import { NavLink } from “react-router-dom”;class Header extends Component {active = {fontWeight: “bold”,color: “red”};header = {display: “flex”,justifyContent: “space-evenly”,listStyle: “none”};render() {return (div style={this.header}NavLink exact to=”/” to=”/posts” default Header;Above Header component we already included…
  • /index.css’;import {BrowserRouter as Router} from ‘react-router-dom’;import ReactRouter from makes our index.js very less code and no confusion – We already separated router.js and header.js – Thanks for consuming your valuable time i hope you love these – Github repository for code

First we install new app using create-react-app. “React Router Dom Boilerplate” is published by Sai gowtham in codeburst
Continue reading “React Router Dom Boilerplate – codeburst”

Intro to React Router Dom V4.2.2 – codeburst

Intro to React Router Dom V4.2.2

☞ 

#Reactjs #javascript

  • First we install new app using create-react-app – npm install -g introRouter – cd introRouter – npm start //to start appNow we want to install the react-router-dom – npm i –save react-router-dom Now create a router folder in src directory – In router folder create new file with name router.js…
  • /components/Posts”;import Header from “.
  • /header”;const ReactRouter =()={return (React.FragmentHeader /Route exact path=”/” component={App} /Route path=”/posts” component={Posts} //React.Fragment);}export default ReactRouter;we added exact it tells to load only these component – Now create components folder in src directory/folderDelete App.js file in your src folder – Add new App.js in the Components Folder – Add below code in…
  • we are importing Navlink from react-router-dom – to create link tags – import React, { Component } from “react”;import { NavLink } from “react-router-dom”;class Header extends Component {active = {fontWeight: “bold”,color: “red”};header = {display: “flex”,justifyContent: “space-evenly”,listStyle: “none”};render() {return (div style={this.header}NavLink exact to=”/” to=”/posts” default Header;Above Header component we already included…
  • /index.css’;import {BrowserRouter as Router} from ‘react-router-dom’;import ReactRouter from makes our index.js very less code and no confusion – We already separated router.js and header.js – Thanks for consuming your valuable time i hope you love these – Github repository for code

First we install new app using create-react-app. “Intro to React Router Dom V4.2.2” is published by Sai gowtham in codeburst
Continue reading “Intro to React Router Dom V4.2.2 – codeburst”