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

• API Documentation

Syntax

• Framer React Syntax Guide
• Dev.to post with Syntax references

React Official Documentation

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

• If the documentation is too deep: Overview by Tania Rascia
• React for Designers: Points to other resources
• To learn more JavaScript; a 30 minute review of JavaScript
• Learn by doing: build a tic-tac-toe game
• Step-by-step guide

Videos

• Skillshare Videos

Backend Tutorials

• Building a CRUD app with Node and React
• React, NodeJS, MySQL full stack app tutorial

Project Ideas

• 9 Front-end Project Ideas
• React Beginner Project Ideas

Tools

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