Step 1:

Place <button> on page, test interactivity via console.log

return 
<button onClick={ 
    () => console.log("click")
}>
    Tell me a joke
</button>;

Step 2:

Create a function called onTellJoke and connect it to the <button>

const onTellJoke = () => {
    console.log("clicked");
}  
return <button onClick={onTellJoke}>Tell me a joke</button>;

Step 3:

Add an API call into function. 

const onTellJoke = () => {    
    fetch('https://icanhazdadjoke.com/', {      
        method: 'GET',      
        headers: {        
            Accept: 'application/json'      
        }   
    })      
        .then(response => response.json())      
        .then(json => console.log(json));  
}

Questions

  • What does () => mean?
  • In Step 3: how does the fetch function work? There's method, headers, accept, and the two .then() functions

Syntax

// Function component
function Welcome(props){
    return <h1>Hello, {props.name}</h1>
}

// Class component
class Welcome extends React.Component{
    render(){
        return <h1>Hello, {this.props.name}</h1>
    }
}

Resources

Framer Learning Guides

Syntax

React Official Documentation

Getting Started points to several resources based on code comfort and learning modes

Videos

  • Skillshare Videos

Backend Tutorials

Project Ideas

Tools

  • Code Sandbox
  • CodePen
  • Glitch
  • Plain HTML doc with embedded React