# 建立React環境、JSX筆記
###### tags: `React`
!(https://i.imgur.com/YUHUr3q.jpg)

## :pushpin:建立React環境
### Step.1 載入React資源, Babel
[Both React and ReactDOM are available over a CDN.](https://reactjs.org/docs/cdn-links.html#gatsby-focus-wrapper)
React本身的函式庫 & ReactDOM

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

[Quickly Try JSX](https://reactjs.org/docs/add-react-to-a-website.html#quickly-try-jsx)

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel"></script>

### Step.2 檢查資源是否正確載入

console.log(React, ReactDOM)

### Step.3 加入root元素
React元素會加載到root中

<div id="root"></div>

### Step.4 建立React元件
須注意React元件都需要首字大寫

function App(){
  return <h1> Hello World! </h1>
}

### Step.5 渲染元件到根元件上
* 選取根元件
* 使用ReactDOM的方法建立
* 最後用render渲染出來

const el = document.getElementById('root');
const root = ReactDOM.createRoot(el)

root.render(<App/>)

## :pushpin:JSX
由於React使用的是JSX語法因此需學習JSX規則

### 1. 定義首字大寫
只有Components的首字須大寫，若元件中包含的function則可使用小寫開頭

function Counter(){
  return <h1> Hello World! </h1>
}

### 2. 只傳遞一個參數
多個元素外層需要使用標籤包覆
須加上`<></>`或`<React.Fragment></React.Fragment>`

function App(){
  return (<>
  <h1> 標題1 </h1>
  <h2> 標題2 </h2>  
  </>)
}

### 3. 正確結尾
結尾須加上`/` 如：`img`、`input`、`option`...

 <input className="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search..."/>

<option value="Seattle"/>

### 4. 屬性轉換
屬性名稱規則改用駝峰法(用大寫區隔)、屬性的值變成字串

<label htmlFor="exampleDataList" className="form-label">Datalist example</label>
<input type="text" defaultValue="123" />

### 5. 利用「{}」加入JS 表示式

//{}中傳入物件
<a href={data.link} target='_blank' className='btn btn-primary'>

function App() {
    return <div>
      {/*大括弧中一定要表達式才能運行*/}
      { 1 },
      {0||1},
      {data.name? data.name:"狗勾"}
      {/*if (data.name) { }*/}
      {(function(){return 2*2})()}
    </div>
}

### 6. style變成物件，須使用{}
將style傳入{}代表內容為JS語法

// 將styleArgument 賦予style值
const styleArgument = { fontSize: '100px', color: 'red' };

// 將值代入HTML style中
ReactDOM.render(
    <h1 style = { styleArgument } > Hello, world! </h1>,
    document.getElementById('root')
);

直接寫在HTML中外層 =={}代表傳入為JS語法，{}內層表示style物件==

<div className='card' style={{width: "18rem"}}>

### 7. 函式綁定
1. 直接帶入函式名稱

const btnFn=(e)=>{console.log(e.target.value)};
<button value={true}  onClick={ btnFn }>是</button>

2. 箭頭函式寫在HTML中

<button value={true}  onClick={ btnFn() => console.log(e.target.value}>是</button>

### 8. return 建議加入括號
在JavaScript中，每一行代碼換行，都會默認在結尾加上`;`這就是而養成自己在代碼後面加上分號的習慣，較不容易造成誤解而出現bug。return使用()也是為了告訴程式整個區塊需要return 不造成bug

render(){
    return (
        <div>
            <h1>舉個例子<h1>
        </div>  
    )
}