close

How to create multiple page app using react

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to create multiple page app using react in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to create multiple page app using react

  1. How to create multiple page app using react

    to create multiple page app using react
    entry: { outputone: './source/fileone.jsx', outputtwo: './source/filetwo.jsx' }, output: { path: path.resolve(__dirname, './wwwroot/js/dist'), filename: '[name].js' },

  2. How to create multiple page app using react

    to create multiple page app using react
    entry: { outputone: './source/fileone.jsx', outputtwo: './source/filetwo.jsx' }, output: { path: path.resolve(__dirname, './wwwroot/js/dist'), filename: '[name].js' },

Method 1

This is a broad question and there are multiple ways you can achieve this. In my experience, I’ve seen a lot of single page applications having an entry point file such as index.js. This file would be responsible for ‘bootstrapping’ the application and will be your entry point for webpack.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Application from './components/Application';

const root = document.getElementById('someElementIdHere');

ReactDOM.render(
  <Application />,
  root,
);

Your <Application /> component would contain the next pieces of your app. You’ve stated you want different pages and that leads me to believe you’re using some sort of routing. That could be included into this component along with any libraries that need to be invoked on application start. react-routerreduxredux-sagareact-devtools come to mind. This way, you’ll only need to add a single entry point into your webpack configuration and everything will trickle down in a sense.

When you’ve setup a router, you’ll have options to set a component to a specific matched route. If you had a URL of /about, you should create the route in whatever routing package you’re using and create a component of About.js with whatever information you need.

Method 2

The second part of your question is answered well. Here is the answer for the first part: How to output multiple files with webpack:

    entry: {
            outputone: './source/fileone.jsx',
            outputtwo: './source/filetwo.jsx'
            },
    output: {
            path: path.resolve(__dirname, './wwwroot/js/dist'),
            filename: '[name].js'      
            },

This will generate 2 files: outputone.js und outputtwo.js in the target folder.

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment