Back to Top

Building Apps on React With Woocommerce

Updated 17 April 2024

In just few couple of years javascript has evolved so well that the last 5 years for javascript has been PEERLESS.  As of the small intro with JS, we enhanced the web interface. It added behavior to the web page, where the web page responds to a user instantly without loading a new page to process a request.

If you require expert assistance or want to develop custom unique functionality, hire WooCommerce Developers for your project.

But it is now way different than earlier it was, So today we will discuss about REACT library for creating front end web applications. We will start with basics and then we will move with some live examples as well.

You can find the whole react app repository on github

Github Link
Basics aspects of react applications are

  • components
  • state
  • props

React works on Virtual DOM can be used to create fast single page applications ,  react supports unidirectional data flow, this means that each time we are updating the state only, and the component will be updated automatically, 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.

Searching for an experienced
Woocommerce Company ?
Find out More

Whereas in react there are reusable components which will only be updated if and only if the state of that component is updated. In this way only part of the app is updated, not the whole DOM. for now we will only build the app only using these later on other blogs we will create application with redux(for maintaining state of apps for large application)

In React, for every DOM object, there is a corresponding “virtual DOM object.” A virtual DOM object is a representation 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.

Please check these below requirements in order to create a basic localstorage react app. BABEL is basically used to transpiling the REACT code into javascript .

you must have basic knowledge of these  for creating the app

  • html
  • css
  • javascript (ECMAScript version 2015)
  • npm
  • node
  • webpack
  • babel(Basic knowledge)

Step 1:-create basic react app using create-react-app package from npm

You can find the basic app create commands from here Basic react app

<span class="token function">npm</span> <span class="token function">install</span> -g create-react-app
create-react-app localstorage-app

<span class="token function">cd</span> localstorage-app

Now type :- npm start

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

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

step 3 :- Start editing App.js

import React, { Component } from 'react';
import Header from './component/header';
import ProductItem from './component/productitem';
import AddProduct from './component/addproduct';
const products = [
  {
    name: 'Apple',
    price : 23.00,
    img: 'apple.png'
  },{
    name: 'shorts',
    price : 123.00,
    img: 'capree.png'
  },
  {
    name: 'Blazer',
    price : 232.00,
    img: 'blazer.png'
  },{
    name: 'jeans',
    price : 223.00,
    img: 'jeans.png'
  },{
    name: 'Laptop',
    price : 2223.00,
    img: 'laptop.png'
  },{
    name: 'Crowd',
    price : 12113.00,
    img: 'crowd.png'
  },{
    name: 'Jacket',
    price : 4523.00,
    img: 'jaket.png'
  },{
    name: 'Asus',
    price : 313.00,
    img: 'asus.png'
  }

];

localStorage.setItem('products',JSON.stringify(products));

class App extends Component {
  constructor(props){
    super(props);
    this.onDelete = this.onDelete.bind(this);
    this.onAdd = this.onAdd.bind(this);
    this.onEditSubmit = this.onEditSubmit.bind(this);
  }
  state = {
    products:JSON.parse( localStorage.getItem('products') )
  }
  componentWillMount() {
    const products = this.getProducts(); 
    this.setState({products})
  }
  onDelete(name){
    const products = this.getProducts();
    const filtered = products.filter( product => {
        return product.name !== name;
    });
   
    this.setState({products:filtered});
  }

  onAdd( name, price, img ) {
    // console.log(name);
    const new_product = {
      name: name,
      price: price,
      img: img
    }
    const products = this.getProducts();
    products.push(new_product);
    
    this.setState({products:products});
  }

  onEditSubmit( name, price, orignalName ) {
    
    const products = this.getProducts();
    const filteredProducts = products.map( product => {
      if( product.name == orignalName ) {
        product.name = name;
        product.price = price;
      }
      return product;
    });
   
    this.setState({products:filteredProducts});
  }

  getProducts(){
    return this.state.products;
  }

  render() {
    
    return (

      <div className="App">
        
        <Header />    
        <div className="container">
        
          <div className="row">
            <div className="col-md-12">
                <div className="add-new-product">
                  <AddProduct
                  onAdd={this.onAdd}
                  />
                </div>
            </div>
          </div>

          <div className="row">
           <div className="col-md-12">
            {
              this.state.products.map( product => {
                return (
                  <ProductItem
                    key={product.name}
                    {...product}
                    onDelete={this.onDelete}
                    onEditSubmit={this.onEditSubmit}
                    onAdd={this.onAdd}
                  />        
                )
              })
            }
            </div>
           </div>
        </div>
      </div>
    );
  }
}

