初學React：定義一個組件
接着聊React，今天說說如何建立一個組件類。javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React工程模板</title>
<!-- react.js 是React的核心庫 -->
<script src="./build/react.js charset="utf-8"></script>
<!-- react-dom.js是做用是提供與DOM相關的功能 -->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- browser.min.js 的做用是將JSCX語法轉換成Javascript的語法 -->
<script src="./build/browser.min.js" charset="utf-8"></script>
<!-- 還能夠直接經過網址引入browser.min.js文件 -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
<!-- React渲染的模板內容會插入到這個DOM節點中，做爲一個容器 -->
<div id="container">
</div>
<!-- 在React開發中，使用JSX，跟Javascript不兼容，在使用JSX的地方，要設置type：text/babel -->
<!-- babel是一個轉換編譯器，把ES6轉成能夠在瀏覽器中運行的代碼 -->
<script type="text/babel">
<!-- 在此處編寫React代碼 -->
<!--
建立過一個組件類，用於輸出Hello React
方法：
一、React中建立的組件類一大寫字母開頭，採用駝峯命名法
二、在React中使用React.creacteClass方法建立一個組件類
三、核心代碼：每一個組件類都必須實現本身的render方法，輸出定義好的組件模板。
返回值：null、false或 組件模板
四、注意：組件類只能包含一個頂層標籤
-->
var HelloMessage = React.creactClass({
render: function() {
return <h1>Hello, React!</h1>
}
});
ReactDOM.render(
<!-- 在模板中插入 <HelloMessage /> 會生成一個實例-->
<HelloMessage />, <!-- 獲取將要插入的DOM，就是以前index.js中的<div id=「container」 > -->
document.getElementById("container")
);
</script>
</body>
</html>
相關文章
- 1. React(0.13) 定義一個checked組件
- 2. React Native 自定義組件
- 3. react 定義組件變量
- 4. React一個完整組件的定義以及綁定事件的優化
- 5. vue初級學習--組件的使用(自定義組件)
- 6. react native 自定義head title組件
- 7. 自定義react數據驗證組件
- 8. react-native自定義原生組件
- 9. react-native 自定義容器組件-this.props.children
- 10. 007-react---自定義組件（二）滑塊
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • PHP PDO預定義常量 - PHP參考手冊
- • 適用於PHP初學者的學習線路和建議
- • RxJava操作符（十）自定義操作符
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
