Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on October 20, 2022

 

 

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

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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.

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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>
        );
    }
}

 

 

 

 

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.

 

Recent Posts

  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Android Java Project to Integrate Google OAuth2 Login & Logout System & Save User Info in SharedPreferences
  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • Android Java Project to Capture Image From Camera & Save it in SharedPreferences & Display it in Grid Gallery
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme