Quick Contact


    React JS Vue Application

    If we created Vue application then if we consider two files like App.vue and main.js so in these files all functions are created and elements declared in App.vue but render in main.js, syntax is as below-:

    		< template>
    		< div id=”app”>
    		< img alt=”vue logo” src=”./assets/logo.png”>
    		< HelloWorld msg=”Welcome to your Vue.js App”/>
    		< /div>
    		< /template>
    		< script>
    		Import HelloWorld from ‘./components/HelloWorld.vue’
    		Export default {
    		Name: ‘App’,
    		Components: {
    		HelloWorld
    		}
    		}
    		< /script>
    		< style>
    		#app {
    		Font-family: Avenir, Arial, sans-serif;
    		-webkit-font-smoothing:        ;
    		#writes css styling according to your wish
    		}
    		< /style>
    	

    Another rendering file main.js is written as-:

    • Import Vue from ‘vue’ Calculating …
    • Import App from ‘./App.vue’

    New Vue{(

    Render: h => h(App),

    }).$mount(‘#app)

    So, if we move forward to React code features

    There are following features mainly or basically followed in code-:

    • Start server with npm start
    • use JSX
    • Create Add item function’
    • Delete item

    As in this also we create a component app.js file in which all states, props, conditions, functions, classes are applied accordingly, syntax of each property can check from following code.

    		Class App extends Component {
    		Constructor (props) {
    		Super (props);
    
    		This.state-{
    		newItem:””,
    		list : []
    		}
    		}
    		updateInput(key, value){
    		this.setState({
    		[key]: value
    		      });
    		addItem(){
    		const newItem={
    		id: 1+Math.random(),
    		value: this.state.newItem.slice()
    		};
    		//copy of current list items
    		Const list = [...this.state.list];
    		//ADD NEW ITEM TO LIST
    		List.push(newItem);
    		//update state with new list and reset newItem input
    		This.setState({
    		List,
    		newItem:””
    		});
    		}
    		Render() {
    		Return (
    		< div classname=”App”>
    		< div>
    		Add an item...
    		< br/>
    		< input
    		Type=”text”
    		Placeholder=”type item here...”
    		Value={this.state.newItem}
    		onChange={e => this.updateInput(“newItem”, e.target.value)}
    		/>
    		< button
    		onClick={() => this.addItem()}
    		>
    		Add
    		< /button>
    		< /div>
    		< /div>
    		);
    		}
    		}
    
    
    		Export default App;
    
    		NOW use last feature delete item-:
    		Class App extends Component {
    		Constructor (props) {
    		Super (props);
    
    		This.state-{
    		newItem:””,
    		list : []
    		}
    		}
    
    		updateInput(key, value){
    		this.setState({
    		[key]: value
    		});
    		addItem(){
    		const newItem={
    		id: 1+Math.random(),
    		value: this.state.newItem.slice()
    		};
    		//copy of current list items
    		Const list = [...this.state.list];
    		//ADD NEW ITEM TO LIST
    		List.push(newItem);
    		//update state with new list and reset newItem input
    		This.setState({
    		List,
    		newItem:””
    		});
    		}
    		deleteItem (id){
    		const list = [...this.state.list];
    		const updatedlist = list.filter(item => item.id !== id);
    		this.setState({list: updatedList});
    		}
    		Render() {
    		Return (
    		< div classname=”App”>
    		< div>
    		Add an item...
    		< br/>
    		< input
    		Type=”text”
    		Placeholder=”type item here...”
    		Value={this.state.newItem}
    		onChange={e => this.updateInput(“newItem”, e.target.value)}
    		/>
    		< button
    		onClick={() => this.addItem()}
    		>
    		Add
    		< /button>
    		< br/>
    		< ul>
    		{this.state.list.map[item => {
    		Return{
    		< li key={item.id}>
    		{item.value}
    		< button
    		onClick={() => this.deleteitem[item.id]}
    		>
    		X
    		< /button>
    		< /li>
    		< /div>
    		< /div>
    		);
    		}
    		}
    
    		Export default App;
    	

    Copyright 1999- Ducat Creative, All rights reserved.