Step by Step Tutorial: Building and Deploying a Fully Responsive Website using React JS

In this tutorial, we will walk you through the process of building and deploying a complete responsive website using React JS. React JS is a popular JavaScript library for building user interfaces, and it is widely used for creating interactive and dynamic web applications.

Before we get started, make sure you have Node.js and npm installed on your system. You can download and install Node.js from the official website at https://nodejs.org/. Once you have Node.js installed, you can install React CLI by running the following command in your terminal:

npm install -g create-react-app

Now that you have React CLI installed on your system, you can create a new React project by running the following command in your terminal:

npx create-react-app my-website

Replace "my-website" with the name of your project. This will create a new React project in a directory called "my-website". Once the project is created, navigate to the project directory by running the following command:

cd my-website

Now we can start building our website. We will create a simple responsive website with a header, footer, and a few pages. Create a new components directory inside the src directory, and create the following components:

1. Header.js
2. Footer.js
3. Home.js
4. About.js
5. Contact.js

In each component file, add the following code:

Header.js:

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>My Website</h1>
    </header>
  );
}

export default Header;

Footer.js:

import React from 'react';

const Footer = () => {
  return (
    <footer>
      <p>&copy; 2021 My Website. All rights reserved.</p>
    </footer>
  );
}

export default Footer;

Home.js:

import React from 'react';

const Home = () => {
  return (
    <section>
      <h2>Home Page</h2>
      <p>Welcome to my website!</p>
    </section>
  );
}

export default Home;

About.js:

import React from 'react';

const About = () => {
  return (
    <section>
      <h2>About Page</h2>
      <p>Learn more about us.</p>
    </section>
  );
}

export default About;

Contact.js:

import React from 'react';

const Contact = () => {
  return (
    <section>
      <h2>Contact Page</h2>
      <p>Get in touch with us.</p>
    </section>
  );
}

export default Contact;

Now that we have created our components, we can create our main App component in App.js:

import React from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const App = () => {
  return (
    <div>
      <Header />
      <Home />
      <About />
      <Contact />
      <Footer />
    </div>
  );
}

export default App;

Next, we need to create routes for our website using React Router. Install React Router by running the following command in your terminal:

npm install react-router-dom

Create a new file called Routes.js inside the src directory, and add the following code:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const Routes = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

export default Routes;

Update the App component in App.js to include the Routes component:

import React from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import Routes from './Routes';

const App = () => {
  return (
    <div>
      <Header />
      <Routes />
      <Footer />
    </div>
  );
}

export default App;

Now we have set up the basic structure of our website with different pages and routes. You can add more components and pages as needed to customize your website further.

To deploy our website, we can use platforms like Netlify or Vercel. Sign up for a free account on either platform and follow their instructions to deploy your React project.

Congratulations! You have successfully built and deployed a complete responsive website using React JS. Feel free to customize and enhance your website further to make it your own. Happy coding!