入門篇(一)
JSX語法:HTML語言直接寫在JS語言中,不加任何引號
JSX基本語法規則(只有一個開頭節點和一個結尾節點)
1.遇到HTML標籤(以 < 開頭),就用HTML規則解析
2.遇到程式碼塊(以 { 開頭),就用JS規則解析
React獨有的JSX語法跟JS不相容、凡事使用JSX的地方,都要加上
<script type="text/babel"></script>
使用React前必須首先載入
react.js React的核心庫
react-dom.js 提供與DOM相關的功能
Browser.js 將JSX語法轉換為JS語法
注意:書寫的順序
<script type="text/babel">
var Hello = React.createClass({
render: function() {
return (
<div>Hello</div>
);
}
});
ReactDOM.render(
<Hello/>,
document.body
);
</script>
React.createClass 生成一個元件類、元件名一定要大寫,否則會報錯
所有元件都必須有自己的render方法,用於輸出元件
新增元件屬性需注意(駝峰式命名規則)
1.class需寫成className
2.for需寫成htmlFor
ReactDOM.render() 是React的最基本方法、用於將模板轉為HTML語言,並插入置頂的DOM節點(當前插入body中)
相關文章
- Flutter入門篇(一)Flutter
- SqlSugar ORM 入門到精通【一】入門篇SqlSugarORM
- Netty(一):入門篇Netty
- 手寫ORM入門篇(一)ORM
- JS基礎入門篇( 一 )JS
- JS基礎入門篇(一)JS
- springboot(一):入門篇Spring Boot
- Spring Boot(一):入門篇Spring Boot
- Spring Cloud Gateway (一)入門篇SpringCloudGateway
- Kafka【入門】就這一篇!Kafka
- Spark入門篇Spark
- elasticsearch 入門篇Elasticsearch
- Prezi(入門篇)
- Redis 入門篇Redis
- Zookeeper入門一篇就夠了
- 一、Ansible基礎之入門篇
- 一篇文章入門NettyNetty
- Git【入門】這一篇就夠了Git
- 一篇文章快速入門React框架React框架
- Spring Boot 2.0 WebFlux 教程 (一) | 入門篇Spring BootWebUX
- Cocos Creator 入門篇-拖拽小遊戲(一)遊戲
- 一篇文章帶你入門Zookeeper
- Mysql常用語法及入門開篇(一)MySql
- MongoDB一篇從入門到實戰MongoDB
- 想寫一篇jvm的工具入門JVM
- webpack4.x 入門一篇足矣Web
- AJAX入門這一篇就夠了
- 學習筆記|AS入門(一) 環境篇筆記
- AndroidJNI入門第一篇——HelloWordAndroid
- HBase 基本入門篇
- llvm入門篇LVM
- Flutter入門篇(二)Flutter
- 正則 (入門篇)
- Flutter動畫入門篇Flutter動畫
- node HelloWorld入門篇
- 《ElasticSearch入門》一篇管夠,持續更新Elasticsearch
- Spring Boot系列(一):Spring Boot 入門篇Spring Boot
- Spring入門這一篇就夠了Spring