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'smethod
,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
- 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
Project Ideas
Tools
- Code Sandbox
- CodePen
- Glitch
- Plain HTML doc with embedded React