Нужна помощь по React Js

-2

Я новичок в React Js, и мой код не работает. Пожалуйста, смотрите ниже:Нужна помощь по React Js

Это мой файл сценария Main.jsx. Этот файл скомпилирован реакцией, и вывод помещается в файл main.js в папке «dist».

var react = require("react"), 
reactDom = require("react-dom"); 
var myComponent = react.createClass({ 
    render: function() { 
     return <div><h4>I am rendered by react.</h4></div>; 
    } 
}); 

reactDom.render(<myComponent />, document.getElementById("basicDiv"));

Это Index.html

<html>  
<head> 
    <base href="./" /> 
    <title>App title</title>  
    <script src="node_modules/react/dist/react.js"></script> 
    <script src="node_modules/react/dist/react-with-addons.js"></script> 
    <script src="node_modules/react-dom/dist/react-dom.js"></script> 
</head> 

<body> 
    <div id="basicDiv"></div> 

    <!-- React compiled code is in dist folder and is accessible --> 
    <script src="dist/main.js"></script> 
</body> 

</html>

Когда я запускаю файл index.html в браузере Выход пустой экран. Пожалуйста, смотрите скриншот ниже хромовых Dev окна инструментов инспектор:

Содержание моей «MyComponent» не отображается в браузере. Я видел много учебников с одним и тем же кодом, но он не работает ... не знаю почему.

Просьба помочь в этом и, если возможно, предоставить мне несколько примеров кода/учебников для последних выпусков. Заранее спасибо

Update

Пожалуйста, обратите внимание, что я включил Реагировать библиотеку ссылку в моем HTML-файл, который заставляет меня свободно использовать «React» или «реагирует» в качестве имени переменной при импорте Реагировать в моем сценарии файлы. В этом случае принятие «Реагировать» (с капиталом R) в качестве имени переменной необязательно.

Final Update

Таким образом, решение (как ответил Дэмиена Леру), чтобы сделать реакцию компонента переменной-имя, начинающееся с заглавной буквы. «var myComponent» должен быть «var MyComponent» или «var Mycomponent».

источник

2016-11-03 Shivam

РЕАКТ класс должен всегда начинаться с верхней буквой:

