npx create-react-app PROJECT NAME // make sure node is installed and go to the folder you want to create the project // go to the created project directory npm start useEffect(() => { console.log(`Its ${emotion} right now.`); }, [emotion]) // if the 2nd argument is gone( the array), the effect happens eveytime the emotion changes. //If we put the [] and leave it blank, the effect only happens once // if we put a variable inside, it is listening to the change of the variable and will execute every time there is a change on the variable emotion. It is called the dependency array. // creating a checkbox with useState function App() { const [checked, setChecked] = useState(false); return ( <div className="App"> <input type="checkbox" value={checked} onChange={ () => setChecked(!checked)}/> <label>{checked ? "checked": "unchecked"}</label> </div> ); } // Creating a checkbox with useEffect function App() { const [checked, setChecked] = useReducer((checked) =>(!checked), false); return ( <div className="App"> <input type="checkbox" value={checked} onChange={setChecked}/> <label>{checked ? "checked": "unchecked"}</label> </div> ); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter