Best IT Recipes

Using React in a multi-page application

I play with React, and still enjoy it a lot. I am building an application with NodeJS and would like to use React for some interactive components in the application. I do not want to make this a one-page application.

I have not found anything on the Internet that answer the following questions:

How to split or combine my React components in a multi-page application?

Currently, all my components are in a single file, although I never download them in some sections of the application.

So far, I'm trying to use conditional operators to render components by looking for the identifier of the container in which React will respond. I am not 100% sure the best practices with React. It looks something like this.

if(document.getElementById('a-compenent-in-page-1')) { React.render( <AnimalBox url="/api/birds" />, document.getElementById('a-compenent-in-page-1') ); } if(document.getElementById('a-compenent-in-page-2')) { React.render( <AnimalBox url="/api/cats" />, document.getElementById('a-compenent-in-page-2') ); } if(document.getElementById('a-compenent-in-page-3')) { React.render( <AnimalSearchBox url="/api/search/:term" />, document.getElementById('a-compenent-in-page-3') ); }

I am still reading the documentation and have not yet found what I need for a multi-page application.

Thanks in advance.

+109
javascript reactjs
Aug 11 '15 at 4:41
source share
4 answers

I'm currently doing something similar.

The application is not a complete React App, I use React for a dynamic stuff, like CommentBox, which is autark. And it can be included at any point with special parameters ..

However, all my supporting applications are downloaded and included in a single all.js file, so it can be cached by the browser through pages.

When I need to include the application in SSR templates, I just need to include the DIV with the class "__react-root" and a special identifier (the name of the displayed React application)

The logic is very simple:

 import CommentBox from './apps/CommentBox'; import OtherApp from './apps/OtherApp'; const APPS = { CommentBox, OtherApp }; function renderAppInElement(el) { var App = APPS[el.id]; if (!App) return; // get props from elements data attribute, like the post_id const props = Object.assign({}, el.dataset); ReactDOM.render(<App {...props} />, el); } document .querySelectorAll('.__react-root') .forEach(renderAppInElement) 


 <div>Some Article</div> <div id="CommentBox" data-post_id="10" class="__react-root"></div> <script src="/all.js"></script>

What do you think?

+74
Oct 08 '16 at 18:33
source share

You can specify multiple entry points for the application in the webpack.config.js file:

 var config = { entry: { home: path.resolve(__dirname, './src/main'), page1: path.resolve(__dirname, './src/page1'), page2: path.resolve(__dirname, './src/page2'), vendors: ['react'] }, output: { path: path.join(__dirname, 'js'), filename: '[name].bundle.js', chunkFilename: '[id].chunk.js' }, }

then you can have in your src folder three different html files with the corresponding js files (example for page 1):

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page 1</title> </head> <body> <div id="app"></div> <script src="./vendors.js"></script> <script src="./page1.bundle.js"></script> </body> </html>

JavaScript file:

 import React from 'react' import ReactDom from 'react-dom' import App from './components/App' import ComponentA from './components/ReactComponentA' ReactDom.render(<div> <App title='page1' /> <ReactComponentA/> </div>, document.getElementById('app'))

Various React components can be loaded for each individual page.

+50
Jan 25 '17 at 16:53 on
source share

Edit: 01/11/2015

I am building an application from scratch and learning when I go, but I think you are looking for a React-Router . React-Router maps your components to specific URLs. For example:

 render(( <Router> <Route path="/" component={App}> <Route path="api/animals" component={Animals}> <Route path="birds" component={Birds}/> <Route path="cats" component={Cats}/> </Route> </Route> <Route path="api/search:term" component={AnimalSearchBox}> </Router> ), document.body)

In the case of a search, the term "term" is available as a property in AnimalSearchBox:

 componentDidMount() { // from the path `/api/search/:term` const term = this.props.params.term }

Give it a try. This textbook is the one that put me first in terms of my understanding of this and other related topics.

The original answer follows:

I found my way here, looking for the same answer. See if this one will inspire you. If your application is similar to mine, it will have areas that change very little and vary only in the main body. You can create a widget whose responsibility is to render another widget based on the state of the application. Using the flow architecture, you can submit a navigation action that changes the state your body widget will be, effectively updating the body of only the page.

What I'm trying to do now.

+33
Oct 26 '15 at 0:47
source share

Do you use CMS? They tend to like to change URLs that may disrupt your application.

Another way is to use React Habitat .

With it, you can register components and automatically gain access to dom.

Example

Register component (s):

 container.register('AnimalBox', AnimalBox); container.register('AnimalSearchBox', AnimalSearchBox);

They are then available in your home as follows:

 <div data-component="AnimalBox"></div> <div data-component="AnimalSearchBox"></div>

The above will be automatically replaced by your reactive components.

Then you can automatically transfer properties (or details) to your components:

 <div data-component="AnimalBox" data-prop-size="small"></div>

This will open size as a support for your component. There are additional parameters for passing other types, such as json, array, ints, float, etc.

+11
Jun 11 '16 at 2:58
source share


More articles:


All Articles