Reactで簡単なHTMLを表示してみよう

HTMLを表示してみよう

ReactDOMに渡すタグは、一つしか渡せません。そのため、<div>タグでくくった上でタグを渡すようにしましょう。

src/app.jsです

let template = ( 
 <div>
   <h1>h1 tag</h1>
   <p>p tag</p>                                                                                                                                                          
   <ul>
     <li>Item 1</li>
     <li>Item 2</li>
   </ul>
 </div>
 ); 

次は別のタグを渡してみます。src/app.jsです

let template = (
 <div>
   <h1>name: Joji</h1>
   <p>Age: 30</p>
   <p>country: Japan</p>
 </div>
 );
let appRoot = document.getElementById('app');
ReactDOM.render(template, appRoot);

変数を使ってみます

次に変数を使ってみます。{}の中身はJavaScriptが実行されます。

const name='joji_2';
const age=31;
const country='Taiwan';
let template = (
 <div>
   <h1>name: {name}</h1>
   <p>Age: {age}</p>
   <p>country: {country}</p>
 </div>
 );
let appRoot = document.getElementById('app');
ReactDOM.render(template, appRoot);