Get Started

1. Download the recent version of RobJS and place it somewhere in your project folder.

2. Start with a usual index.html-file where you define a div-Tag with an id of your choice. Add a script-tag pointing to a JavaScript-file in your project folder. Name it as you like.

    
<!-- index.html -->
<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>App</title>
</head>
<body>
    <p>Static html that stays unaffected and can help SEO</p>
    <div id='myapp'></div>
    <script type='module' src='app.js'></script>
</body>
</html>

3. Create the JavaScript file according to your script tag. In this case we call it app.js.

4. In app.js, initialize the app, define state variables, components and render the initial view like shown below.

    
// app.js
import { RobJSApp } from './Rob.js'

const app = new RobJSApp('myapp') // pass your tag id
app.init('app') // pass same name as your app variable as argument

// Define a state variable, pass a name and initial value
app.defineStateVar('count', 0)

// Define a component as a normal JavaScript function that returns an html string (recommend: do this in a separate file and import it)
// The component should update automatically when the state changes 
// -> Therefore you must wrap the returning html in a div and give it an id passed as an argument
const Counter = (id) => {
  return `
    <div id=${id}> 
      <button onclick='app.updateState("count", app.state.count - 1)'>-</button>
      ${app.state.count}
      <button onclick='app.updateState("count", app.state.count + 1)'>+</button>
    </div>
  `;
};

// Register the component, pass the component function, the id and an array of state variables it listens to
app.registerComponent(Counter, 'counter1', ['count'])

// Further we can create a little Wrapper called App that just holds the Counter component and acts as an entry point of the app.
// As the Wrapper is not dependent on a state variable itself, it neither needs an id nor needs to be registered as a component.
const App = () => {
  return `
    <div> 
      ${Counter('counter1')}
    </div>
  `;
};

// Start your app with an initial render
app.initialRender(App)

5. Done. Try it out by opening the index.html-file with your browser. You should see something like this (but without styling).

6. We learned how to set up a project, create and change a state variable, create a component and render it initially.

7. To see further demonstrations like building a menu, talking to an API, conditional rendering etc. check out the examples. They build on each other so you might check them out in their order.

8. To see an example of a fully functional CRUD frontend app, take a look at Simple Todo App made with RobJS and its corresponding GitHub-Repository.