I am a newbie in reactjs I deployed a landing page (found on github) which is working fine and I customized the page a bit result here > https://photographe-paris.virtueltime.com/

then I wanted to add another block at the end of the page here is the code I did (jsx) https://photographe-paris.virtueltime.com/jsx.html (that I want to add at the end of the page in reactjs)

I tried adding the code of the second page to the first page but it is not working

the code of the second page is here enter code herehttps://codepen.io/Gerald-Mardirossian/pen/XWePKrBenter code here in JS is the content from https://photographe-paris.virtueltime.com/jsx.js

any idea why ?

thank you for your help

CodePudding user response：

You can import the second page inside the first page and render it in the first-page return method. For example, This is my first-page Firstpage.jsx

import './App.css';
import React from 'react';
import Secondpage from './Secondpage';
class Firstpage extends React.Component {
  constructor (props) {
  super(props);
    this.state = {    
    }   
   
  }


render() {
  return (
    <div className="App">
      <div>Hiii, This is my first page</div>
      <Secondpage></Secondpage>
    </div>
  );
  }
}
export default Firstpage;

And below is my second-page component, which I imported into my first page. Secondpage.jsx

import React from 'react';
class Secondpage extends React.Component {
  constructor (props) {
  super(props);
    this.state = {
    }   
  }


render() {
  return (
    <div >
    This is my second page
    </div>
  );
  }
}
export default Secondpage;

CodePudding user response：

JSX is nothing but JavaScript extended, which means using HTML in JavaScript files. Component functions are JSX in nature because they return HTML elements in their return function, a regular reactJS file would be something that doesn't return HTML elements, but make use of react-specific function like hooks. So, to make things clear, if a reactJS file returns HTML, it is JSX in nature. Coming to adding the content to the main page, you could make use of something called portals. You can use portals to inject content adjacent to root elements (div with id content,content2 etc.) in your case.

So, in your jsx.js, remove React.render and change var to const (not mandatory) and export the components: jsx.js after changes:

export const MyComponent3 = React.createClass({
  render: function () {
    const name = (
      <div className="greeting3">
        <center>
          <h2>Découvrez notre portfolio (en cours de construction)</h2>
        </center>

        <div className="containphotos">
          <a
            href="https://photographe-paris.virtueltime.com/portfolio/"
            title="portfolio"
          >
            <div id="firstimage"></div>
          </a>
          <a
            href="https://photographe-paris.virtueltime.com/portfolio/"
            title="portfolio"
          >
            <div id="secondimage"></div>
          </a>
          <a
            href="https://photographe-paris.virtueltime.com/portfolio/"
            title="portfolio"
          >
            <div id="thirdimage"></div>
          </a>
          <a
            href="https://photographe-paris.virtueltime.com/portfolio/"
            title="portfolio"
          >
            <div id="fourthimage"></div>
          </a>
        </div>
      </div>
    );

    return <div> {name}</div>;
  },
});

export const MyComponent = React.createClass({
  render: function () {
    const name = (
      <div className="greeting">
        <div id="ff-compose"></div>
      </div>
    );

    return <div> {name}</div>;
  },
});

export const MyComponent2 = React.createClass({
  render: function () {
    const name2 = (
      <div className="greeting2">
        <a
          href="https://www.virtueltime.com/visite-virtuelle/mentions-legales/"
          title="Mentions légales"
          target="_blank"
        >
          Mentions légales
        </a>{" "}
        -{" "}
        <a
          href="https://www.virtueltime.com/plan-site-agence-digitale-paris/"
          title="Plan du site web"
          target="_blank"
        >
          Plan du site web
        </a>{" "}
        -{" "}
        <a
          href="https://www.virtueltime.com/visite-virtuelle/blog-news/"
          target="_blank"
          title="Blog Digital"
        >
          Blog
        </a>{" "}
        -{" "}
        <a
          href="https://recrutement.virtueltime.com/#home"
          target="_blank"
          title="Recrutement"
        >
          Recrutement
        </a>{" "}
        -{" "}
        <a
          href="https://intranet.virtueltime.com/"
          title="Solution Intranet"
          target="_blank"
        >
          Solution Intranet
        </a>{" "}
        -{" "}
        <a
          href="https://www.virtueltime.com/nos-partenaires/"
          title="Partenaires"
          target="_blank"
        >
          Partenaires
        </a>{" "}
        -{" "}
        <a
          href="https://www.virtueltime.com/visite-virtuelle/nos-references/"
          title="Nos références"
        >
          Nos références
        </a>{" "}
        -{" "}
        <a
          href="https://www.virtueltime.com/visite-virtuelle/services-digitaux/"
          target="_blank"
          title="Nos services digitaux"
        >
          Nos services digitaux
        </a>{" "}
        -{" "}
        <a
          href="https://www.virtueltime.com/visite-virtuelle/exemples-visites-virtuelles/"
          title="Visites virtuelles et google street views"
          target="_blank"
        >
          {" "}
          Visites virtuelles & street views
        </a>{" "}
        -{" "}
        <a
          href="https://www.virtueltime.com/visite-virtuelle/devis-visite-virtuelle-photo/"
          title="Contact Demande Devis photo Digital"
          target="_blank"
        >
          Contact
        </a>{" "}
        -{" "}
        <a
          href="mailto:[email protected]?subject=Devis photo"
          title="nous contacter par email"
        >
          📧
        </a>{" "}
        -{" "}
        <a href="tel:0781263726" title="Nous appeler">
          ✆
        </a>
      </div>
    );

    return <div> {name2}</div>;
  },
});

Then in your main component file, import these components and render them by creating a portal. In your App.js or App.jsx or main component file:

import ReactDOM from 'react-dom';
import {MyComponent,MyComponent2,MyComponent3} from 'path/to/jsx.js_file'

export default function App(){

return(
.
.
.
{ReactDOM.createPortal(<MyComponent/>,document.getElementById('content')}
{ReactDOM.createPortal(<MyComponent2/>,document.getElementById('content2')}
{ReactDOM.createPortal(<MyComponent3/>,document.getElementById('content3')}
)
}

Make sure that you've added divs with id content, content2 and content3 in your index.html.