0

I'm studying Reactjs. In my website project I have two .js files with codes of react elements and I need to integrate the element from one .js file into the index.html page and the element from the second .js file - into the second .html page. But both elements can display only on the index.html page. I run the project on localhost via command "npm start" using file package.json and node_modules I uploaded. How to display my react element from the second file on the second page of my site?

file "index.html"

<h1>My react element №1</h1>
<div id="app1">
</div>
 .........
<script crossorigin 
src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react- 
dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel- 
standalone/6.25.0/babel.min.js"></script>

<script type="text/babel" src="element1.js">   
</script>

file "element1.js"

class Element1 extends React.Component {
   /* code  */  
}
ReactDOM.render(
<Element1/>,        
    document.getElementById("app1")
);

file "page2.html"

<h1>My react element №2</h1>
<div id="app2">
</div>
 .........
<script crossorigin 
src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react- 
dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel- 
standalone/6.25.0/babel.min.js"></script>

<script type="text/babel" src="element2.js">   
</script>

file "element2.js"

class Element2 extends React.Component {
   /* code  */  
}
ReactDOM.render(
<Element2/>,        
    document.getElementById("app2")
);

file "package.json"

{
"name": "reactapp",
"version": "1.0.0",
"scripts": {
    "start": "lite-server"
 },
"devDependencies": {
    "lite-server": "^2.2.2"
 },
"dependencies": {
    "create-react-app": "^3.1.1"
 }
}
Irina
  • 41
  • 5
  • 2
    Can you explain what you are trying to achieve? You would not need to create two different React DOMs, as you can achieve the same in one. – Garry Sep 03 '19 at 18:54
  • I have two different .js files with different apps in react I want to place one app on index.html page of my study site and the second app to integrate into the second page of my site. So two my apps must be on different pages of the site. But when I run site my app on index page displays, and my second app doesn't display on the second page. – Irina Sep 03 '19 at 19:06
  • Please check https://itnext.io/building-multi-page-application-with-react-f5a338489694 and https://stackoverflow.com/questions/41956465/how-to-create-multiple-page-app-using-react. If you need more information about react-router. Here is the documentation with an example https://reacttraining.com/react-router/web/example/basic. Let me know if you have any confusion. Thanks – Garry Sep 03 '19 at 19:09
  • I can display both apps only on my index.html, but no one on others pages. why? – Irina Sep 03 '19 at 19:10
  • Because you do not have routes, so for example if we have website with home and settings button if we click on home button it follows different route and same with settings button. If you do not want to use routes, you may want to configure webpack like https://github.com/przemek-nowicki/multi-page-app-with-react – Garry Sep 03 '19 at 19:25
  • ok, tomorrow I'll try to understand how to use routes and I will let you know the result. Thanks. – Irina Sep 03 '19 at 20:11
  • Sure, no problem. – Garry Sep 03 '19 at 20:19
  • I couldn't use Router, bse my apps must be placed to different .html pages, and all the examples I found use only index.html page. I tryed but failed. – Irina Sep 05 '19 at 18:42
  • I will try to write an example and share it with you if it helps – Garry Sep 05 '19 at 19:40
  • Ok, write an example, pls, may be it will help – Irina Sep 06 '19 at 11:03
  • It turned out I don't need to use Router, but another app (non react) on my second page doesn't let to pisplay react element. When I removed this element then the react element could display. So maybe there is a problem with css bse only one of my two elements can be placed on my second page. – Irina Sep 07 '19 at 17:20
  • Could be that do you want to push your code to github so I can take a look or in code sandbox. I will edit there so it will be easy for you. – Garry Sep 08 '19 at 23:35
  • Thanks but let it be one object on one page. I don't like to send all my folders and files to github. – Irina Sep 10 '19 at 14:25

0 Answers0