Day19 不使用JSX开发React的方式

当你在开发时若不想使用编译器的话,不使用JSX也是可以开发react的。
每个JSX元素都只是呼叫 React.createElement(component, props, ...children)的语法糖。单纯使用Java Script也可以完成react的开发。
例如下方为JSX开发的程序:

class Welcome extends React.Component {
  render() {
    return <div>Hello {this.props.someone}</div>;
  }
}

ReactDOM.render(
  <Welcome toWhat="小羽" />,
  document.getElementById('App')
);

若不使用JSX开发的话,可以改成下列方式:

class Welcome extends React.Component {
  render() {
    return React.createElement('div', {}, `Hello ${this.props.someone}`);
  }
}

ReactDOM.render(
  React.createElement(Welcome, {someone: 'World'}, {}),
  document.getElementById('root')
);

也可以用变数取代React.createElement来简化你的程序。

const element=  React.createElement;
ReactDOM.render(
 element(Welcome, {someone: 'World'}, {}),
  document.getElementById('root')
);

当开发专案时若不使用JSX等语法糖时,单纯使用Java Script开发也是很方便的


<<:  [Day 24] 字形渲染(Text Rendering) - 渲染文字

>>:  DAY 21:Bridge Pattern,桥接人间与魔界的次元门

Day 16 AWS云端实作起手式第六弹 串接两大网路流量导流服务Route53和ELB

今天我们会把Route 53串接到昨天建置的ELB上。但开始之前,我们先问自己一个问题,Route ...

【Day 24】 实作 - 创建 AWS Kinesis Data Firehose for WAF

今天我们要来实作 - 『如何启用 WAF 日志以及汇入 BI 进行分析』, Data Analyti...

[Day 02] 在表情资料寻找邂逅是否搞错了甚麽 (Facial Expression Recognition)

表情资料集的介绍与下载 俗话说:「知己知彼,百战百胜」,这句话同样也适合用在资料科学上, 我们必须对...

DAY21 - 金鱼脑学了新的忘了旧的

前言 今天是铁人赛的第二十一天,终於把之前超前部署的文章存档的扣打都用完了 今天上传的文章,今天才开...

Day22-Kubernetes 那些事 - Namespace

前言 今天要来介绍一个比较抽象的观念,但在 K8s 中很常拿来使用,其实笔者从一开始的文章就开始埋下...