OnLoad In Lightning Web Component

LWCDemo.html

<template>
    <div class="slds-text-heading_large slds-text-align_center">
        {greeting}
    </div>
</template>  

LWCDemo.js

import { LightningElement, track } from 'lwc';  
  
export default class LWCDemo extends LightningElement {  
  
    @track greeting;  
  
    connectedCallback() {
        this.greeting = 'Hello World!';
    }
}  

Lightning Web Component Modal

LWCModal.html

<template>
    <div class="slds-theme_default">
        <div class="slds-p-around_medium">
            <lightning-button label="Show LWC Modal" variant="brand" onclick={handleOpenModal}>
            </lightning-button>
        </div>
        <template if:true={isOpenModal}>
            <div style="height: 500px;">
                <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                    <div class="slds-modal__container">
                        <header class="slds-modal__header">
                            <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={handleCloseModal}>
                                <lightning-icon icon-name="utility:close" variant="inverse" alternative-text="Close" size="medium">
                                </lightning-icon>
                                <span class="slds-assistive-text">Close</span>
                            </button>
                            <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">LWC Modal Example</h2>
                        </header>
                        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                            <div class="slds-text-heading_small slds-text-align_center">
                                Welcome to Biswajeet Samal's Blog
                            </div>
                        </div>
                        <footer class="slds-modal__footer">
                            <lightning-button label="Cancel" variant="neutral" onclick={handleCloseModal}></lightning-button>
                        </footer>
                    </div>
                </section>
                <div class="slds-backdrop slds-backdrop_open"></div>
            </div>
        </template>
    </div>
</template>

LWCModal.js

import {LightningElement, track} from 'lwc';

export default class LWCModal extends LightningElement {
  
    @track isOpenModal = false;

    handleOpenModal() {
        this.isOpenModal = true;
    }
  
    handleCloseModal() {
        this.isOpenModal = false;
    }
}

LWCModal.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="LWCModal">
    <apiVersion>46.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Output:

Hello World Lightning Web Component

helloworld.html

<!--Component Start-->
<template>
    <lightning-card title="Hello World" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>Hello, {greeting}!</p>
            <lightning-input label="Name" value={greeting} onchange={namechangeHandler}></lightning-input>
        </div>
    </lightning-card>
</template>
<!--Component End-->

helloworld.js

//The import statement imports LightningElement from the lwc module
import {LightningElement, track} from 'lwc';
//The export default keywords export a HelloWorld class for other components to use.

export default class HelloWorld extends LightningElement {
    //To execute logic each time a public property is set, write a custom getter and setter with @api.
    //To hold the property value inside the getter and setter, use a private property @track.
    @track greeting = 'World';
    //Input on change method
    namechangeHandler(event) {
        this.greeting = event.target.value;
    }
}

helloworld.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
    <apiVersion>45.0</apiVersion>
    <!--To allow the component to be used in Lightning App Builder or Community Builder, set  isExposed to true-->
    <isExposed>true</isExposed>
    <!--Targets to make component available for lightning app page, record page and home page-->
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Output:

Refresh lightning:recordEditForm After Save

There is no standard functions to refresh lightning:recordEditForm after save record. You can use aura:if to re-render the field section inside record edit form, after successfully saved the record.

Lightning Component:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable">
    
    <!--Attributes-->
    <aura:attribute name="reloadForm" type="boolean" default="true" />
    
    <!--Component Start-->
    <div class="slds-m-around_xx-large">
        <lightning:recordEditForm objectApiName="Account"
                                  aura:id="accForm"
                                  onload="{!c.handleOnLoad}"
                                  onsubmit="{!c.handleOnSubmit}"
                                  onsuccess="{!c.handleOnSuccess}"
                                  onerror="{!c.handleOnError}">
            <lightning:messages />
            <aura:if isTrue="{!v.reloadForm}">
                <lightning:inputField fieldName="Name"/>
                <lightning:inputField fieldName="AccountNumber"/>
                <lightning:inputField fieldName="Industry"/>
                <lightning:inputField fieldName="Phone" />
                <lightning:inputField fieldName="Website" />
                <aura:set attribute="else">
                    Saving...
                </aura:set>
            </aura:if>
            <lightning:button variant="brand" type="submit" name="save" label="Save" />
        </lightning:recordEditForm>
    </div>
    <!--Component End-->
</aura:component>

Lightning JS Controller:

({
    handleOnLoad : function(component, event, helper) {
         
    },
     
    handleOnSubmit : function(component, event, helper) {
        
    },
     
    handleOnSuccess : function(component, event, helper) {
         component.set("v.reloadForm", false);
        component.set("v.reloadForm", true);
    },
     
    handleOnError : function(component, event, helper) {
         
    },
     
})