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的更多相关文章

  1. 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 ...

  2. [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 ...

  3. 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 ...

  4. 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 ...

  5. mvn archetype:create报错解决办法

    执行下列命令:mvn archetype:create -DgroupId=com.mycompany.app -DartifactId=my-app -X  会报错: 此时将archetype:cr ...

  6. 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- ...

  7. In App Purchase Statuses

    In App Purchase StatusesThe following are the available states that can be assigned to your in app p ...

  8. 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 ...

  9. [转] 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 ...

随机推荐

  1. 【Python】【Head First Python】【chapter1】2 - sys.stdout 和 print 的区别

    sys.stdout 和 print 的区别 首先,通过 help(print) 得到print内建函数的参数 Help on built-in function print in module bu ...

  2. hdu5308 I Wanna Become A 24-Point Master(构造)

    题目:pid=5308" target="_blank">http://acm.hdu.edu.cn/showproblem.php? pid=5308 题意:给定 ...

  3. intent- 启动其他应用

    今天需要在图库中实现对相机的调用,代码如下 Intent intent = new Intent(Intent.ACTION_VIEW); ComponentName componetName = n ...

  4. 暴力破解FTP服务器技术探讨与防范措施

    暴力破解FTP服务器技术探讨与防范措施 随着Internet的发展出现了由于大量傻瓜化黑客工具任何一种黑客攻击手段的门槛都降低了很多但是暴力破解法的工具制作都已经非常容易大家通常会认为暴力破解攻击只是 ...

  5. django-rest-framework框架 第四篇 认证Authentication

    认证Authentication 什么是身份认证 身份验证是将传入请求与一组标识凭据(例如请求来自的用户或与其签名的令牌)关联的机制. 视图的最开始处运行身份验证 在权限和限制检查发生之前,以及在允许 ...

  6. CISP/CISA 每日一题 六

    CISA 每日一题(答) 采用电子数据交换 EDI 的好处: 1.较少的书面工作: 2.较少的信息交换错误: 3.改善了数据库到数据库.公司到公司的信息流: 4.没有多余的数据重新键入: 5.较少的通 ...

  7. 今天看到可以用sqlalchemy在python上访问Mysql

    from sqlalchemy import create_engine, MetaData, and_ 具体的还没有多看.

  8. 导入数据库工具有关的oracle sql操作

    alter table TAB_user add (personal varchar2(30) default '用户名' not null);alter table TAB_user modify ...

  9. [Redux] Understand Redux Higher Order Reducers

    Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a ...

  10. 使用IPV6

    使用IPV6 知道IPV6已经很久了,但是一直没有使用过. 我使用的IPV4网络一般是 内网-->外网-->互联网,IPV6也不外乎这样,但是对IPV6而言,必须有它的"世界&q ...