React JSX簡單案例演示

由于 JSX 就是 JavaScript，一些識別符號像 class 和 for 不建議作為 XML 屬性名，
作為替代，React DOM 使用 className 和 htmlFor 來做對應的屬性，

要將 React 元素渲染到根 DOM 節點中，我們通過把它們都傳遞給 ReactDOM.render() 的方法來將其渲染到頁面上
如果需要嵌套多個 HTML 標簽，需要使用一個 div 元素包裹它
元素可以添加自定義屬性，需要使用 data- 前綴

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


  ReactDOM.render(
    <div>
      <h1>cyy</h1>
      <p data-level="很菜">learn react</p>
    </div>,
    document.getElementById('example')
  );


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

可以在 JSX 中使用 JavaScript 運算式
運算式寫在花括號 {} 中

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


  ReactDOM.render(
    <div>
      <p>{1+1}</p>
    </div>,
    document.getElementById('example')
  );


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

在 JSX 中不能使用 if else 陳述句，但可以使用 conditional (三元運算) 運算式來替代，

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

  const i=1;
  ReactDOM.render(
    <div>
      <p>{i===1?'true':'false'}</p>
    </div>,
    document.getElementById('example')
  );


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

React 推薦使用行內樣式
可以使用 camelCase 語法來設定行內樣式
React 會在指定元素數字后自動添加 px

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

  var style={
    color:'#fff',
    backgroundColor:"lightblue",
    fontSize:14
  };

  ReactDOM.render(
    <div>
      <p style={style}>this is a test</p>
    </div>,
    document.getElementById('example')
  );


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

通過 style 添加行內樣式的時候，容易犯的錯誤

這樣直接寫在里面，注意是有兩個花括號

注釋需要寫在花括號中，話說回來添加注釋我一般都使用快捷鍵ctrl+問號

貌似一般正經的編輯器都是支持的

哈哈

JSX 允許在模板中插入陣列，陣列會自動展開所有成員

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

  var arr=[
    <h1>this is h1</h1>,
    <p>this is p</p>
  ];

  ReactDOM.render(
    <div>
      {arr}
    </div>,
    document.getElementById('example')
  );

serviceWorker.unregister();

標籤：JavaScript

上一篇：做一個單純的react-image顯示組件

下一篇：如何在檔案中添加腳本和參考js