Introduction

Get Start With Landrick in React Js. Launch your campaign and benefit from our expertise on designing and managing conversion centered bootstrap4 React js page.

Quick start

Start working with Landrick that can provide everything you need to generate awareness, drive traffic, connect. Head to the CRA installation page.

CSS/SCSS

Import all CSS and SCSS files in App.js file just like below.

import './Apps.scss';

import './css/materialdesignicons.min.css';

import './css/color/default.css';

Installtion

The zip file contains all js files integrated with Landrick, however you need to perform following steps to get node_modules etc. Make sure you have installed node and its version is greater then 9. You can simply switch your current node version using nvm (Node version manager).

`npm install`

To run project locally you need to run below command.

`npm start`

Reactstrap

Reactstrap provides prebuilt Bootstrap 4 components that allow a great deal of flexibility and prebuilt validation. This allows us to quickly build beautiful forms that are guaranteed to impress and provide an intuitive user experience.Import required reactstrap components within src/App.js file or your custom component files.

Starter Template

Next is the index.html page, located in the public folder. If you do link up any external stylesheets, or need to add bootstrap, or another feature. This is where you would add it. You can see where I’ve added bootstrap in the project here. You can also change the title here, which as you can see, I have failed to do. Other than that, you won’t usually need to touch this file very much. You will also notice the div with the id of “root”. This is where all of the content will be output. You don’t need to change that, but just know that it’s there.

<!doctype html> 
<html lang="en"> 
 <head> 

 <meta charset="utf-8" /> 
 <title> Landrick - Saas & Software Landing Page Template </title> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 <meta name="description" content="Site description" /> 
 <meta name="keywords" content="Your tags" /> 
 
 <!-- favicon icon --> 
 <link rel="shortcut icon" href="images/favicon.ico"> 

 </head> 
 <body> 

 <div id="root"> </div> 
 
 </body> 
</html>

App.js

Since we have a separate components file for each component, we can work on them separately, or divide responsibilities between different members of a team, if it is a group, rather than an individual project. Let’s briefly take a look at our App.js file

import React, { Component } from 'react'; 
import { Route, Switch, BrowserRouter as Router, withRouter } from 'react-router-dom'; 
import './Apps.scss'; 
import routes from './routes'; 

const Root = React.lazy(() => import('./pages/Home/indexRoot')); 
const PageComingSoon = React.lazy(() => import('./pages/PageComingSoon')); 

class App extends Component { 
 render() {  
 return (  
 <Router> 
 <Route path="/page-comingsoon" component= { PageComingSoon } /> 
 </Router> 
 ); 
 } 
 } 
export default withRouter(App);

Light Version :

In order to have Light mode enabled, add style.scss

RTL Version :

In order to have RTL mode enabled, replace the reference of style.scss to style-rtl.scss

Dark Version :

In order to have Dark mode enabled, replace the reference of style.scss to style-dark-rtl.scss

Dark RTL Version :

In order to have Dark RTL mode enabled, replace the reference of style.scss to style-dark-rtl.scss

Change Theme Color :

In order to change theme color, replace the default color css of default.css to green.scss(or any other which you want from existing color css) in app.js file

Documentation