Getting started with Preact : helloworld standalone example

Preact looks to be the most closest React alternative in terms of code similarity. There official motto: "Fast 3kB alternative to React with the same ES6 API". You almost have to change nothing in the codes if you look to switch your React application to Preact. Lets have a quick look at a simplest Preact standalone helloworld component example with JSX/babel embedded in single html page, the very 'clock' example in their documentation :

  1. <html>
  2. <head></head>
  3. <body>
  5. <div id="abcd"></div>
  7. <script src="https://npmcdn.com/preact@2.8.3/dist/preact.js"></script>
  8. <script src="https://npmcdn.com/preact-compat@0.6.1/preact-compat.js"></script>
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  11. <script>
  12. window.React = preactCompat;
  13. window.ReactDOM = preactCompat;
  14. </script>
  16. <script type="text/babel">
  18. const { h, render, Component } = preact; // normally this would be an import statement.
  20. class Clock extends Component {
  21. constructor() {
  22. super();
  23. // set initial time:
  24. this.state.time = Date.now();
  25. }
  27. componentDidMount() {
  28. // update time every second
  29. this.timer = setInterval(() => {
  30. this.setState({ time: Date.now() });
  31. }, 1000);
  32. }
  34. componentWillUnmount() {
  35. // stop when not renderable
  36. clearInterval(this.timer);
  37. }
  39. render(props, state) {
  40. let time = new Date(state.time).toLocaleTimeString();
  41. return <span>{ time }</span>;
  42. }
  43. }
  45. render(<Clock/>, document.getElementById('abcd'));
  47. </script>
  48. </body>
  49. </html>

Reference:
Posted by
Labels: , , , ,

No comments:

Post a Comment