Почему мой браузер показывает пустую страницу, когда я запускаю реакцию?

У меня есть куча html-кода, и я нарушаю их, чтобы реагировать на компонент. Я новичок в react.js. Я сделал несколько изменений в разделе нижнего колонтитула, но когда я запускаю localhost в браузере, он ничего не отображает. Может кто-то помочь мне с этим?Почему мой браузер показывает пустую страницу, когда я запускаю реакцию?

Заранее спасибо.

class Footer extends Component { 

    render() { 
    return (
     <div> 
     <div className="footer"> 
     <div className="container"> 
      <div className="col-md-5 f-first-part"> 
      <div className="row"> 
       <div className="col-sm-5 f-add-part"> 

       <div className="contact-info"> 
           <p className="address">123</p> 
           <p className="email"><a href=""></a></p> 
           <p className="tele"><a href=""> 03580368</a></p> 
       </div> 

        <div className="large-3 large-offset-2 columns"> 
        <ul className="menu vertical"> 
         <li><a href="#">One</a></li> 
         <li><a href="#">Two</a></li> 
         <li><a href="#">Three</a></li> 
         <li><a href="#">Four</a></li> 
        </ul> 
        </div> 

        <div className="large-3 columns"> 
        <ul className="menu vertical"> 
         <li><a href="#">One</a></li> 
         <li><a href="#">Two</a></li> 
         <li><a href="#">Three</a></li> 
         <li><a href="#">Four</a></li> 
        </ul> 
        </div> 

       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
    ) 
    } 

export default Footer;

источник

2016-11-23 mukhilsaravanan

, что делает ваша установка выглядит? вы можете показать какой-нибудь код, пожалуйста? –

Я добавил (а) мой нижний колонтитул – mukhilsaravanan

Компонент не показывается, пока вы его не обработали Добавили ли вы ReactDOM.render (

Из того, что я прочитал из вашего вопроса, это ваш код

Footer.js

import Footer from '/your-path-to-/footer.js' 
import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 

class Footer extends Component { 
render() { 
    return (
    <div> 
    <div className="footer"> 
    <div className="container"> 
     <div className="col-md-5 f-first-part"> 
     <div className="row"> 
      <div className="col-sm-5 f-add-part"> 

      <div className="contact-info"> 
          <p className="address">123</p> 
          <p className="email"><a href=""></a></p> 
          <p className="tele"><a href=""> 03580368</a></p> 
      </div> 

       <div className="large-3 large-offset-2 columns"> 
       <ul className="menu vertical"> 
        <li><a href="#">One</a></li> 
        <li><a href="#">Two</a></li> 
        <li><a href="#">Three</a></li> 
        <li><a href="#">Four</a></li> 
       </ul> 
       </div> 

       <div className="large-3 columns"> 
       <ul className="menu vertical"> 
        <li><a href="#">One</a></li> 
        <li><a href="#">Two</a></li> 
        <li><a href="#">Three</a></li> 
        <li><a href="#">Four</a></li> 
       </ul> 
       </div> 

      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    ) 
    } 
} 
ReactDOM.render(<Footer/>, document.getElementById('main'));

Вы должны определить контейнер для компонента чтобы сделать это, в этом случае я создал файл index.html с элементом div, id которого является основным,

ваш index.html

<div id="main"></div>

это загрузит компонент там, я не знаю, если это то, что вам нужно, вы должны будете предоставить более подробную информацию.

Также проверьте консоль, отображается важная информация, там

С уважением

источник

2016-11-23 20:59:46

Почему мой браузер показывает пустую страницу, когда я запускаю реакцию?

ответ

Смежные вопросы