ReactJS Code snippets #react #routes #gitignore #snippets #reactjs

Basic Material UI Component

import React, { Component } from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";
import { withStyles } from "@material-ui/core/styles";
import compose from "recompose/compose";
import { connect } from "react-redux";
import Typography from "@material-ui/core/Typography";

const styles = theme => ({});

class MyComp extends Component {

    constructor(props) {
        super(props);
        this.state = {
        }
    }

    render() {
        const { classes, note } = this.props;
        return (
            <div>
                <div className="section-preview-row">

                    <Typography className="section-preview-heading">
                        {note.content}
                    </Typography>

                </div>
            </div>
        );
    }

}

MyComp.propTypes = { classes: PropTypes.object.isRequired, };

const mapStateToProps = state => ({});

export default compose(
    withRouter,
    withStyles(styles),
    connect(mapStateToProps)
)(MyComp);

JSONSumTotal

// SOURCE: https://stackoverflow.com/a/47859063/3436775

const json = [{
    "id" : "001",
    "item" : "samsung",
    "quantity" : 1,
    "price" : 300,

},
{
    "id" : "002",
    "item" : "iphone",
    "quantity" : 2,
    "price" : 450,

}];

const total = json.map(({quantity, price}) => quantity * price)
                  .reduce((a, b) => a + b)
console.log(total)

// OUTPUT : 1200

routes.js

import React from 'react';
import {Route, IndexRoute}  from 'react-router';
import Template from './components/template';
import HomePage from './components/home/HomePage';
import AboutPage from './components/about/AboutPage';
import CoursePage from './components/courses/CoursePage';

export default (
    <Route path="/" component={Template}>
       <IndexRoute component={HomePage} />
       <Route path="about" component={AboutPage} />
       <Route path="courses" component={CoursePage} />

    </Route>
);