\nBasics aspects of react applications are<\/p>\n
- \n
- components<\/li>\n
- state<\/li>\n
- props<\/li>\n<\/ul>\n
React works on Virtual DOM can be used to create fast single page applications<\/strong> ,\u00a0 react supports unidirectional data flow, this means that each time we are updating the state only, and the component will be updated automatically,<\/p>\n
whereas if you were a jquery programmer, you may know how many time we do update the DOM for every bit of code and we ourself don’t know how many places we have to do the updates.<\/p>\n
Whereas in react there are reusable components which will only be updated if and only if the state of that component is updated.<\/p>\n
In this way only part of the app is updated, not the whole DOM<\/span> for now we will only build the app only using these later on other blogs we will create application with redux <\/strong>(for maintaining state of apps for large application)<\/p>\n
In React, for every\u00a0DOM object<\/a>, there is a corresponding “virtual DOM object.” A virtual DOM object is a\u00a0representation<\/em> of a DOM object, like a lightweight copy. so it does not get updated every time when we perform operations on DOM until and unless we do update the state.<\/span><\/p>\n
Please check these below requirements in order to create a basic localstorage react app. BABEL is basically used to transpiling the REACT<\/strong> code into javascript.<\/p>\n
Also, you can visit WooCommerce React Development<\/a> <\/strong>to enhance your online store with React headless development services or to create Progressive Web App (PWA)<\/a>.<\/p>\n
you must have basic knowledge of these\u00a0 for creating the app<\/p>\n
- \n
- html<\/li>\n
- css<\/li>\n
- javascript (ECMAScript<\/span> version 2015)<\/li>\n
- npm<\/li>\n
- node<\/li>\n
- webpack<\/li>\n
- babel(Basic knowledge)<\/li>\n<\/ul>\n
Step 1 :- create basic react app using create-react-app package from npm<\/strong><\/p>\n
You can find the basic app create commands from here Basic react app<\/a><\/p>\n
npm install -g create-react-app \ncreate-react-app localstorage-app \n\nlocalstorage-app \n\nNow type :- npm start\n<\/pre>\n
Step 2 :- leave the index.js file as it is, because there is no need to edit this file as it is root of the react app and it basically used for initializing the app, or you can remove the unwanted files<\/b><\/p>\n
Index.js\u00a0<\/strong><\/p>\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\/App';\n\nReactDOM.render(<App \/>, document.getElementById('root'));<\/pre>\nStep 3 :- Start editing App.js<\/strong><\/p>\n
import React, { Component } from 'react';\nimport Header from '.\/component\/header';\nimport ProductItem from '.\/component\/productitem';\nimport AddProduct from '.\/component\/addproduct';\nconst products = [\n {\n name: 'Apple',\n price : 23.00,\n img: 'apple.png'\n },{\n name: 'shorts',\n price : 123.00,\n img: 'capree.png'\n },\n {\n name: 'Blazer',\n price : 232.00,\n img: 'blazer.png'\n },{\n name: 'jeans',\n price : 223.00,\n img: 'jeans.png'\n },{\n name: 'Laptop',\n price : 2223.00,\n img: 'laptop.png'\n },{\n name: 'Crowd',\n price : 12113.00,\n img: 'crowd.png'\n },{\n name: 'Jacket',\n price : 4523.00,\n img: 'jaket.png'\n },{\n name: 'Asus',\n price : 313.00,\n img: 'asus.png'\n }\n\n];\n\nlocalStorage.setItem('products',JSON.stringify(products));\n\nclass App extends Component {\n constructor(props){\n super(props);\n this.onDelete = this.onDelete.bind(this);\n this.onAdd = this.onAdd.bind(this);\n this.onEditSubmit = this.onEditSubmit.bind(this);\n }\n state = {\n products:JSON.parse( localStorage.getItem('products') )\n }\n componentWillMount() {\n const products = this.getProducts(); \n this.setState({products})\n }\n onDelete(name){\n const products = this.getProducts();\n const filtered = products.filter( product => {\n return product.name !== name;\n });\n \n this.setState({products:filtered});\n }\n\n onAdd( name, price, img ) {\n \/\/ console.log(name);\n const new_product = {\n name: name,\n price: price,\n img: img\n }\n const products = this.getProducts();\n products.push(new_product);\n \n this.setState({products:products});\n }\n\n onEditSubmit( name, price, orignalName ) {\n \n const products = this.getProducts();\n const filteredProducts = products.map( product => {\n if( product.name == orignalName ) {\n product.name = name;\n product.price = price;\n }\n return product;\n });\n \n this.setState({products:filteredProducts});\n }\n\n getProducts(){\n return this.state.products;\n }\n\n render() {\n \n return (\n\n <div className=\"App\">\n \n <Header \/> \n <div className=\"container\">\n \n <div className=\"row\">\n <div className=\"col-md-12\">\n <div className=\"add-new-product\">\n <AddProduct\n onAdd={this.onAdd}\n \/>\n <\/div>\n <\/div>\n <\/div>\n\n <div className=\"row\">\n <div className=\"col-md-12\">\n {\n this.state.products.map( product => {\n return (\n <ProductItem\n key={product.name}\n {...product}\n onDelete={this.onDelete}\n onEditSubmit={this.onEditSubmit}\n onAdd={this.onAdd}\n \/> \n )\n })\n }\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n }\n}\n\nexport default App;\n<\/pre>\nStep 4 :- component\/addproduct.js<\/strong><\/p>\n
import React, { Component } from 'react';\n\n\nclass AddProduct extends Component {\n constructor(props){\n super(props);\n this.AddNewProduct = this.AddNewProduct.bind(this);\n\n }\n \n AddNewProduct(evt){\n \n evt.preventDefault();\n const name = document.getElementById('productName').value;\n const price = document.getElementById('productPrice').value;\n const img = document.getElementById('productImage').value;\n \n if( name && parseInt( price ) && img ) {\n \n this.props.onAdd( name, price, img );\n \n document.getElementById('productName').value = '';\n document.getElementById('productPrice').value = '';\n document.getElementById('productImage').value = '';\n\n } \n\n }\n render() {\n\n return (\n <form onSubmit={this.AddNewProduct}>\n <div className=\"add-product-wrap\">\n <h2 className=\"text-capitalize\">Add new Product<\/h2>\n \n <input type=\"text\" name=\"productName\" id=\"productName\" placeholder=\"Add product name\" \/> \n <input type=\"text\" name=\"productPrice\" id=\"productPrice\" placeholder=\"Add product price\" \/> \n <input type=\"text\" name=\"productImage\" id=\"productImage\" placeholder=\"Add product image name\" \/> \n <button type=\"submit\">Add Product<\/button>\n \n <\/div>\n <\/form> \n )\n }\n}\n\nexport default AddProduct;\n\n<\/pre>\nStep 5 :- component\/header.js<\/strong><\/p>\n
import React, { Component } from 'react';\nimport '.\/App.css';\n\nclass Header extends Component {\n \n render() {\n\n return (\n <header>\n <div className=\"container fixed-top\">\n \n <div className=\"row\">\n\n <div className=\"col-md-12\">\n\n <h2 className=\"text-center tagline white\">Webkul Products Demo using React<\/h2>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n\n <\/header>\n\n );\n }\n}\n\nexport default Header;\n<\/pre>\nStep 6 :- component\/productitem.js<\/strong><\/p>\n
import React, { Component } from 'react';\n\n\nclass ProductItem extends Component {\n constructor(props){\n super(props);\n this.state = {\n isEdit : false\n }\n this.onDelete = this.onDelete.bind(this);\n this.onEdit = this.onEdit.bind(this);\n this.onEditSubmit = this.onEditSubmit.bind(this);\n }\n onDelete(){\n this.props.onDelete(this.props.name);\n }\n onEditSubmit(evt){\n evt.preventDefault();\n const name = document.forms[\"editForm\"][\"EProductName\"].value;\n const price = document.forms[\"editForm\"][\"EProductPrice\"].value;\n \n if( name && parseFloat( price ).toFixed(2) ) {\n \n this.props.onEditSubmit( name, price, this.props.name );\n this.setState({\n isEdit:false\n });\n document.forms[\"editForm\"][\"EProductName\"].value = '';\n document.forms[\"editForm\"][\"EProductPrice\"].value = '';\n\n }\n }\n onEdit(){\n this.setState({isEdit:true});\n }\n render() {\n const { name, price, img, onDelete } = this.props;\n const imgUrl = require('..\/images\/asus.png');\n \n return (\n <div key={name} className=\"productitems\"> \n {\n this.state.isEdit \n ? (\n <div>\n <form name=\"editForm\" onSubmit={this.onEditSubmit}> \n <div className=\"editor\">\n <img src={imgUrl} alt={name} \/>\n <button className=\"DefProduct\">x<\/button> \n \n <\/div>\n <div className=\"product-wrap extraclass\">\n <input type=\"text\" name=\"EProductName\" defaultValue={name} ref={nameInput=>this.nameInput=nameInput}\/> \n <input type=\"text\" name=\"EProductPrice\" defaultValue={parseFloat(price).toFixed(2)} ref={ priceInput => this.priceInput = priceInput} \/> \n <\/div>\n <button className=\"saveProduct\">Save<\/button> \n <\/form>\n <\/div>\n ) \n : (\n <div>\n <div className=\"editor\">\n <img src={imgUrl} alt={name} \/>\n <button onClick={this.onEdit}>Edit<\/button> \n <\/div>\n <div className=\"product-wrap\">\n <h2>{name} <\/h2> \n <span>{'+parseFloat(price).toFixed(2)} <\/span> \n <\/div> \n <button onClick={this.onDelete}>Delete<\/button>\n <\/div> \n ) \n } \n <\/div> \n ) \n } \n} \nexport default ProductItem;\n\n<\/pre>\nStep 7 :- component\/App.css<\/strong><\/p>\n
.App {\n text-align: center;\n}\n.add-product-wrap{\n background-color: #f4f4f4;\n padding: 30px;\n}\n.add-product-wrap input{\n font-size: 16px;\n font-weight: 600;\n color: #888888;\n padding: 10px;\n width: 450px;\n border-radius: 4px;\n border: 2px solid #cccccc;\n margin: 10px 10px;\n display: inline-block;\n}\n.add-product-wrap button{ \n margin: 20px 8px 10px 0px;\n padding: 10px 20px;\n font-size: 16px;\n background-color: #ef7742;\n color: #ffffff;\n height: 48px;\n border: 0px;\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n margin-left: -1px;\n font-weight: 600;\n text-transform: uppercase;\n}\n.editor{ \n position: relative;\n display: block;\n}\n.editor:hover{ \n background: rgba(0,0,0,.5);\n}\n.editor button:focus{ \n border: none;\n outline: none;\n}\n.editor button{ \n display: none;\n position: absolute;\n top: 10px;\n left: 5px;\n width: 50px !important;\n height: 50px;\n border-radius: 50%;\n font-size: 15px !important;\n}\n.editor:hover button{\n display: inline-block;\n}\n.App-logo {\n animation: App-logo-spin infinite 20s linear;\n height: 80px;\n}\n.white{\n color: #fff;\n}\n.react-contact{\n color: #555;\n font-size: 18px;\n\n}\n.productitems{\n list-style: none;\n margin-left: 0;\n margin-bottom: 4.235801032em;\n text-align: center;\n display: inline-block;\n width: 300px;\n max-width: 100%;\n box-shadow: 0 5px 32px 0 rgba(0,0,0,.15);\n border-radius: 2px;\n overflow: hidden;\n margin: 40px 20px 40px 20px;\n vertical-align: top;\n}\nbutton.DefProduct{\n display: inline-block;\n font-size: 24px !important;\n width: 40px !important; \n height: 40px;\n padding: 0px !important; \n}\n.productitems .product-wrap{\n padding:20px 20px 0px;\t\n}\n.productitems button{\n background-color: #7d3f71;\n border:none;\n color: #ffffff;\t\n width:100%;\n display:inlie-block;\n margin:0px;\n padding: 10px;\n font-size: 17px;\n}\n.productitems h2{\n color: #6d6d6d;\n margin:8px 0px 10px;\n font-size:20px;\t\n display:block;\n text-transform:capitalize;\n}\n.productitems span{\n color: #6d6d6d;\n margin:0px 0px 10px 0px;\n font-size:15px;\t\n display:inline-block;\n}\n.product-wrap input{\n padding: 5px;\n margin: 11px 5px 0px;\n border: 1px solid #ddd;\n}\n.extraclass{\n padding-top: 0px !important;\n}\n.product-wrap input:last-child{\n margin-bottom: 5px;\n}\n.page{\n background: #d5d5d5;\n padding: 50px;\n display: block;\n margin: 100px auto !important;\n}\np{\n color: #333;\n}\nh1{\n color: #333;\n}\n.navbar a{\n color: #fff;\n display: inline-block;\n margin: 5px 25px;\n}\nheader {\n background-color: #07365d;\n color: white;\n}\n\n.App-title {\n font-size: 1.5em;\n}\n\n.App-intro {\n font-size: large;\n}\n\n@keyframes App-logo-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n.white {\n color: #fff;\n}\n\/* ---Pagination End--- *\/\n\/* ---Footer Section--- *\/\nfooter {\n background-color: #ffffff;\n}\nfooter p.footer-social-links {\n margin: 26px 0px 17px;\n text-align: right;\n}\nfooter span {\n \/* background-image: url('images\/design-sprite.svg'); *\/\n width: 16px;\n height: 16px;\n display: inline-block;\n content: ' ';\n opacity: .9;\n}\nfooter span:hover {\n opacity: 1;\n}\nfooter span.twitter-link-footer {\n background-position: 0px 0px;\n margin-right: 15px;\n}\nfooter span.fb-link-footer {\n background-position: -16px 0px;\n margin-right: 15px;\n}\nfooter span.instagram-link-footer {\n background-position: -32px 0px;\n}\nfooter .copyright {\n font-weight: 600;\n font-size: 14px;\n color: #858585;\n display: inline-block;\n padding: 22px 0px 17px;\n margin: 0 auto;\n}\nfooter .copyright + a {\n display: inline-block;\n margin-left: 15px;\n margin-right: 15px;\n}\nfooter .copyright + a,\nfooter .copyright + a + a {\n font-weight: 600;\n font-size: 14px;\n color: #0E4074;\n}\n.footer{\n bottom: 0px;\n height: px;\n position: relative;\n}<\/pre>\nThe Above code explains itself how we can use a component inside another component with states and events and props as well.<\/span><\/p>\n
The below screenshot shows how it looks when your app finally run on local using node.<\/p>\n
If you require expert assistance or want to develop custom unique functionality, hire WooCommerce Developers<\/a>.<\/p>\n
![\"Webkul](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/React-App.jpg\")
<\/a><\/p>\n![\"Add](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/03\/React-App-1.jpg\")
<\/a><\/p>\nIf you have any query regarding this blog you can comment below thanks for your time<\/p>\n
Do check the github link here : – Github Link<\/strong><\/em><\/span><\/a>.<\/p>\n
\nSupport<\/h3>\n<\/div>\n
\nFor any technical assistance kindly\u00a0\u00a0raise\u00a0a ticket<\/a> or\u00a0reach\u00a0us by email at\u00a0support@webkul.com.<\/p>\n
Also, discover various solutions to add more features and enhance your online store by visiting the\u00a0WooCommerce plugins<\/a>. React Native App Development<\/a> by Webkul converts your WooCommerce store into a fast, fully functional mobile app with real-time updates and native performance.<\/p>\n
Thanks for Your Time ! Have a Good Day !!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"