BretCameron

$('h1') // This selects every <h1> element
$('#main') // This selects an element with the ID 'main'
$('.open') // This selects every element with the class 'open'
$("[color='blue']") // This selects every element with an attribute 'color' equal to 'blue'

BretCameron

$('.app').click(function() {
  alert('Click successful!');
});

BretCameron

$('.app').on('click', function() {
  alert('Click successful!');
});

BretCameron

import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <p style={{ fontSize: '100px', cursor: 'pointer' }}>Click Me!</p>
      </header>
    </div>

BretCameron

const handleClick = () => {
  alert("Click Successful!");
};

BretCameron

import React from 'react';
import './App.css';

const App = () => {
  const handleClick = () => {
    alert("Click Successful!");
  };
  return (
    <div className="App">
      <header className="App-header">

BretCameron

const handleClick = (e) => {
  console.log(e.currentTarget);
};

BretCameron

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { skin: 'night' };
  }
  
  render() {

BretCameron

.day > .App-header {
  color: #111;
  background: #fff url(http://pluspng.com/img-png/sun-png-clear-background-download-547.png) no-repeat;
  background-size: 200px;
  background-position: 50% 20%;
}

.night > .App-header {
  color: #fff;
  background: #111 url(https://i2.wp.com/freepngimages.com/wp-content/uploads/2016/11/super-moon.png?fit=624%2C624) no-repeat;

BretCameron

changeSkin() {
  const newState = this.state;
  this.state.skin === 'night' ? newState.skin = 'day' : newState.skin = 'night';
  this.setState(newState);
}