React component not showing up

Question

I am working on incorporating a react front end with my flask website and am having trouble getting the react component to show up. I am able to use webpack to build and load in my modules without issue, but perhaps don't fully understand how to get the react side running.

Here is the html that holds the div (note, I use flask to simply extend my layout html):

{% extends 'layout.html' %}
{% block content %}

<body id = "aboutPage" data-spy="scroll" data-target = ".navbar" data-offset="60">
  <div id = "date-root"> </div>

</body>
{% endblock content %}

The layout html:

<!DOCTYPE html>
<html style="padding:0px;" >
<head >
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
    <meta name="robots" content="noindex,follow" />
    <!-- React required tags, change to production later -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Lodash for webpack -->
    <script src="https://unpkg.com/lodash@4.16.6"></script>

    <!-- Bootstrap CSS and JQuery -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-2.2.4.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
    {% if title %}
        <title>{{ title }}</title>
    {% else %}
        <title>Sneak Em</title>
    {% endif %}
</head>
<body background = "{{ url_for('static', filename = 'shoes-dark-green.jpg') }}">
    <header class="site-header">
      <nav class="navbar navbar-expand-md navbar-dark bg-steel navbar-fixed-top" style="background-color: #000000; border-radius:0; margin-bottom:0; border:0; position:fixed; top: 0; width: 100%; z-index:999;">
        <div class="container">
          <a class="navbar-brand mr-4" href="{{ url_for('shop') }}">Sneak Em</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarToggle">
            <div class="navbar-nav mr-auto">
              <a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
              <a class="nav-item nav-link" href="{{ url_for('calendar') }}">Schedule</a>
            </div>
            <!-- Navbar Right Side -->
            <div class="navbar-nav right" style = "text-align: center;">
              {% if not current_user.is_authenticated %}
                <a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>
                <a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a>
              {% else %}
                <a class="nav-item nav-link" href="{{ url_for('profile') }}">
                {% if current_user.first_name is not none %}
                  {{current_user.first_name}}
                {% else %}
                  Profile
                {% endif %}
                </a>
                <a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a>
              {% endif %}
            </div>
          </div>
        </div>
      </nav>
    </header>
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <main role="main" class="container" style = "width: 100%; height:auto; z-index:-999; margin-top:0px;">
      <div class="row" style = "width: 100%;">
        <div class="col-md-8" style = "width: 100%; flex: none; max-width: none;">
              {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                  {{ message }}
                </div>
              {% endfor %}
        </div>
      </div>
    </main>
    {% endif %}
    {% endwith %}
    {% block content %}{% endblock %}
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Here is my entry point js file, index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import MyDayPicker from './daypicker';

ReactDOM.render(
  <MyDayPicker />,
  document.getElementById("date-root")
);

const element = <h1>Schedule</h1>;
console.log(element);

Lastly, here is the daypicker.js file which holds the react component and its code:

import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';

export default class MyDayPicker extends React.Component {
  constructor(props) {
    super(props);
    this.handleDayClick = this.handleDayClick.bind(this);
    this.state = {
      selectedDay: null,
    };
  }
  handleDayClick(day, { selected }) {
    this.setState({
      selectedDay: selected ? undefined : day,
    });
  }
  render() {
    return (
      <div>
        <DayPicker
          selectedDays={this.state.selectedDay}
          onDayClick={this.handleDayClick}
        />
        <p>
          {this.state.selectedDay
            ? this.state.selectedDay.toLocaleDateString()
            : 'Please select a day'}
        </p>
      </div>
    );
  }
}

Please help me figure out what I am missing! Thanks guys.

Answer 1

I'm not using flask so maybe I'm wrong... but it seems to me that you missed react script in *.html file. Please add:

<script src="<path to your react script - index.js" ></script>

Answer 2

您可以通过开始查看是否已加载本机反应组件（例如路由器）来诊断问题，如果问题没有消失，如果没有消失，请检查检查控制台以查看错误。

React component not showing up

Question

2 answers

solution1
0 2018-12-31 12:48:00

solution2
0 2018-12-31 14:21:19

React component not showing up

Question

2 answers

solution1 0 2018-12-31 12:48:00

solution2 0 2018-12-31 14:21:19

solution1
0 2018-12-31 12:48:00

solution2
0 2018-12-31 14:21:19