React Js Application Journey 🚀✨

Choose any IDE (Integrated Development Environment), I usually prefer VS Code because it provides several extensions that helped me a lot during writing code.

• Now Open a new window in VS Code, then open the terminal either from the option on top or from a simple command ctrl + ` (for Windows).

  Navigate to the folder where you prefer to store your React Js application, here in my case D:\React Projects .

  • Now type the command npm create-react-app application_name.

  It takes some time to set up react app.

• After the successful creation of an app, you need to open index.js file and did some changes to the code

    import React from "react";
    import ReactDOM from "react-dom";
    import "./index.css";
    import App from "./App";
    import reportWebVitals from "./reportWebVitals";
    import "bootstrap/dist/css/bootstrap.min.css";
    import { BrowserRouter } from "react-router-dom";
  
    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      document.getElementById("root")
    );
  
    reportWebVitals();
  

• Now we need to create javascript files to write application code, here I created a MainPage.js file with sample code.

    import React from "react";
    import "./App.css";
  
    function MainPage() {
      return (
        <>
            <h1>Welcome 👋👋</h1>
        </>
      );
    }
  
    export default MainPage;
  

• After that open App.js file to write routes for the application

    import MainPage from "./MainPage";
    import "./App.css";
    import { Routes, Route } from "react-router-dom";
  
    function App() {
      return (
        <>
          <Routes>
            <Route exact path="/" element={<MainPage />} />
          </Routes>
        </>
      );
    }
  
    export default App;
  

• Here our application is ready to check on the browser, you just simply need to type npm start on the new terminal.

  

Thanks for reading this 🎉🎉