The Three Pillars of Web Programming

In web development there are three main pillars that curate the life cycle. Recognizing events, manipulating the DOM, and communicate with the server.

In Javascript, events are onClick, onSubmit, onChange, onKeyUp, onMouseOver, onFocus, and onLoad. When the event occurs in invokes logic and executes steps defined in a function set to deal with it, where the function is defined with handle, ie. handleSubmit for onSubmit.

handleSubmit = event => {        event.preventDefault();        this.props.addApplicant(this.state)        this.setState({            name: '',            pet_name: '',            email_address: '',            phone_number: '',            address: ''        })        return  <Redirect  to="/" />    }     render(){        return(            <div className="ApplicantForm">                <form onSubmit = {this.handleSubmit}>                    <div>                        <label htmlFor="name">Name</label>                        <input type="text" name="name" onChange = {this.handleChange} value={this.state.name} placeholder="Name"/>                    </div>                    <div>                        <label htmlFor="pet_name">Pet's Name</label>                        <input type="text" name="pet_name" onChange = {this.handleChange} value={this.state.pet_name} placeholder="Pet's Name"/>                    </div>                    <div>                        <label htmlFor="email_address">Email</label>                        <input type="text" name="email_address" onChange = {this.handleChange} value={this.state.email_address} placeholder="Email"/>                    </div>                    <div>                        <label htmlFor="phone_number">Phone Number</label>                        <input type="text" name="phone_number" onChange = {this.handleChange} value={this.state.phone_number} placeholder="(555)555-5555"/>                    </div>                    <div>                        <label htmlFor="address">Address</label>                        <input type="text" name="address" onChange = {this.handleChange} value={this.state.address} placeholder="Address"/>                    </div>                    <div>                        <input type="submit" value="Apply"/>                    </div>                </form>             </div>        )    }

The events then trigger to Manipulate the DOM, Document Object Model. The DOM is a programming interface for HTML and XML documents. The DOM represents that same document so it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.