可以使用jsx 方便组件的开发 基本格式 主要是render 函数 class MyComponent { render() { return ( <div> <h1>Hello World</h1> <p>This is JSX!</p> </div> ); } } 数据绑定 render() { return ( <div>Hello {this.name}</div> ) } 条件语句 render()…

视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.setState都会重新初始化getInitialState中的参数 2.createClass的命名必须以大写开头如,var MySelect = React.createClass,这里如果定义为myselect就会出错 3.render方法的第一个参数return,html代码的第一行必须和re…

组件可以使用Event Emitter装饰器发送数据和事件. Event 定义 参考: import { Event, EventEmitter } from '@stencil/core'; ... export class TodoList { @Event() todoCompleted: EventEmitter; todoCompletedHandler(todo: Todo) { this.todoCompleted.emit(todo); } } 监听事件(Listen) 可以监听…

stenciljs 可以方便的构建交互式组件 支持以下装饰器 component prop watch state method element component 说明 component 包含tag styleUrl 参数 tag 定义组件的名称,注意需要使用-连接, styleUrl 指定组件的样式 参考格式: import { Component } from '@stencil/core'; @Component({ tag: 'todo-list', styleUrl: 'todo-…

React Learn Note 2 React学习笔记(二) 标签(空格分隔): React JavaScript 一.JSX简介 像const element = <h1>Hello world</h1>;这种被称为JSX,一种JavaScript的语法扩展.React推荐使用JSX来描述用户界面.它完全是在JavaScript内部实现的. 1. 在JSX中使用表达式 在JSX DOM中的表达式要包含在大括号里.React推荐在JSX代码的外面加小括号,防止分号自动插入的bug…

stenciljs 对于pwa 的支持是自动注入的,我们只需要简单的配置,stenciljs使用workbox 配置 默认配置 { skipWaiting: true, clientsClaim: true, globPatterns: [ '**/*.{js,css,json,html,ico,png,svg}' ] }; 修改配置 使用 stencil.config.ts 配置 export const config: Config = { outputTargets: [ { type:…

  stenciljs提供了 ssr 支持,对于express 最简单的就是使用提供的中间件 express 集成 const express = require('express'); const stencil = require('@stencil/core/server'); // create the express app const app = express(); // load the stencil config and // express serve-side rende…

测试对于框架来说比较重要,对于web 组件的测试同样很重要,类似的jest 很方便,stenciljs也是基于jest 开发的 包含两个核心api render(), flush() 测试配置 package.json 配置 "devDependencies": { ... "@types/jest": "^21.1.1", "jest": "^21.2.1" }, npm script 配置 "…

stenciljs路由类似react router 安装 npm install @stencil/router --save 使用 导入包 import "@stencil/router" 添加路由组件配置 包含的组件 stencil-router 项目中应该只有一个模板路由器组件.此组件控制与浏览器历史记录的所有交互, 并通过事件系统聚合更新 stencil-route 此组件基于提供的URL是否与当前位置匹配来呈现. 包含的属性 url (Array||string) 同时可以传…

组件不是动作,最好使用名词而不是动词, 文件结构 每个文件一个组件. 每个目录一个组件.虽然将类似的组件分组到同一目录中可能是有意义的,但我们发现当每个组件都有自己的目录时,更容易记录组件. 实现(.tsx)和组件的样式应该位于同一目录中. 参考格式 ├── card │ ├── card.ios.scss │ ├── card.md.scss │ ├── card.scss │ ├── card.tsx │ └── test │ └── basic │ ├── e2e.js │ └── ind…