[PReact] Create a Hello World App with Preact
By creating a simple ‘hello world’ example application first in vanilla Javascript, and then in Preact without any tools, we’ll learn what type of problems Preact is solving for us and how is works at a low level. Then we’ll switch to a Webpack + Babel setup we’ll cover some fundamental concepts such as, which imports we need, how to create a component, how to use JSX and finally how to render our component into a target element in a web page.
index.js
import {h, render} from 'preact';
import App from './components/App'; render(<App />, document.querySelector('main'));
Here, we must import 'h' even we don't use it. It allows preact convert JSX to JS render to the DOM.
App.js:
import {h} from 'preact'; const App = () => {
return (
<div>
Hello World!!!
</div>
);
}; export default App;
[PReact] Create a Hello World App with Preact的更多相关文章
- How to create a Maven web app and deploy to Tomcat - fast
原文地址: http://www.blogjava.net/sealyu/archive/2010/01/08/308706.html Procedure Prerequisites and Assu ...
- [PReact] Reduce the Size of a React App in Two Lines with preact-compat
Not every app is greenfield, and it would be a shame if existing React apps could not benefit from t ...
- Create Fiori List App Report with ABAP CDS view – PART 2
In the Part 1 blog, we have discussed below topics CDS annotations for Fiori List Report. How to cre ...
- Create Fiori List App Report with ABAP CDS view – PART 1
From Create Fiori List App Report with ABAP CDS view – PART 1 In this blog, I am going to show How C ...
- mvn archetype:create报错解决办法
执行下列命令:mvn archetype:create -DgroupId=com.mycompany.app -DartifactId=my-app -X 会报错: 此时将archetype:cr ...
- 404 & 401 Errors with the App Management Service
from:http://blogs.technet.com/b/sharepoint_-_inside_the_lines/archive/2013/06/23/404-amp-401-errors- ...
- In App Purchase Statuses
In App Purchase StatusesThe following are the available states that can be assigned to your in app p ...
- iphone Dev 开发实例9:Create Grid Layout Using UICollectionView in iOS 6
In this tutorial, we will build a simple app to display a collection of recipe photos in grid layout ...
- [转] Creating a Simple RESTful Web App with Node.js, Express, and MongoDB
You can find/fork the sample project on GitHub Hey! This and all my other tutorials will soon be mov ...
随机推荐
- C# 正整数和非零正整数校验
/// <summary> /// 1. 校验正整数(包含0) /// </summary> public static bool isInterger(string str) ...
- rpm---rpm包管理
rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他发行版的采用.RPM ...
- Python线程池任务
#!/usr/bin/env python # -*- coding:utf-8 -*- from concurrent.futures import ThreadPoolExecutor #线程池, ...
- JNDI学习总结(3)——Tomcat下使用C3P0配置JNDI数据源
一.C3P0下载 C3P0下载地址:http://sourceforge.net/projects/c3p0/files/?source=navbar 下载完成之后得到一个压缩包. 二.使用C3P0配 ...
- 智能指针shared_ptr, auto_ptr, scoped_ptr, weak_ptr总结
看这里: http://blog.csdn.net/lollipop_jin/article/details/8499530 shared_ptr可以多线程同时读,但是涉及到写,需要加锁. share ...
- ios UITextView 提示文本
定义两个UITextView,一个用于输入文本,一个用于显示提示信息,当输入文本为空时显示提示信息,否则不显示提示信息. //6.3.1文字内容提示 _contentTextViewTip = [[U ...
- 简单的WINFORM窗口,体验WINFORM带来的快感
当习惯成为一种自然,就不再喜欢那种条条框框的规则 using System; using System.Windows.Forms; namespace Window{ class Window{ s ...
- Android记录16-友盟第三方登录、分享实现
Android开发记录16-友盟第三方登录.分享实现 2014年博客之星,投票地址username=wwj_748#content" style="font-family: Kai ...
- 阿里云 CentOS7.4 环境安装mysql5.7
1. 删除默认安装的数据库,无所谓的请略过 据说CentOS7.x版本会默认安装mariadb数据库,我有点强迫症,故卸载之: rpm -qa|grep mariadb yum remove mari ...
- 基于WebSphere与Domino的电子商务网站构架分析
650) this.width=650;" border="0" alt="174812596.jpg" src="http://img1. ...