import React from 'react'
  
  
  
  
import ReactDom from 'react-dom'
  
  
  
  

  
  
  
  
// 看上去是 HTML，但是實際是JSX 
  
  
  
  
const title = 
Hello React
  
  
  
  
// 調(diào)用 ReactDom.render方法，傳入 jsx和節(jié)點對象
  
  
  
  
ReactDom.render(title,document.getElementById('root'))
 
 
 
 

 
 
 
 

  
  
  
  
import React from 'react'
  
  
  
  
import ReactDom from 'react-dom'
  
  
  
  

  
  
  
  
// 使用括號包裹jsx ，可以換行，代碼更加整潔
  
  
  
  
const title = (
  
  
  
  
  

  
  
  
  
   
Hello React
  
  
  
  
    嘿嘿嘿
  
  
  
  
  

設(shè)置 VS Code 編輯器，讓 JSX 代碼補全：

 
 
 
 

  
  
  
  
文件--選擇項--設(shè)置--用戶設(shè)置
  
  
  
  

  
  
  
  
在用戶設(shè)置添加
  
  
  
  
"emmet.includeLanguages": {
  
  
  
  
         "javascript":"javascriptreact"
  
  
  
  
}
 
 
 
 

如下圖所示：

JSX 表達(dá)式

前面說到 JSX 具有 JavaScript 的全部功能，而在具體使用時可以直接套用 HTML 的規(guī)則。換句話說，在 HTML 規(guī)則里，如何展現(xiàn) JS 的能力呢?

先來一點簡單的常常甜頭，JSX 中的能夠進(jìn)行：

• 動態(tài)顯示數(shù)據(jù) {}
• 調(diào)用方法: 自定義 + 內(nèi)置
• 支持表達(dá)式, 支持三元表達(dá)式
• 模板字符串

接下來，我們開始搞它：

 
 
 
 

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

  
  
  
  
const name= '西嶺老濕'
  
  
  
  

  
  
  
  
function sayHello () {
  
  
  
  
  return '大家好'
  
  
  
  
}
  
  
  
  

  
  
  
  
const obj = {
  
  
  
  
  name: '劉備',
  
  
  
  
  age: 100
  
  
  
  
}
  
  
  
  

  
  
  
  
const flag = true
  
  
  
  

  
  
  
  
// 請開始你的表演====
  
  
  
  
const title = (
嘿嘿
) // JSX 本身也是可直接食用的值喲
  
  
  
  

  
  
  
  
const App = (
  
  
  
  
    

  
  
  
  
      {/* 注釋在 jsx 中是這么個熊樣子*/}
  
  
  
  

  
  
  
  
     
name
 {/* 這就鴛鴦(原樣)展示了*/}
  
  
  
  

  
  
  
  
     
{name}
 {/* 動態(tài)獲取變量數(shù)據(jù) */}
  
  
  
  

  
  
  
  
     
{sayHello()}
 {/* 調(diào)用個函數(shù)違法嗎? 不 */}
  
  
  
  

  
  
  
  
      {/* 執(zhí)行原生 JS 不合理嗎? 合理 */}
  
  
  
  
     
{console.log('1111')}
  
  
  
  
     
{Math.random()}
  
  
  
  
     
{JSON.stringify(obj)}
  
  
  
  

  
  
  
  
      {/* 三元運算讓你吃醋了? 沒有 */}
  
  
  
  
     
{flag ? '登錄的狀態(tài)' :'執(zhí)行登錄'}
  
  
  
  

  
  
  
  
      {/* 模板字符下,字符串和變量結(jié)婚,可以嗎? 可以 */}
  
  
  
  
     
{`hello, ${name}`}
  
  
  
  

  
  
  
  
      {/* JSX 也是可直接食用的值喲 */}
  
  
  
  
     
{title}