How to create multiple page app using react

Question

I have created a single page web app using react js  I have used webpack to create bundle of all components  But now I want to create many other pages  Most of pages are API call related  i e  in the index html  I have displayed content from API  I want to insert content in another page parsing data from API  Webpack compresses everything of react in a file which is bundle js  However  the configuration of webpack is as follow   const webpack   require  webpack     var config     entry     main js    output        path           filename   dist bundle js       devServer        inline  true      port  3000     module        loaders                          test     jsx                 exclude   node modules               loader   babel                query                    presets    es2015    react                                     plugins        new webpack DefinePlugin            process env                  NODE ENV   JSON stringify  production                         new webpack optimize UglifyJsPlugin           compress                warnings  false                       module exports   config    Now  I am confused what kind of configuration of webpack will be for other page or what is the correct way to build multi-pages app using react js

User · Answer

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-router, redux, redux-saga, react-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.

User · Answer

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

User · Answer

Preface This answer uses the dynamic routing approach embraced in react-router v4   Other answers may reference the previously-used  quot static routing quot  approach that has been abandoned by react-router  Solution react-router is a great solution  You create your pages as Components and the router swaps out the pages according to the current URL  In other words  it replaces your original page with your new page dynamically instead of asking the server for a new page  For web apps I recommend you read these two things first   Full Tutorial The react-router docs  it will help you get a better understanding of how Router works   Summary of the general approach  1 - Add react-router-dom to your project  Yarn yarn add react-router-dom  or NPM npm install react-router-dom  2 - Update your index js file to something like  import   BrowserRouter   from  react-router-dom    ReactDOM render      lt BrowserRouter gt       lt App   gt      The various pages will be displayed by the  Main  component         lt  BrowserRouter gt       document getElementById  root       3 - Create a Main component that will show your pages according to the current URL  import React from  react   import   Switch  Route   from  react-router-dom    import Home from     pages Home   import Signup from     pages Signup    const Main        gt      return        lt Switch gt      The Switch decides which component to show based on the current URL            lt Route exact path     component  Home  gt  lt  Route gt         lt Route exact path   signup  component  Signup  gt  lt  Route gt       lt  Switch gt          export default Main   4 - Add the Main component inside of the App js file  function App       return        lt div className  quot App quot  gt         lt Navbar   gt         lt Main   gt       lt  div gt          5 - Add Links to your pages   You must use Link from react-router-dom instead of just a plain old  lt a gt  in order for the router to work properly   import   Link   from  quot react-router-dom quot        lt Link to  quot  signup quot  gt     lt button variant  quot outlined quot  gt      Sign up    lt  button gt   lt  Link gt

User · Answer

Make sure to install react-router using npm    To use react-router  you do the following    Create a file with routes defined using Route  IndexRoute components Inject the Router  with  r    component as the top-level component for your app  passing the routes defined in the routes file and a type of history  hashHistory  browserHistory  Add  this props children  to make sure new pages will be rendered there Use the Link component to change pages   Step 1 routes js  import React from  react   import   Route  IndexRoute   from  react-router           Import all page components here     import App from    components App   import MainPage from    components MainPage   import SomePage from    components SomePage   import SomeOtherPage from    components SomeOtherPage           All routes go here     Don t forget to import the components above after adding new route      export default      lt Route path     component  App  gt       lt IndexRoute component  MainPage    gt       lt Route path   some where  component  SomePage    gt       lt Route path   some otherpage  component  SomeOtherPage    gt     lt  Route gt       Step 2 entry point  where you do your DOM injection      You can choose your kind of history here  e g  browserHistory  import   Router  hashHistory as history   from  react-router      Your routes js file import routes from    routes    ReactDOM render     lt Router routes  routes  history  history    gt     document getElementById  your-app        Step 3 The App component  props children   In the render for your App component  add  this props children    render       return        lt div gt         lt header gt          This is my website         lt  header gt          lt main gt           this props children         lt  main gt          lt footer gt          Your copyright message        lt  footer gt       lt  div gt           Step 4 Use Link for navigation  Anywhere in your component render function s return JSX value  use the  Link component   import   Link   from  react-router          lt Link to   some where  gt Click me lt  Link gt

[javascript] How to create multiple page app using react

Examples related to javascript

Examples related to jquery

Examples related to reactjs

Examples related to webpack