Cacher is the code snippet organizer for pro developers

// SearchBar Component with a function (functional component)
// Don't have states

import React from 'react';

const SearchBar = () => {
  return <input />; // JSX
};

export default SearchBar;

// SearchBar Component (class component) 
// have an internal record key - ability to tell other part of the application
// what the user is doing like enter text on the input
// es6 class javascript object with properties and methods to it

import React from 'react';

// Aditional functionality- have states
class SearchBar extends React.Component { // object
  render(){ // define methods(function) on a clas render(){}
    return <input />; //return JXS
  }  
}

export default SearchBar;


// cleaner with es6 syntax

import React, { Component } from 'react';
// is doing const Component = React.Component;

class SearchBar extends Component { // object
  render(){ // define methods(function) on a clas render(){}
    return <input />; //return JXS
  }  
}

export default SearchBar;


// Functional vs class component
// Start with a functional component and if you need more functionality
// convert to a class

// index.js

import React from 'react';
import ReactDOM from 'react-dom';

import SearchBar from './components/search_bar';

// create a new component
const App = () => {
  return (
    <div>
      <SearchBar/>
    </div>
  );
}

// Tahke this component's generated HTML snd put it on the page (in the DOM)
ReactDoM.render(<App/>, document.querySelector('container'));