React Basics - Snippets 1

React Basics: Snippets 1

Some common ReactJS code (and some plain old Javascript) code snippets.
I keep these files open and handy to simply copy and paste into my React files as needed.

App.js: State/Events/Arrow functions (inline)

A simple App.js file with the following:
  • useState() for tracking the ever popular counter application
  • Use of an inline arrow function during an onClick event, as well as calling a function
  • Displaying, and resetting a value stored in state
import React from 'react';

function App() {
  const [count, setCount] = React.useState(0); 
    
  function increment() {
      setCount(() => count + 1)
  }  
  /* function decrement() {
      setCount(() => count - 1)
  } */ 

  return (
    <div>
      <header>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={() => {setCount(() => count-1)}}>Decrement</button>
      </header>
    </div>
  );
}

export default App;



Link your website to this page! Copy and paste the URL below:
http://www.cfsnap.com/react/react-basics-snippets1/