React curriculum

React practice

Short exercises. Try them first, open the hint if you are stuck, and the solution last.

Exercise 1
Greeting component
Create a Greeting component that takes a name prop and shows Hello, NAME. Use it twice in App.
Your solutionReact
Editable codefunction Greeting() { // your code } function App() { return ( <div> <Greeting /> </div> ); }
Ctrl+Enter to run
Exercise 2
Toggle switch
Make a button that toggles between ON and OFF using useState.
Your solutionReact
Editable codefunction App() { // your code return <button>OFF</button>; }
Ctrl+Enter to run
Exercise 3
Live character count
Show how many characters the user has typed below a text input.
Your solutionReact
Editable codefunction App() { // your code return ( <div> <input /> </div> ); }
Ctrl+Enter to run