Build a Preact.js CRUD App in Browser Using Javascript Full Project For Beginners

Welcome folks today in this blog post we will be introducing a new react.js alternative called as preact.js which is very less in size around 4KB and effective. We will be looking on how to build some basic crud functionality and routing in this framework. All the full source code of all examples will be shown below

Get Started

In order to get started you first of all need to install preact.js cli on the windows globally using the below command

npm i -g preact-cli

After executing this command you will be able to use the preact command in the terminal to create project as shown below

preact create default crudapp

Basically here we are using the simple template of preact.js to create a very simple boilerplate project of preact.js. But it also supports various templates such as material,netlify and typescript etc. If you just write preact create in terminal list of options will be shown to you and then you need to select as shown below

cd crudapp

Running the Preact.js App

npm run dev

This command will run the preact.js app on localhost:8080 inside the browser.

As you can see inside this app we have the simple message hello world printed on the screen.

Directory Structure of Preact.js App

As you can see in the above directory structure we have different files and folders. As we have selected a very simple preact.js project boilerplate. In this simple project we have just the one App.js file which is main file for the project. Here we will write all the code and then we have package.json file which list all the dependencies. Inside the assets folder you will store all the static fonts,images and css for your project.

App.js

import "./style";
import { useState } from "preact/hooks";

export default function App() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <div>Counter: {value}</div>
      <button onClick={() => setValue(value + 1)}>Increment</button>
      <button onClick={() => setValue(value - 1)}>Decrement</button>
    </div>
  );
}

import "./style";

import { useState } from "preact/hooks";

export default function App() {

const [value, setValue] = useState(0);

return (

<div>

<div>Counter: {value}</div>

<button onClick={() => setValue(value + 1)}>Increment</button>

<button onClick={() => setValue(value - 1)}>Decrement</button>

</div>

);

}

As you can see we have a simple counter app in which we increment or decrement the value of counter if we click the buttons as shown below. For this we have used the useState hooks to set the state variable of counter. Initial value is 0. And if we click the buttons we are calling the hook method setCounter() to increment or decrement the value of counter.

Creating Todo Using HTML5 Form

In this example we will be showing a html5 form to the user where they can create the todos as shown below. For this we are using the class level component and in this we have the input field and the buttons also to create the todos as shown below.

import "./style";
import { Component } from "preact";

export default class App extends Component {
    state = { todos: [], text: '' };
    setText = e => {
        this.setState({ text: e.target.value });
    };
    addTodo = () => {
        let { todos, text } = this.state;
        todos = todos.concat({ text });
        this.setState({ todos, text: '' });
    };
    render({ }, { todos, text }) {
        return (
            <form onSubmit={this.addTodo} action="javascript:">
                <label>
                  <span>Add Todo</span>
                  <input value={text} onInput={this.setText} />
                </label>
                <button type="submit">Add</button>
                <ul>
                    { todos.map( todo => (
                        <li>{todo.text}</li>
                    )) }
                </ul>
            </form>
        );
    }
}

import "./style";

import { Component } from "preact";

export default class App extends Component {

state = { todos: [], text: '' };

setText = e => {

this.setState({ text: e.target.value });

};

addTodo = () => {

let { todos, text } = this.state;

todos = todos.concat({ text });

this.setState({ todos, text: '' });

};

render({ }, { todos, text }) {

return (

<label>

</label>

<ul>

{ todos.map( todo => (

)) }

</ul>

</form>

);

}

As you can see we are using the map method to loop through all the todos which is there inside the array and displaying it inside the dom as shown above. We have the todos array and the text state variables and we are using the setState() method to manipulate the state variables.