Building Apps on React With Woocommerce

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.

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.

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.

Also, you can visit WooCommerce React Development to enhance your online store with React headless development services or to create Progressive Web App (PWA).

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

npm install -g create-react-app 
create-react-app localstorage-app 

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 require expert assistance or want to develop custom unique functionality, hire WooCommerce Developers.

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

Do check the github link here : – Github Link.