Reactで始める

私はReactを勉強しようとしています。私はReactのドキュメント自体を使って学んでいます。だから私は画面上のコメントと呼ばれるコンポーネントをレンダリングしようとしていた。しかし、何もレンダリングされていません。私はいずれかのエラーを取得していません。Reactで始める

create-react-appというドキュメント自体が提供するテンプレートを使用してデフォルトの反応アプリを取得してから、デフォルトのAppコンポーネントをReactDom.render()のコメントコンポーネントに置き換えました。私がやっていることが他に何かありますか？

私はここで間違っていますか？

これらは私のコードです：

のindex.html：

<!doctype html> 

<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
    <title>React App</title> 
    </head> 
    <body> 
    <div id="root"></div> 

    </body> 
</html>

私のjsファイル

import React from 'react'; 
import ReactDOM from 'react-dom'; 

function Comment(props) { 
    return (
     <div className="Comment"> 
      <div className="UserInfo"> 
       <img 
        src={props.author.imgUrl} 
        alt={props.author.name} 
       /> 
       <div className="UserInfo-name"> 
        {props.author.name} 
       </div> 
      </div> 
      <div className="Comment-text"> 
       {props.text} 
      </div> 
      <div className="Comment-date"> 
       {props.date} 
      </div> 
     </div> 
    ); 
} 

const comment = { 
    date: new Date(), 
    text: 'I hope you enjoy learning React!', 
    author: { 
     name: 'Hello Kitty', 
     imgUrl: 'http://placekitten.com/g/64/64' 
    } 
}; 

ReactDOM.render(
    <Comment 
     author={comment.author} 
     text={comment.text} 
     date={comment.date} 
    />, 
    document.getElementById('root') 
);

出典

2017-01-14 leoOrion

HTMLの外観はどうですか？あなたのHTMLに 'root'というIDの要素がありますか？ – thedayturns

質問に追加しました – leoOrion

あなたのHTMLファイルにあなたのJSファイルを含めません;-) – thedayturns

これはあなたの問題を解決するために表示されます。

function Comment(props) { 
    return (
     <div className="Comment"> 
      <div className="UserInfo"> 
       <img 
        src={props.author.imgUrl} 
        alt={props.author.name} 
       /> 
       <div className="UserInfo-name"> 
        {props.author.name} 
       </div> 
      </div> 
      <div className="Comment-text"> 
       {props.text} 
      </div> 
      <div className="Comment-date"> 
       {props.date.toString()} 
      </div> 
     </div> 
    ); 
} 

const comment = { 
    date: new Date(), 
    text: 'I hope you enjoy learning React!', 
    author: { 
     name: 'Hello Kitty', 
     imgUrl: 'http://placekitten.com/g/64/64' 
    } 
}; 

ReactDOM.render(
    <Comment 
     author={comment.author} 
     text={comment.text} 
     date={comment.date} 
    />, 
    document.getElementById('root') 
);

すべて私が日付をobjeに変えたのですか？ ctをComment関数内の文字列に変換します。

出典

2017-01-14 07:28:49 thedayturns

ありがとう..それは働いた。しかし、なぜ残りの情報は表示されませんでしたか？またはエラー？ – leoOrion

P.S. JSXのどの部分が問題を引き起こしているかを知るまで、私は何かがうまくいくまでJSXのセクションをコメントアウトしてから、1を1ずつ戻したということでした。通常、アプリをデバッグするのは良い戦略です。 :) – thedayturns

先端のおかげです。 – leoOrion

答えて

関連する問題