[PReact] Create a Hello World App with Preact
2017-06-16 04:04
519 查看
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
Here, we must import 'h' even we don't use it. It allows preact convert JSX to JS render to the DOM.
App.js:
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;
相关文章推荐
- iOS Programming Basic: How Does the Hello World App Work?
- 【转】Create Hello-JNI with Android Studio
- [Google App Engine] Hello, world!
- Google App Engine helloworld 入门教程
- How to create iOS 8 Today extension and share data with containing app – tutorial
- [Google App Engine] Hello, world!
- Tutorial: Hello World with Apache Ant
- OSX “open” command to create new files with an app
- 第3章、第一个“Hello,world!”之Android App(从零开始学Android)
- [Nuxt] Setup a "Hello World" Server-Rendered Vue.js Application with the Vue-CLI and Nuxt
- Android App 初登场——hello,world
- Xcode添加账号提示Please sign in with an app-specific password. You can create one at appleid.
- [PReact] Reduce the Size of a React App in Two Lines with preact-compat
- SharePoint APP之 "hello world"
- Maven入门示例(2):调试helloworld webapp程序
- Java Servlet Hello World with Tomcat
- FreeMarker(FTL) Hello World Tutorial with Example
- JAXB - Hello World with Namespace
- Objective-C 2.0 with Cocoa Foundation --- 2,从Hello,World!开始
- Hello world with LUA