< 关於 React: 开始打地基| JSX >

09-03-2021

前情提要

以往的学习经验来说，在撰写前端时一定会遇到的三大巨人：HTML，掌管网页的结构、CSS，掌管网页的外观样貌、JacaScript，掌管着网页的互动逻辑，但我们都是互相引入使用。

在React的世界中却不是这麽一回事了，所有的事物都会交由==Component== 来做为基础。 我们会将与Component 相关的程序都放在一起管理，而同时也会建议使用JSX来做撰写。使用 React 并不一定要使用 JSX。

小简介：JSX不是全新的语言，而是一种语法糖(Syntatic Sugar)，类似与XML的ECMAScript语法的扩充。是一种JavaScript的语法扩展。

• 语法扩展: 意指JSX并非有效的JavaScript，在Web浏览器中是无法读取到他的。换句话说，若是要正常在浏览器显示就必须要==编译==文件。

要说JSX 有什麽不同，不如说跟HTML 有什麽相似处吧。
并且要学着开始用Component的角度思考。

一开始看到 React 一定会有个想法：啊！这跟我学的 HTML 怎麽长得不一样?
在 React 中可以选择使用 JSX 来做撰写。

JSX 介绍

初步的认识

JSX 的写法与 HTML 大概有 90%相似，写起来就像..

范例：
const myArtivcle = <p></p>

?这会在哪里看到呢?
答案是会在JS的档案里面喔！

• JSX元素会被视为JavaScript表达式，也就是说可以使用在任何的表达式中。

• 使用上可以将一个JSX元素保存到一个变数中，再将此变数传递给函数，或是储存在阵列、物件中。

• ==巢状写法==<div></div > 是包覆文句的主要因素，少了他就不能使用了！

? 范例：
// 1-1 将JSX保存在变数中
const myArtivcle = (
    <div>
        <h1>天天Happy，天天学Code</h1>
    </div>
)

// 1-2 将JSX保存在物件中
const myFarm = {
  name: <li>NewNew Farm</li>,
  field: <li>6</li>,
};

标签的意义

1. JSX 提供更语意化好懂的标签
2. 写法非常类似XML，Component命名时首字需大写，HTML中的Tags 使用小写。

class FirstStep extends React.Component {
  render() {
    return (
      <div>
        <p>第一步</p>
        <Step />
      </div>
    );
  }
}

React 的思考逻辑，使用Component 比起 Template与显示逻辑，更能实现关注点分离的概念。

属性特质

JSX 元素的属性如同HTML，

• img、input、br，不需要结束标签的要在後边加一个slash /

  ? 举例：
  <img />
  <input />
  <br />
  

不同之处

• 可以透过标签上的属性改变外观，但基於JavaScript的保留关键字用法，会有些许的不同。

• 必须以驼峰式的写法

• class必须改写成className

  <h1 class="big">Hey</h1>
  

  <h1 className="big">Hey</h1>
  

• for也须改写成htmlFor

Boolean属性

在JSX中的属性名称但没有设值为true的状况！

范例：
<input type="button" disabled />;
// 第一个虽然没有设值，但结果会与下方的结果相同
<input type="button" disabled={true} />;


换句话说，若没有属性，则预设就会为｀false`
<input type="button" />;
<input type="button" disabled={false} />;

扩展属性

ES6 中... 使用上是迭代物件的意思，能将对应的物件迭代出来。 同时後面设定的属性会盖掉前面的相同属性

var props = {
  style: "width:20px",
  className: "main",
  value: "我在垦丁，天气晴",  
}

<FirstStep  {...props} value="我在垦丁，天气晴" />


React.createElement("h1", React._spread({}, props, {value: "我在垦丁，天气晴"}), "Hello React!");

样式的使用

JSX的外观使用方法：{{ }}
第一个{} 是JSX 的语法，第二个{} 是JavaScript 物件。

• 需要以驼峰式的方法命名

<FirstStep style={{ color: '#FFFFFF', fontSize: '30px'}} />

使用JS的作用方法

在JSX 中进行js 的作用方法加上花括号 { }

范例：
// 例如在进行数字相加时
ReactDOM.render(
  <h1>{2 + 3}</h1>,
  document.getElementById('app')
);

事件处理的使用方式

在JSX 中透过inline事件的绑定来监听并处理事件

• 同样的在这里也是使用驼峰式的写法

<FirstStep onClick={this.onBtn} />
****