export default App;

step 4 :- component/addproduct.js

import React, { Component } from 'react';


class AddProduct extends Component {
  constructor(props){
    super(props);
    this.AddNewProduct = this.AddNewProduct.bind(this);

  }
  
  AddNewProduct(evt){
      
      evt.preventDefault();
      const name = document.getElementById('productName').value;
      const price = document.getElementById('productPrice').value;
      const img = document.getElementById('productImage').value;
    
      if( name && parseInt( price ) && img ) {
          
        this.props.onAdd( name, price, img );
        
        document.getElementById('productName').value = '';
        document.getElementById('productPrice').value = '';
        document.getElementById('productImage').value = '';

      } 

  }
  render() {

    return (
      <form onSubmit={this.AddNewProduct}>
        <div className="add-product-wrap">
          <h2 className="text-capitalize">Add new Product</h2>
        
          <input type="text" name="productName" id="productName" placeholder="Add product name" /> 
          <input type="text" name="productPrice" id="productPrice" placeholder="Add product price" /> 
          <input type="text" name="productImage" id="productImage" placeholder="Add product image name" /> 
          <button type="submit">Add Product</button>
          
        </div>
       </form>   
    )
  }
}

export default AddProduct;

Step 5 :- component/header.js

import React, { Component } from 'react';
import './App.css';

class Header extends Component {
  
  render() {

    return (
      <header>
        <div className="container fixed-top">
            
          <div className="row">

              <div className="col-md-12">

                  <h2 className="text-center tagline white">Webkul Products Demo using React</h2>

              </div>

          </div>

        </div>

      </header>

    );
  }
}

export default Header;

Step 6 :- component/productitem.js

import React, { Component } from 'react';


