Reactjs Tutorial And Static Website React Native Web App

Today we will see a step-by-step example to find a Reactjs tutorial and the best way to create-react app fast for desktop applications & mobile React Native app.

Reactjs Tutorial

Hello Friends,

Today, we are going to see how to create an animated static page-based dynamic website fast and show all information on a single page application without refreshing the website. This is the process where you will get the fast-loaded website as compare to other websites in the website speed test. The React app gives you only the required code that you want to use at the current time and others will remove it.

Our React tutorial includes code and short related content that will help you understand where what we are doing to create react app. Now let’s start on how to make a website or project.

Install Node Js

Friends, if you don’t have node js in your device then first you need to install that because that is the basic and main platform where your react app will run. To install node js you can go on the node js website and download an installable file and run it on your device.

Now go to your desktop computer icon and right-click on it. Here you need to go into the environment path and set your node package path to allow node commands on the system.

Now open the command prompt and type the below code to check npm is the start or not?

Command: npm version

Here you will get the below screen that will confirm, you have successfully installed npm.

node js install nodejs

Install Or Create React App

In our Reactjs tutorial, you are on the step where you need to use the below command to set up your project base files on your system. We assume you are creating a project with the name “animatewebsite”. The create-react app command will be:

Command: npx create-react-app animatewebsite

Now it will take some time to install an application and after creating you will get below on screen:

Create reactjs app project
reactjs tutorial after installing or create project

In the upcoming chapter, we will take about react hooks and react redux that are also important in curd application development.

Website Development Or React Web App Steps

Now open that project files on any code writer software and remove unwanted files from the src folder like logo, setup test, app test, etc. Now you have the fresh site to move forward.

Assuming you have a basic idea of the folder structure of react app. so, not including it in reactjs tutorial.

Open your index.js file where you will get the app component that is the main component of our app and it will have some import from react packages to connect with react. This is the basic file of Reactjs tutorial and code will look like below:

React web app Project view

Now go into the app.js file and remove the whole code that is in “App” class or className. Now put the hello text to get “Hello” Wording at the frontend.

How To Start React App

Now to start the project using the below command that will open a tab on your default browser and show a hello message.

Command: npm start

Now install bootstrap on your project using the below command to get the layout of the header, footer, and a content area with responsive design.

Install Bootstrap NPM

Use the below command to install bootstrap npm to get prebuild RWD design layout.

Command: npm i bootstrap

Bootstrap Add Reactjs

To add bootstrap in any react file you need to import a bootstrap package like below to your respective file where you are using its HTML, CSS, and js to add react-bootstrap.

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

Now when you go to the frontend and check the console you may get the below error and to solve this error you need to install jquery in your project.

Module not found: Can’t resolve ‘jquery’

Install React jQuery

To install jQuery in react use the below command.

Command: npm i jquery

Now check the frontend again and your jQuery-related function will work now and in the console, you will able to solve your error.

Install Fontawsome NPM

Use the below command to install font awesome icons npm to get icons in the design layout.

Command: npm i font-awesome

It is a fast font icon same as the SVG icon and easy to use in HTML code. To add react-fontawesome in any file same as bootstrap html you need to import fontawesome package file like.

import 'font-awesome/css/font-awesome.min.css';

Hope you are able to get all of the thing that we are sharing here with you.

Add Navigation In React

To add navigation you need to install react router dom package that will allow you to add navigation, history, redirect options to build your website.

We assume you are using bootstrap navigation, now you need to go at App.js file and wrap the App tag in BrowserRoute tag. To add BrowserRoute tag you need to import a package like below:

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

<BrowserRouter>
   <App />
</BrowserRouter>

Install React Router DOM

Command: npm i react-router-dom

Now App.js changes will look like below:

<>
    <Navbar />
    <Switch>
    <Route exact path="/" component={Home} ></Route>
    <Route exact path="/about" component={About} ></Route>
    <Route exact path="/courses" component={Courses} ></Route>
    <Route exact path="/contact" component={Contact} ></Route>
    <Redirect to="/"></Redirect>
    </Switch>
</>

Here the component tag will come in a switch statement if you want to navigation that otherwise, all sections go outside like navigation, header, and footer. Header, Footer, and navigation will go outside because that will be the same for all pages only middle content will change.

You will get more description if you read continuously this article.

To add Switch or Redirect you need to import react-router-dom at the top. If you are using a visual code editor that will automatically import.

import {Switch, Route} from 'react-router-dom';
import { Redirect } from 'react-router-dom';

What Is React Route?

The Route will help you to show content related to that page. The Path with allows you to show content on the respective page for what URL you shared and exact will show page exactly on that URL, not on other pages.

With the help of route, you can use one component at any place that you will get the idea below with our share code. Exmple have diffrent slider image on diffrent page.

Now Time to show the whole pages/project code here for you so, you will able to get exactly what we have been implementing and you can copy it into your project to get the basic structure of the project.

Index.Js File Code

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
  <BrowserRouter>
    <App />
	</BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

App.Js File Code

import React from 'react';
import {Switch, Route} from 'react-router-dom';
import { Redirect } from 'react-router-dom';
import About from './About';
import Contact from './Contact';
import Courses from './Courses';
import Home from './Home';
import Navbar from './Navbar';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle';
import 'font-awesome/css/font-awesome.min.css';
import './style1.css';

const App = () => {
  return (
   <>
    <Navbar />
    <Switch>
    <Route exact path="/" component={Home} ></Route>
    <Route exact path="/about" component={About} ></Route>
    <Route exact path="/courses" component={Courses} ></Route>
    <Route exact path="/contact" component={Contact} ></Route>
    <Redirect to="/"></Redirect>
    </Switch>
    </>
  );
}

