Skip to main content

Quickstart

This guide will walk you through setting up your first Refract project and creating a simple "Hello, World!" application.

prerequisites

Before you get started, make sure you have Visual Studio Code, the latest version of Node and npm, and some basic knowledge of JavaScript.

Installation​

To install Refract, use the following command:

npm install refract-js

Your First Refraction​

Every Refract application starts with a component. Here's how you can create a simple one:

1. Create a File

First, create a new file named app.js and add the following code:

import { createComponent } from 'refract';

// Create your first Refract component
const App = createComponent({
  // This is the component's state. It's a simple object that holds your data.
  state: {
    message: 'Hello, World!',
  },

  // The render function defines the structure of your component.
  render() {
    return `<h1>${this.state.message}</h1>`;
  }
});

export default App;

2. Mount the Component

Finally, create an index.html file to display your component. Make sure you import the app.js file and mount your component to a DOM element.

<!DOCTYPE html>
<html>
<head>
  <title>My First Refract App</title>
</head>
<body>

  <div id="root"></div>

  <script type="module">
    import App from './app.js';
    import { mount } from 'refract';

    mount(App, '#root');
  </script>

</body>
</html>

After creating these two files, you can open index.html in your browser to see your first Refract component in action!