In this beginner react project you can try to build the app before following along with the tutorial and seeing how I do it!

What we’ll learn:

• How to set up a React project
• Using state to display values
• Changing CSS depending on state
• Updating state using onClick events

🚨 🚨 Finished CodeSandbox:

---

What we’re building

In this beginner React project, we’re going to learn how to use state hooks, handle events, apply CSS based on state, and more! Check it out:

Try it yourself

If you want to have a go yourself first, here are the scenarios (you can also grab the CSS/starter code below):

• When the user clicks the “increase button”, the temperature should increase
• The temperature cannot go above 30
• When the user clicks the “decrease button”, the temperature should decrease
• The temperature cannot go below 0
• When the temperature is 15 or above, the background color should change to red (HINT: I’ve included a style called “hot” you can use)
• When the temperature is below 15, the background color should be blue (HINT: I’ve included a style called “cold” you can use)

Setup/Starter code

NOTE: I’m assuming you have a React development environment setup. If not, check out this video to help you get started.

All we need to get started is to use create-react-app. Fire up a terminal and run:

npx create-react-app temperature-control

Let the terminal do its thing and open up the project in VS Code (or whatever you use).

Next, go into index.js, delete everything, and paste in the following:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
	document.getElementById('root')
);

Go into index.css, delete everything, and paste in the following:

body {
	font-family: sans-serif;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 100vh;
}

.app-container {
	height: 400px;
	width: 300px;
	background: #2b5870;
	border-radius: 20px;
	box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.75);
}

.temperature-display-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 70%;
}

.temperature-display {
	display: flex;
	border-radius: 50%;
	color: #ffffff;
	height: 220px;
	width: 220px;
	text-align: center;
	justify-content: center;
	align-items: center;
	font-size: 48px;
	border: 3px #ffffff solid;
	transition: background 0.5s;
}

button {
	border-radius: 100px;
	height: 80px;
	width: 80px;
	font-size: 32px;
	color: #ffffff;
	background: rgb(105, 104, 104);
	border: 2px #ffffff solid;
}

button:hover {
	background: rgb(184, 184, 184);
	cursor: pointer;
}

button:focus {
	outline: 0;
}

.button-container {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

.neutral {
	background: rgb(184, 184, 184);
}

.cold {
	background: #035aa6;
}

.hot {
	background: #ff5200;
}

Lastly, go into App.js, delete everything, and paste in the following:

import React from 'react';

const App = () => {
	return (
		<div className='app-container'>
			<div className='temperature-display-container'>
				<div className='temperature-display'>10°C</div>
			</div>
			<div className='button-container'>
				<button>+</button>
				<button>-</button>
			</div>
		</div>
	);
};

export default App;

Now we can open a terminal in VS Code and run the following:

npm start

If all went as planned, you should see the following:

Hurray! This gives us a nice template to play with, without having to worry about any CSS.

Read more: https://www.freecodecamp.org/news/react-beginner-project-tutorial-temperature-control-app/

#react #javascript #web-development #developer