Skip to content

Instantly share code, notes, and snippets.

View anghelalexandra's full-sized avatar

Alexandra Anghel anghelalexandra

View GitHub Profile
@anghelalexandra
anghelalexandra / rn-react-component.js
Created May 14, 2018 20:36
iOS and Android apps with React Native - React Component
import React from 'react';
import PropTypes from 'prop-types';
class ExampleWebComponent extends React.Component {
render() {
return (
<div className="w100">
<div className="menuTitleWrap">
<img src={this.props.url} className="shadowImage" alt="" />
</div>
import React from "react";
import { connect } from "react-redux";
import { fetchProducts } from "./actions";
import ProductsList from "./ProductsList";
class Products extends React.Component {
componentWillMount() {
const { dispatch } = this.props;
dispatch(fetchProducts());
}
import config from "./config";
export const requestProducts = () => ({
type: "REQUEST_PRODUCTS"
});
export const receiveProducts = products => ({
type: "RECEIVE_PRODUCTS",
products
});
@anghelalexandra
anghelalexandra / categories-component.js
Created October 19, 2017 08:14
Reading a list of categories from the API in a React component
import React, { Component } from "react";
import config from "./config";
import CategoriesList from "./CategoriesList";
class Categories extends Component {
constructor(props) {
super(props);
this.state = {
categories: []
import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import categories from "./views/Categories/reducer";
import products from "./views/Products/reducer";
const rootReducer = combineReducers({ categories, products });
const defaultState = {};
const store = createStore(rootReducer, defaultState, applyMiddleware(thunk));
<!DOCTYPE HTML>
<html manifest="" <?php language_attributes(); ?>>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<!-- load other meta tags here -->
<title><?php echo get_bloginfo("name");?></title>
import React from "react";
import { connect } from "react-redux";
import ProductCard from "./ProductCard";
class ProductsList extends React.Component {
render() {
const list = this.props.products.map(element => (
<ProductCard
key={element.id}
src={element.images[0].src}
import { combineReducers } from "redux";
const productsReducer = (state = [], action) => {
switch (action.type) {
case "REQUEST_PRODUCTS":
return state;
case "RECEIVE_PRODUCTS":
return action.products;
default:
return state;
<script>
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log("Service Worker Registered"); });
}
</script>
@anghelalexandra
anghelalexandra / index.php
Last active June 11, 2017 06:32
wp-pwa-sample-index-file
<!DOCTYPE HTML>
<html manifest="" <?php language_attributes(); ?>>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-capable" content="yes" />