Stencil : JSX
Stencil component ใช้ JSX template syntax ในการกำหนดรูปแบบการแสดงผลที่จะถูก render ของ component ซึ่งแต่ละ component จะมี render function ที่จะทำหน้าที่ return โครงสร้างของ component ที่จะเปลี่ยนเป็น DOM ตอน runtime เพื่อแสดงผลบนหน้าจอ class MyComponent { render() { return ( <div> <h1>Hello World</h1> <p>This is JSX!</p> </div> ); } } จาก class Mycomponent ด้านบน render function จะ return div element ที่ภายในประกอบไปด้วย h1 และ p Data Binding เมื่อ component ต้องการที่จะ render ข้อมูลที่มีการเปลี่ยนแปลง dynamic data ทำได้โดยการ bindind ข้อมูลนั้นๆ โดยใช้ {variable} (ซึ่งจะใกล้เคียงกับ ES6 template ที่ใช้ ${variable}) render() { return ( <div>Hello {this.name}</div> ) } Conditionals เมื่อ component มีการแสดงผลที่ขึ้นอยู่กับเงื่อนไข สามารถใช้ JavaScript if/else statements ใน render function ดังเช่นตัวอย่างด้านล่างนี้ ถ้า this.name ไม่มีการกำหนดค่า จะแสดงผล “Hello, World” render() { if (this.name) { return ( <div>Hello {this.name}</div> ) } else { return ( <div>Hello, World</div> ) } } หรือ จะเขียนในรูปแบบ inline conditionals ก็ได้เช่นกัน render() { return ( <div> {this.name ? <p>Hello {this.name}</p> : <p>Hello World</p> } </div> ); } Loops ใน JSX สามารถใช้ array operators : map ในการทำงานแบบ loop จากตัวอย่างด้านล่าง มี lists ของ todo object ใน this.Objects ซึ่ง map function ทำหน้าที่ loop ในแต่ละ todo object ใน this.Objects แล้วสร้าง new JSX sub tree และ add เข้าไปใน array ที่จะ return ออกจาก map function ซึ่งจะเพิ่มเข้าไปใน JSX tree ด้านนอกนั่นคือ div element render() { return ( <div> {this.todos.map((todo) => <div> <div>{todo.taskName}</div> <div>{todo.isCompleted}</div> </div> )}
