ReactJS server rendering method and componentDidMount method

Question

I am new to reagent, so please do not judge strictly. I provide my React application on the server and want to execute the code on the interface side. The application correctly displays styles without warnings or errors, but with an empty state, since I use an API that should be executed on the front side, and now it’s normal.

since I understand that the server displays the component, and since the server visualized and mounted the component on the server, it does not call the componentDidMount() method, which should make my API calls and other employees.

this is my component

 import React from 'react'; import {render} from 'react-dom'; import SpComparison from './spComparison.jsx'; import Comparison from './comparison.jsx'; import AnalystRatings from './analystRatings.jsx'; export default class Insights extends React.Component { constructor(props){ super(props); this.state = { charts: [] } let _this = this; } componentDidMount() { console.log("I want to do log on front end side, but can't") } render () { let charts = this.state.charts.map(function(i){ if (i.type == 'comparison'){ return <Comparison key={ i.id } config={ i.config } /> } else if (i.type == 'sp-comparison'){ return <SpComparison key={ i.id } config={ i.config } /> } if (i.type == 'analyst-ratings'){ return <AnalystRatings key={ i.id } config={ i.config } /> } }); return ( <div id="insights" className="container"> <div className="row"> <div className="col-md-3 hidden-md-down" style={{ marginTop: 10 }}> <ul className='finstead-tabs'> <li className="finstead-tabs-header"> Categories </li> <li> <a href='' className="finstead-active-tab">Performance</a> </li> <li> <a href=''>Financial</a> </li> <li> <a href=''>Valuation</a> </li> <li> <a href=''>Shares</a> </li> <li> <a href=''>Outlook</a> </li> </ul> </div> <div className="col-xs-12 col-md-9"> { charts } </div> </div> </div> ) } } 

I think I'm doing it wrong, so please help me.

Note

In the highest level component that I did not call ReactDOM.render , can this cause this behavior?

tutorial that I used for example

Answer 1

I found a solution after reading the tutorial more thoroughly.

The problem was my carelessness, and everything is described in the textbook above.

basically in the linked file you have to call ReactDOM.render to restart the application, but this will not affect performance, since React uses VirtualDOM and differs from the existing DOM.

therefore without ReactDOM.render js will not execute.

so I created a separate app-script.js file, which is my entry point for the package, and it calls my highest component with ReactDOM.render .