How to add HTML page to React application

Question

I created simple application using latest version of React.js. My App.js file looks like:

import React, { Component } from 'react';
import './App.css';
import "../node_modules/bootswatch/superhero/bootstrap.css";
import { Navbar, NavItem, Nav, Grid, Row, Col } from "react-bootstrap";
import HTMLDocument from '../node_modules/react-html-document';
import ReactDOMServer from '../node_modules/react-dom/server';

const PLACES = [
    { name: "Almaty", zip:"94303" },
    { name: "Karaganda", zip:"77777" },
    { name: "Astana", zip:"76423" },
    { name: "Oskemen", zip:"63452" }
];


class App extends Component {
    constructor() {
    super();
    this.state = {
        activePlace: 0,
    };
}
  render() {
      const activePlace = this.state.activePlace;
    return (
        <div>
            <Navbar>
                <Navbar.Header>
                    <Navbar.Brand>
                Android Application Development
                    </Navbar.Brand>
                </Navbar.Header>
            </Navbar>
        <Grid>
            <Row>
                <Col md={4} sm={4}>
                    <h3>Select a city</h3>
                    <Nav
                        bsStyle="pills"
                        stacked
                        activeKey={activePlace}
                        onSelect={index => {
                            this.setState({ activePlace: index });
        }}
    >
        {PLACES.map((place, index) => (
            <NavItem key={index} eventKey={index}>{place.name}</NavItem>
         ))}
         </Nav>
    </Col>
    <Col md={8} sm={8}>
        <WeatherDisplay key={activePlace} zip={PLACES[activePlace].zip} />
    </Col>
</Row>
</Grid>
</div>
    );
  }
}


class WeatherDisplay extends Component {
    constructor() {
        super();
        this.state = {
            weatherData: null
        };
    }
    componentDidMount() {
        const zip = this.props.zip;
        const URL = "http://api.openweathermap.org/data/2.5/weather?q=" +
              zip + "&appid=b1b35bba8b434a28a0be2a3e1071ae5b&units=imperial";
        fetch(URL).then(res => res.json()).then(json => {
            this.setState({ weatherData: json});
        });
    }
    render() {
        const weatherData = this.state.weatherData;
        if (!weatherData) return <div>Loading</div>;
        const weather = weatherData.weather[0];
        const iconUrl = "http://openweathermap.org/img/w/" + weather.icon + ".png";
return ( 
  <div>
    <h1>
      {weather.main} in {weatherData.name}
      <img src={iconUrl} alt={weatherData.description} />
    </h1>
    <p>Current: {weatherData.main.temp}°</p>
    <p>High: {weatherData.main.temp_max}°</p>
    <p>Low: {weatherData.main.temp_min}°</p>
    <p>Wind Speed: {weatherData.wind.speed} mi/hr</p>
  </div>
);
    }
}

export default App;

Everything is good! But now i found a really awesome Main Page (HTML + CSS ONLY). And i want to add Main Page firstly (Main Page contains Main Menu) and then if I click on any button i can go to my App.js file. How can i perform that action?

Sorry i'm just new in JavaScript and React.js

Answer 1

Make main page the first thing your user sees. Then make a new page with a div on it, and apply your react app to that div. All you need to do is make a new page with react rendered on it.

Make a new HTML page. When your users go to your site, render that new HTML page first... just like how you're rendering the react page now. Then make a new page and move the div your react is rendering to now to that new page.

Then add an anchor tag on the first page that points to the second page and routes the user there.