[PReact] Create a Hello World App with Preact

Posted 2020-09-23 Answer1215

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;