React Jsのヘルプが必要

-2

私はReact Jsを初めて利用しています。私のコードは動作していません。下記をご覧ください：React Jsのヘルプが必要

これは私のスクリプトファイルMain.jsxです。このファイルはreactでコンパイルされ、出力は 'dist'フォルダのmain.jsファイルに置かれます。

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ファイルを実行すると出力が空白の画面です。「myComponentという」の内容がブラウザに表示されていない

：クロムのdevのツールインスペクタウインドウの下のスクリーンショットを参照してください。私は同じコードで多くのチュートリアルを見てきましたが、それは動作していません...理由を知らない。

可能であれば、最新リリースのサンプルコードやチュートリアルも提供してください。事前

で更新

おかげで、私が含まれていることに注意してくださいインポート中に、私は自由に変数名として「リアクト」または「反応」を使用できるようになり、私のHTMLファイル内のライブラリ参照が私のスクリプトで反応リアクトファイル。ここでは、 "React"（資本R）を変数名とすることは必須ではありません。

最終更新

だから（ダミアン・ルルーによって答えとして）ソリューションは、インクルードが大文字で始まるコンポーネント変数名を反応させることです。 'var myComponent'は 'var MyComponent'または 'var Mycomponent'でなければなりません。

出典

2016-11-03 Shivam

Aクラスは、常に大文字で始める必要があります反応：user-defined-components-must-be-capitalized

出典

2016-11-03 12:30:08

のように見える必要があります。私は 'var myComponent'を' var MyComponent'に変更しました。それは今働いている。 – Shivam

だけでなく、あなたのコンポーネントは大文字で始める必要がありますリアクトを読ん

var MyComponent = react.createClass({

、これを参照してください。

React - Adding component after AJAX to view

また、インポートする必要がありますように反応する

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

内部でJSXがReact.createElement()に転送されているため、UpperCase Lettersは反応が定義されていないと言います。

あなたのコードは、このページの男....おかげで天才です

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を使用してコードをバンドルすることをお勧めします。 LeanCodeAcademyのyoutube reactチュートリアルに従ってください –

はい@ Shubham Khatri、私はwebpackのようなものを使用しますが、私が反応を開始しているので、私は手動でこのすべてのlib-loadingとすべてのものを調べたいと思います。 – 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のヘルプが必要

答えて

関連する問題