export default App;

Home.Js File Code

import React from 'react';
import Comman from './Comman';
import Homskider from '../src/img/webh.jpeg';

const Home = () => {
  return (
    <>
     <h1>Home page</h1>
     <Comman name="This isone home testing" imgsrc={Homskider} visit="/contact"/>
    </>
  );
}

export default Home;

About.Js File Code

import React from 'react';
import Comman from './Comman';
import Aboutkider from '../src/img/webh.jpeg';

const About = () => {
  return (
    <>
     <h1>About page</h1>
     <Comman name="This isone about testing" imgsrc={Aboutkider} visit="/contact"/>
     </>
  );
}

export default About;

Home and About us having a dynamic section that will be changed based on passing data for page and that will make structure on comman.js file.

Card.Js File Code

import React from 'react';

const Card = (props) => {

return(

    <div clas="col-md-4 col-10 mx-auto">
     <div className="card">
           <img src={props.imgsrc} />
     </div>
     <div className="card-body">
           <div className="title">{props.itle}</div>
           <div className="descroptcard">{props.desc}</div>

     </div>

    </div>

);

}

export default Card;

Comman.Js File Code

import React from 'react';
import { NavLink } from 'react-router-dom';
{/*import Homskider from '../src/img/webh.jpeg';*/}

const Comman=(props)=>{

return(

    <section id="comantop" className="center d-flex comansecwrp">
       <div className="container-fluid">  
         <div className="row">
           <div className="col-6">
            <h2>{props.name}</h2>
            <p>dfhfjdh jdhfjhdf ksfhkdgfj jkdfda kkafd kjdajkdf kjfdaj dkfkabd kjdfkdf.</p>
            <NavLink  to={props.visit} className="btn btn-primary" >Get Started</NavLink>
           </div>
           <div className="col-6">
              <img src={props.imgsrc} />
           </div>
         </div>
         </div>
    </section>

);

}

export default Comman;

Here the props get dynamic data that is coming from another pages.

Contact.Js File Code

import React from 'react'; 

const Contact = () => {

  const formsubmit = (e) => {
  e.preventDefault();
  alert("data captur");
  }

  return (
     <>
     <h1>Contact page</h1>
      <form onSubmit={formsubmit}>
       <input type="text" name="name" />
       <input type="text" name="data" />
       <input type ="submit" name="submite" value="Submit"/>

      </form>

    </>
  );
}

export default Contact;

Courses.JS File Code

import React from 'react';
import Card from './Card';
import Data from './Data'; 

const Courses = () => {
  return (
    <>
     <h1>Courses page</h1>
     <div clas="fdfd">

     <div className="container-fluid pedri">
       <div className="row">
			{

			Data.map((val,ind)=>{
			  return <Card 
			  key={ind}
			  imgsrc={val.imgsrc}
			  itle={val.itle}
			  desc={val.desc}
			  
			  />
			})

			}

       </div>

     </div>

     </div>
     </>
  );
}

export default Courses;

Here “map” function used for breaking the object array and pass into the card file to show data from data.js file.

Data.Js File Code

import React from 'react';
import Homskider1 from '../src/img/webh.jpeg';
import Homskider2 from '../src/img/webh.jpeg';
import Homskider3 from '../src/img/webh.jpeg';
import Homskider4 from '../src/img/webh.jpeg';
import Homskider5 from '../src/img/webh.jpeg'; 

const Data  = [

    {
       imgsrc: Homskider1,
       itle: 'this is first t 1',
       desc: 'this is decript t1'
    },
    {
        imgsrc: Homskider2,
        itle: 'this is first t 2',
        desc: 'this is decript t2'
     },
     {
        imgsrc: Homskider3,
        itle: 'this is first t 3',
        desc: 'this is decript t3'
     },
     {
        imgsrc: Homskider4,
        itle: 'this is first t 4',
        desc: 'this is decript t4'
     },
     {
        imgsrc: Homskider5,
        itle: 'this is first t 5',
        desc: 'this is decript t5'
     }

]

export default Data;

Navbar.Js File Code

import React from 'react'; 
import { NavLink } from 'react-router-dom';

const Navbar = () => { 

return (
 
    <div className="container-fluid nav_bg pedri">   
        <div className="row incrreasewiandpsdzo">
          <div className="col-12">
          <nav className="navbar navbar-expand-lg navbar-light">
             <NavLink className="navbar-brand" to="/">BI</NavLink>
             <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span className="navbar-toggler-icon"></span>
            </button>

            <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav mb-2 mb-lg-0 righmove">
        <li className="nav-item">
          <NavLink className="nav-link" aria-current="page" to="/"><i className="fa fa-home" aria-hidden="true"></i> Home</NavLink>
        </li>
        <li className="nav-item">
          <NavLink className="nav-link" aria-current="page" to="/about">About Us</NavLink>
        </li>
        <li className="nav-item">
          <NavLink className="nav-link" aria-current="page" to="/courses"><i class="fa fa-laptop" aria-hidden="true"></i> Courses</NavLink>
        </li>
        <li className="nav-item">
          <NavLink className="nav-link" aria-current="page" to="/contact">Contact Us</NavLink>
        </li>
      </ul>
  
    </div>

           </nav>
          </div>

        </div>


    </div>


  );
}

export default Navbar;

Hope our Reactjs tutorial article gave you lot of knowledge to start your project and you will like us and share article on social site to share with others. You can join us on our social channels to get more latest updates.

Stay in touch. Ask Questions.
Lean on us for help, strategies and expertise.

Leave a Reply

Your email address will not be published. Required fields are marked *