React JS Code Challenge | React Beginner Project

With this React JS Code Challenge, you will apply the skills you have learned from the previous lessons in this Learn React playlist. The challenge is to build a simple color changer app with React.

🚀 This lesson is part of a Learn React tutorial series playlist:

React JS Code Challenge | React Beginner Project

(00:00) Intro
(00:05) The Code Challenge: Your First Project
(01:29) Begin Solution: create-react-app and set up
(04:35) Outlining the app components
(06:41) The square component
(09:02) The form input component
(11:19) useState hook and passing props
(12:56) Adding CSS styles
(14:51) Challenge Complete! How did you do?
(15:28) Additional Feature: Color Names to Hex Values
(20:12) Additional Feature: Toggle Text Color

🔗 ES7 React JS Snippets Extension for VS Code:

🔗 React Dev Tools Extension for Chrome:


📚 References:

✅ Follow Me:

Was this React Beginner Project and Code Challenge helpful? If so, please share. Let me know your thoughts in the comments.

#react #beginner #project

[DaveGrayTeachesCode]

In this React code challenge, you will apply the skills you have learned in the previous React tutorials (playlist in description). You will need to create your React app, build functional components, use state, pass props, apply styles, and create a controlled component. If you are just starting out with React, I recommend going to the beginning of the tutorial playlist and working your way here.🚀

[ayaanmohamed]

This is the greatest series I have watched. Thank you so so much. I hope your year is off to a great start and that you keep it coming 👍🏽

[blaircfleming]

This was a lot of fun Dave, a great opportunity to put all the previous episodes of learning into practice. Hope to do more of these!

[jacdav]

Great series! I listened to most of the series and am now going back through and completing the project. Nice touch having some challenge activities to recap what we've learned.

[kevingrove]

After finishing this first half of your tutorial Mr. Dave I can say I am finishing the series and finally caving into learning React. I may not have made mine as nice as your's but we had the same function. Thank you very much for making this series.

[menelikmichael]

Thanks really makes all the learning process fun.

[abdulrahmanagboolaosho]

I made a few mistakes when I did it my self, my app was showing a blank page for some reason, but after seeing yours I have corrected them.
Thanks so much.

[zakariachajia]

things starts to make sense now still running the marathone gonna finish this playlist fast

[pavlinapsarsky]

Hello Dave, great tutorials, I was ready for this challenge and made it by myself. Thank you!

[harag]

Great challenge, I got most of it working but went about it slightly different by putting the input change handle in the app and passing it down, so basically forgot about this "controlled input". After watching the rest I added to the input a "useRef" then in the button after toggling made the input selected and focused ready for the user to type another colour.

[luckyjain]

Dave my bro I don't have words to thank you.

Solution to this project from my side:-

import { useState } from 'react';
import './App.css';

function App() {

const [color, setColor] = useState('white')


return (
<>
<div className="row justify-content-center align-items-center pt-5">
<div style={{ height: "200px", background: `${color}` }} className="col-lg-3 rounded-3 border border-dark">
{color}
</div>
<div className="col-lg-3">
<input
type="text"
value={color}
onChange={(e)=> setColor(e.target.value)}
name="color"
id="color"
className="form-control" />
</div>

</div>

</>

);
}

export default App;

[noir]

Very good tutorial. I finished it in 15 minutes - but I had skipped the text with the hexas. That npm-package is brilliant. I'll apply that now. This aside, my code was very close to yours. I'm very happy about it.

[maestrogoldring]

Oh my gosh, why was this so hard? I managed to complete it, but I feel like it took way too long. Thanks for the tutorials though! Working my through (and managed to complete without cheating) this video in 2024

[mortezarostami]

This channel is great.
Thanks for all the work.

[jesuswalks]

Thanks for the previous project, let's do the next)

[bjornhellgate]

Another way of getting around the dark text problem is using the glorious impact font :P

[ahmadkhaled]

Very informative and helpful. Thanks a lot

[drivertoursexperience]

I tryed to make something like take the hex color value and convert to decimal to compare the value and make the text color change automatic in contrast with the box color, i did it some how but i don't know if theres another better way to do it

[suryasujit]

thank you so much for our work sir.I like ur videos

[vrlassiter]

Hey Dave, Great stuff! I love your tuts and became a subscriber after the first one I watched.
Question - Can't you just start typing "rafce" in the file page and get the snippet shortcut without having to type "ctrl + alt + r" to get to an input and then having to type "_rafce"? Mine does that in VSCode.