class ProductItem extends Component {
  constructor(props){
    super(props);
    this.state = {
      isEdit : false
    }
    this.onDelete = this.onDelete.bind(this);
    this.onEdit = this.onEdit.bind(this);
    this.onEditSubmit = this.onEditSubmit.bind(this);
  }
  onDelete(){
    this.props.onDelete(this.props.name);
  }
  onEditSubmit(evt){
    evt.preventDefault();
    const name = document.forms["editForm"]["EProductName"].value;
    const price = document.forms["editForm"]["EProductPrice"].value;
    
    if( name && parseFloat( price ).toFixed(2)  ) {
        
      this.props.onEditSubmit( name, price, this.props.name );
      this.setState({
        isEdit:false
      });
      document.forms["editForm"]["EProductName"].value = '';
      document.forms["editForm"]["EProductPrice"].value = '';

    }
  }
  onEdit(){
    this.setState({isEdit:true});
  }
  render() {
    const { name, price, img, onDelete } = this.props;
    const imgUrl = require('../images/asus.png');
    
    return (
      <div key={name} className="productitems">      
        {
          this.state.isEdit 
          ? (
            <div>
              <form name="editForm" onSubmit={this.onEditSubmit}>            
                <div className="editor">
                  <img src={imgUrl} alt={name} />
                  <button className="DefProduct">x</button>                                                        
                  
                </div>
                <div className="product-wrap extraclass">
                  <input type="text" name="EProductName" defaultValue={name} ref={nameInput=>this.nameInput=nameInput}/> 
                  <input type="text" name="EProductPrice" defaultValue={parseFloat(price).toFixed(2)} ref={ priceInput => this.priceInput = priceInput} /> 
                </div>
                <button className="saveProduct">Save</button>                                                        
              </form>
            </div>
          ) 
          : (
            <div>
              <div className="editor">
                <img src={imgUrl} alt={name} />
                <button onClick={this.onEdit}>Edit</button>           
              </div>
              <div className="product-wrap">
                <h2>{name} </h2> 
                <span>{'+parseFloat(price).toFixed(2)} </span> 
              </div> 
              <button onClick={this.onDelete}>Delete</button>
            </div> 
          ) 
        } 
      </div> 
    ) 
  } 
} 
export default ProductItem;

Step 7 :- component/App.css

.App {
  text-align: center;
}
.add-product-wrap{
  background-color: #f4f4f4;
  padding: 30px;
}
.add-product-wrap input{
  font-size: 16px;
  font-weight: 600;
  color: #888888;
  padding: 10px;
  width: 450px;
  border-radius: 4px;
  border: 2px solid #cccccc;
  margin: 10px 10px;
  display: inline-block;
}
.add-product-wrap button{ 
    margin: 20px 8px 10px 0px;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #ef7742;
    color: #ffffff;
    height: 48px;
    border: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-left: -1px;
    font-weight: 600;
    text-transform: uppercase;
}
.editor{ 
  position: relative;
  display: block;
}
.editor:hover{ 
  background: rgba(0,0,0,.5);
}
.editor button:focus{ 
  border: none;
  outline: none;
}
.editor button{ 
  display: none;
  position: absolute;
  top: 10px;
  left: 5px;
  width: 50px !important;
  height: 50px;
  border-radius: 50%;
  font-size: 15px !important;
}
.editor:hover button{
  display: inline-block;
}
.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}
.white{
  color: #fff;
}
.react-contact{
  color: #555;
  font-size: 18px;

}
.productitems{
  list-style: none;
  margin-left: 0;
  margin-bottom: 4.235801032em;
  text-align: center;
  display: inline-block;
  width: 300px;
  max-width: 100%;
  box-shadow: 0 5px 32px 0 rgba(0,0,0,.15);
  border-radius: 2px;
  overflow: hidden;
  margin: 40px 20px 40px 20px;
  vertical-align: top;
}
button.DefProduct{
  display: inline-block;
  font-size: 24px !important;
  width: 40px !important; 
  height: 40px;
  padding: 0px !important; 
}
.productitems .product-wrap{
  padding:20px 20px 0px;	
}
.productitems button{
  background-color: #7d3f71;
  border:none;
  color: #ffffff;	
  width:100%;
  display:inlie-block;
  margin:0px;
  padding: 10px;
  font-size: 17px;
}
.productitems h2{
  color: #6d6d6d;
  margin:8px 0px 10px;
  font-size:20px;	
  display:block;
  text-transform:capitalize;
}
.productitems span{
  color: #6d6d6d;
  margin:0px 0px 10px 0px;
  font-size:15px;	
  display:inline-block;
}
.product-wrap input{
  padding: 5px;
  margin: 11px 5px 0px;
  border: 1px solid #ddd;
}
.extraclass{
  padding-top: 0px !important;
}
.product-wrap input:last-child{
  margin-bottom: 5px;
}
.page{
  background: #d5d5d5;
  padding: 50px;
  display: block;
  margin: 100px auto !important;
}
p{
  color: #333;
}
h1{
  color: #333;
}
.navbar a{
  color: #fff;
  display: inline-block;
  margin: 5px 25px;
}
header {
  background-color: #07365d;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.white {
  color: #fff;
}
/* ---Pagination End--- */
/* ---Footer Section--- */
footer {
  background-color: #ffffff;
}
footer p.footer-social-links {
  margin: 26px 0px 17px;
  text-align: right;
}
footer span {
  /* background-image: url('images/design-sprite.svg'); */
  width: 16px;
  height: 16px;
  display: inline-block;
  content: ' ';
  opacity: .9;
}
footer span:hover {
  opacity: 1;
}
footer span.twitter-link-footer {
  background-position: 0px 0px;
  margin-right: 15px;
}
footer span.fb-link-footer {
  background-position: -16px 0px;
  margin-right: 15px;
}
footer span.instagram-link-footer {
  background-position: -32px 0px;
}
footer .copyright {
  font-weight: 600;
  font-size: 14px;
  color: #858585;
  display: inline-block;
  padding: 22px 0px 17px;
  margin: 0 auto;
}
footer .copyright + a {
  display: inline-block;
  margin-left: 15px;
  margin-right: 15px;
}
footer .copyright + a,
footer .copyright + a + a {
  font-weight: 600;
  font-size: 14px;
  color: #0E4074;
}
.footer{
    bottom: 0px;
    height: px;
    position: relative;
}

The Above code explains itself how we can use a component inside another component with states and events and props as well.

The below screenshot shows how it looks when your app finally run on local using node

If you have any query regarding this blog you can comment below thanks for your time

Do check the github link here : – Github Link.

Support

For any technical assistance kindly  raise a ticket or reach us by email at [email protected]. Thanks for Your Time! Have a Good Day!

Also, discover various solutions to add more features and enhance your online store by visiting the WooCommerce plugins.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content