Designer023

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello React!</h1>
      </div>
    );
  }

Designer023

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />

Designer023

npm install -g create-react-app
create-react-app react-01
cd react-01/
npm start

Designer023

var data = {
        labels: ["M", "T", "W", "T", "F", "S", "S"],
        datasets: [{
            data: [1,2,3,3,2,5,4],
            backgroundColor: 'rgba(200,100,100,1)'
          },
          {
            data: [4,3,2,5,2,7,4],
            backgroundColor: 'rgba(100,200,200,1)'
          }]

Designer023

//Scroll Top button
$(document).ready(function() {
    var scroll_up_button = $('<span class="scroll-up-button"><i class="fa fa-chevron-up"></i></span>');
    $('body').append( scroll_up_button );



    var timer;

    $(window).scroll(function() {

Designer023

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    del = require('del'),

    plugins = gulpLoadPlugins({
      rename: {
        'gulp-util': 'gutil',
        'gulp-minify-css': 'minifyCSS',
        'gulp-sass' : 'sass'
      },

Designer023

How to google things:

These will often give similar results, however for less common searches the proper formatting works far better

Format:

[environment] [element] [property|feature] [argument]

Examples - Good

Designer023

.wrapper {
  //Default
  display: flex;
  
  //Firefox >= 27 : Does not support flex-wrap or flex-flow properties
  @supports not (flex-wrap: wrap) {
    > * { display: inline; }
  }
  
  

Designer023

// Comments in Sass can be written with a double slash. These don't appear in the outputted CSS
/* Comments done in the CSS style will still be compiled to the resulting CSS */

// Styles that would have to be written out repetedly by hand can be nested
.base-class {
  display: block;

  .sub-class {
    display: block;

Designer023

<!-- Template & hardcoded classes -->
<span>BAD</span>
<div>BAD</div>
<h1>BAD</h1>
<div class="some-class">
  <div>
    <div>
      <span>BAD</span>
    </div>
  </div>