放棄Javascript-使用kotlin編寫react前端應用之todoList
一.相較於typescript,kotlin的優點在於
- 配合idea,更強大的程式碼提示
- idea編輯器會註明程式碼塊的this指向
- 更強大的強型別機制
- kotlin更優秀的語言機制
二.下面是用kotlin實現todolist應用
核心元件程式碼
package translate
import kotlinext.js.js
import kotlinx.html.ButtonType
import kotlinx.html.InputType
import kotlinx.html.js.onChangeFunction
import kotlinx.html.js.onClickFunction
import org.w3c.dom.HTMLInputElement
import react.*
import react.dom.*
interface TranslateState : RState {
var text:String
var items:List<String?>
}
class Translate(props: RProps): RComponent<RProps, TranslateState>(props) {
override fun TranslateState.init(props:RProps) {
text=""
//items列表初始化
items=listOf<String>()
console.log(items)
}
override fun RBuilder.render() {
div(classes = "warp"){
h1 { +"TodoList" }
input(type = InputType.text,classes = "search-input",name = "text"){
key = "text"
attrs {
placeholder="請輸入內容"
value=state.text
onChangeFunction={
val target = it.target as HTMLInputElement
setState{
text=target.value
}
}
}
}
button(classes = "search-btn"){
+"確定"
attrs {
onClickFunction={
setState{
items+=text
text=""
}
}
}
}
div (classes = "resultWrap"){
+"代辦列表"
attrs.jsStyle = js {
marginTop="30px"
}
ul {
for ((index,item) in state.items.withIndex()){
li {
key = index.toString()
+"${item}"
button(classes = "btn btn-danger",type = ButtonType.button) {
+"x"
attrs.jsStyle = js {
marginLeft="10px"
}
attrs {
onClickFunction = {
setState {
items = items.filterIndexed { i, _ -> i != index }
}
}
}
}
attrs.jsStyle = js {
marginTop="10px"
}
}
}
}
}
}
}
}
fun RBuilder.translate() = child(Translate::class) {
}
三.效果圖
相關文章
- React 入門-寫個 TodoList 例項React
- vue實戰-元件編寫-todolist元件Vue元件
- 放棄jQuery, 使用原生jsjQueryJS
- React 系列一 之 TodoListReact
- react-native + mobx 入門到放棄React
- Airbnb: React Native 從選擇到放棄AIReact Native
- Linux 應當放棄桌面Linux
- React從入門到精通系列之(18)不使用JSX編寫React應用ReactJS
- React從入門到放棄(5):ReactRouter4React
- 放棄使用jQuery實現動畫jQuery動畫
- React Demo Two - TodoList 升級React
- 編寫可維護的JavaScript-程式設計風格JavaScript程式設計
- React從入門到放棄(4):Redux中介軟體ReactRedux
- AutoGPT放棄使用向量資料庫GPT資料庫
- TS + React + Antd + Koa2 + MongoDB 打造 TodoList 全棧應用ReactMongoDB全棧
- Airbnb棄用之後,我們還應該用ReactNative嗎?AIReact
- 為什麼我拒絕用Kotlin編寫安卓應用?Kotlin安卓
- [譯] 為什麼我放棄了 React 而轉向 Vue。ReactVue
- React從入門到放棄(1):webpack4簡介ReactWeb
- 放棄的智慧
- React + Antd實現簡單的todolistReact
- React 入門最好的例項-TodoListReact
- react,vue編寫介面文件ReactVue
- React元件編寫思路(二)React元件
- 基於Axon框架使用Kotlin編寫的ES銀行案例框架Kotlin
- 為什麼你應該放棄React老的Context API用新的Context APIReactContextAPI
- 調查顯示95%中國使用者寧願放棄iPhone 也不願放棄微信iPhone
- 這 5 個前端元件庫,可以讓你放棄 jQuery UI前端元件jQueryUI
- Eggjs 從放棄到開始使用JS
- NordPass 告誡使用者應儘快放棄使用爛大街的簡單密碼密碼
- 如何編寫一個React元件React元件
- 谷歌將放棄 ChromeOS谷歌Chrome
- 為什麼我們放棄了 Vue?Vue 和 React 深度對比VueReact
- 使用kotlin寫自己的dslKotlin
- 開發商正在放棄Android應用,使用者可能面臨風險Android
- 從入門到放棄——快應用踩坑之路
- React+Mobx+Koa2+LeanCloud 搭建個人版TodoListReactCloud
- 學習React入門最好的例項-TodoListReact