var MyComponent = react.createClass({

читать user-defined-components-must-be-capitalized

источник

2016-11-03 12:30:08

Вы гений на этой странице человека .... спасибо. Я изменил 'var myComponent' на' var MyComponent'. Он работает сейчас. – Shivam

Не только ваш React компонент должен начинаться с верхней буквой, см это:

React - Adding component after AJAX to view

, но вы также должны Импорт реагировать как

var React = require("react"), 
ReactDom = require("react-dom");

i.e Письма с верхней границей с внутренней стороны JSX передается в React.createElement(), и в этом случае он скажет, что реакция не определена.

Вы код должен выглядеть

var React = require("react"), 
ReactDom = require("react-dom"); 
var MyComponent = React.createClass({ 
    render: function() { 
     return <div><h4>I am rendered by react.</h4></div>; 
    } 
}); 

ReactDom.render(<MyComponent />, document.getElementById("basicDiv"));

источник

2016-11-03 12:58:13

>> Так как реакция внутренне использует React.createElement(), в этом случае он скажет, что реакция не определена. ..... Чтобы встретить эту ошибку, я включил ссылку React в свой html.Я не получаю эту ошибку с неклассической переменной для импорта. Хотя это не отвечает на проблему, которую я объяснил на скриншоте выше ... – Shivam

Я бы предложил вам использовать Webpack для связывания вашего кода. Следуйте инструкциям по тестированию youtube от LeanCodeAcademy –

yes @Shubham Khatri, я бы использовал что-то вроде webpack, но по мере того, как я начинаю реагировать, я хочу вручную пройти всю эту загрузку lib и все прочее. – Shivam

import React from 'react' 
import './Aboutus.css' 
import Header from '../Home/Header/Header.jsx' 
import Footer from '../Home/Footer/Footer.jsx' 

var stylesheader = { 
    paddingTop: 50, 
    textAlign:'center', 
    color: '#204871' 
}; 

var stylehead = { 
    paddingLeft: 200, 
    paddingRight:200, 
    paddingTop:20, 
    color: '#204871' 
}; 

var styles = { 
    paddingTop: 120, paddingLeft:20, 
    color: '#128bea', 
    fontSize: 26 
}; 

var style1 = { 
    paddingTop:100, 
    color: '#204871' 
}; 

class Aboutus extends React.Component { 

    render() { 

    var title = "we are a team"; 

    var leadership = [ 
    { 
    "name":"abc", 
    "department":"abc", 
    "phone":"abc", 
    "email":"abc" 
    }, 
    { 
    "name":"abc", 
    "department":"abc", 
    "phone":"abc", 
    "email":"abc" 
    } 
    ]; 

    var business = [ 
    { 
    "name":"abc", 
    "department":"abc", 
    "email":"abc" 
    }, 
    { 
     "name":"abc", 
    "department":"abc", 
    "email":"abc" 
    }, 
    ]; 

    var algorithm = [ 
    { 
     "name":"abc", 
    "department":"abc", 
    "email":"abc" 
    }, 
    { 
     "name":"abc", 
    "department":"abc", 
    "email":"abc" 
    }, 
    { 
     "name":"abc", 
    "department":"abc", 
    "email":"abc" 
    }, 
    { 
     "name":"abc", 
    "department":"abc", 
    "email":"abc" 
    } 
    ]; 

    var developer = [ 
    { 
     "name":"abc", 
    "department":"abc", 
    "email":"abc" 
    }, 
    { 
     "name":"abc", 
    "department":"abc", 
    "email":"abc" 
    }, 
    { 
     "name":"abc", 
    "department":"abc", 
    "email":"abc" 
    } 
    ]; 

    var row1=leadership.map(row => { 
           return <div className="column"> 
             <div className="card"> 
              <div className="container"> 
               <h2>{row.name}</h2> 
               <p>{row.department}</p> 
               <p>{row.phone}</p> 
               <p>{row.email}</p> 
              </div> 
             </div> 
             </div> 
           }); 

     var row2=business.map(row => { 
           return <div className="column"> 
             <div className="card"> 
              <div className="container"> 
               <h2>{row.name}</h2> 
               <p>{row.department}</p> 
               <p>{row.email}</p> 
              </div> 
             </div> 
             </div> 
           }); 

     var row3=algorithm.map(row => { 
           return <div className="column"> 
             <div className="card"> 
              <div className="container"> 
               <h2>{row.name}</h2> 
               <p>{row.department}</p> 
               <p>{row.email}</p> 
              </div> 
             </div> 
             </div> 
           }); 

     var row4=developer.map(row => { 
           return <div className="column"> 
             <div className="card"> 
              <div className="container"> 
               <h2>{row.name}</h2> 
               <p>{row.department}</p> 
               <p>{row.email}</p> 
              </div> 
             </div> 
             </div> 
           }); 

     return (

     <div className="home-component"> 

       <div className="home-header"> 
       <Header/> 
       </div> 

       <div className="home-content" > 
          <h1 style={stylesheader}> Meet the team </h1> 
          <h2 style={stylehead}>{title}</h2> 

          <h2 style={styles}> Leadership </h2> 
          <div className="row" style={style1}> 
           {row1} 
          </div> 

          <h2 style={styles}> Business Development </h2> 
          <div className="row" style={style1}>      
          {row2}       
          </div> 

          <h2 style={styles}> Algorithm Development </h2> 
          <div className="row" style={style1} >      
          {row3}       
          </div> 

          <h2 style={styles}>Software Development </h2> 
          <div className="row" style={style1} >      
           {row4} 
          </div> 
       </div> 

       <Footer/> 

     </div> 
    ); 

    } 
} 

export default Aboutus;

источник

2017-07-06 07:35:27 sun2493

Нужна помощь по React Js

ответ

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