How to Build Counter App in React [DETAIL COURSE]

FOR MORE FREE AND DETAIL COURSES, PLEASE GO TO HTTPS://CODECOURSES.SITE



Desk of Contents



1. About Code Programs

Code Courses is an internet site the place folks find out about coding and completely different applied sciences/frameworks/libraries. For the aim of serving to folks be taught, all the programs are FREE and DETAIL. For that reason, Code Programs consider that you don’t want to purchase any programs on the market. Hopefully, after following the content material on Code Programs, one can find your dream jobs, and construct any functions that you really want.



2. Stay Demo

After we end this course, the ultimate output will likely be like this:


If you wish to discover the total supply code, you’ll be able to seek advice from this Github link.



3. Takeaway Expertise

We will construct the Counter software and perceive methods to apply React to create a real-life undertaking. We will embrace this undertaking in our profiles. It will assist us lots to find a software program engineer job. Apart from that, we are able to construct different associated functions with the talents we’ll get from this course.



4. Course Overview

As we see from the above picture, we could have two buttons – enhance and reduce. However, we even have a label that will likely be used to display the present end result. After the customers click on on the rise button, the present end result will likely be elevated by 1. Apart from that, if the customers click on on the lower button, the present end result will likely be decreased by 1.

After ending this course, we are able to perceive methods to apply React to construct a real-life undertaking.



5. Conditions



5.1. Softwares

  • Set up NodeJS.
  • An IDE or a textual content editor (VSCode, Intellij, Webstorm, and so on).



5.2 Technical Expertise

  • Fundamental programming abilities.
  • Fundamental HTML, CSS, JS, React abilities.



6. Creating the React Venture

In actual fact, now we have a number of methods to create a brand new React undertaking resembling importing the React library from CDN hyperlinks or utilizing current boilerplates/templates on the market. On this case, we’ll create our React undertaking through the use of the Create React App

Create React App is a cushty surroundings for studying React and is one of the best ways to begin constructing a brand new single-page software in React. It units up your improvement surroundings as a way to use the most recent JavaScript options, gives a pleasant developer expertise, and optimizes your app for manufacturing.



6.1. Create React Counter App

On this state of affairs, to create our React counter app undertaking, we have to observe the under steps:

  • Step 1: We’ll have to have Node >= 14.0.0 and npm >= 5.6 on our machine. In case, If now we have not put in Node.js, please click on on the above hyperlink and observe its documentation.

  • Step 2: To be able to ensure that now we have put in Node.js on our laptop. Therefore, please open your terminal/cmd/energy shell and run the next assertion.

node -v
Enter fullscreen mode

Exit fullscreen mode

The end result ought to be like this v16.10.0.

16.10.0 is the Node.js model on my laptop. Nonetheless, it might be completely different in your laptop, relying on which model you might have put in.

  • Step 3: After now we have put in Node.js on our laptop. On our terminal, we have to use the under statements. 
npm set up -g create-react-app
Enter fullscreen mode

Exit fullscreen mode 

create-react-app your-app-identify
Enter fullscreen mode

Exit fullscreen mode

As well as, we have to change your-app-name with the actual identify of our software. On this case, we wish to construct a counter app. For that reason, we’ll change your-app-name with counter-app. In conclusion, now our last assertion ought to appear like this:

create-react-app counter-app
Enter fullscreen mode

Exit fullscreen mode

  • Step 4: In any other case, we have to wait till the method is completed. After that, our end result ought to appear like this:

Create a new React project

  • Step 5: Now we are able to attempt to run our software. On the identical terminal, please cd to your undertaking folder. 
cd counter-app
Enter fullscreen mode

Exit fullscreen mode

  • Step 6: Following that, please run the under assertion to begin our React undertaking. 
npm run begin
Enter fullscreen mode

Exit fullscreen mode

Our end result ought to appear like this

Run the created React project



7. Structuring the Venture

On the whole, we’ll discuss how we construction our undertaking. In another tutorials, we may even see that these tutorials will inform you to retailer each element within the src folder or develop the whole lot in these recordsdata with out caring about some greatest practices and ideas. For instance, we do not wish to violate the DRY precept, DRY stands for do not repeat your self. For probably the most half, It signifies that we must always keep away from duplication within the enterprise logic. Therefore, to keep away from that, we create some frequent recordsdata and folders. Due to this fact, we are able to reuse them elsewhere. With this objective in thoughts, doing that helps us enhance the readability, maintainability, and scalability of our code.



7.1. Venture Construction

On this part, we discuss methods to construction our undertaking.

  • Step 1: Firstly, please create a folder which known as parts contained in the src folder.

Structuring the Project - 1

The parts folder will include all the parts in our software. For instance, the login element, the register element, the house element, and so forth.

  • Step 2: Furthermore, we have to take away some unused recordsdata on this course. They’re the App.css, App.take a look at.js, brand.svg, reportWebVitals.js, setupTests.js.

Structuring the Project - 2

  • Step 4: On this state of affairs, we’re importing the brand.svg file within the App.js. For that motive, we have to take away it from the App.js file. 
import React from "react";

const App = () => {
  return <React.Fragment>Good day, Counter App</React.Fragment>;
};

export default App;
Enter fullscreen mode

Exit fullscreen mode

Within the App.js file, we eliminated all the dependencies and the present JSX parts. After that, we returned a React fragment. Inside that fragment, we confirmed Good day, Counter App.

  • Step 5: In actual fact, We’re importing reportWebVitals within the index.js file. Nonetheless, we eliminated reportWebVitals in step 3. Due to this fact, we have to take away it from the index.js file. 
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(<App />, doc.getElementById("root"));
Enter fullscreen mode

Exit fullscreen mode

Now we are able to get again to our browser and the UI ought to be like this.

Structuring the project - 4

The total supply code of the index.js file will likely be like this:

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

ReactDOM.render(<App />, doc.getElementById("root"));
Enter fullscreen mode

Exit fullscreen mode

The total supply code of the App.js file will likely be like this:

import React from "react";

const App = () => {
  return <React.Fragment>Good day, Counter App</React.Fragment>;
};

export default App;
Enter fullscreen mode

Exit fullscreen mode



7.2. Setting Up CSS

In actual fact, we have to make our UI enticing. Due to this fact, on this part, we’ll arrange CSS for our software. Therefore, we don’t have to care about styling as a result of CSS was pre-prepared.

Setting up CSS - 1

Within the index.js file, we’re importing the index.css file. This file comprises all CSS for the appliance. We’ve alternative ways to arrange styling for a React software, we are able to use the styled-components library, or we are able to use the TailwindCSS library, and so forth.

Due to this fact, we’ll write all CSS within the index.css file.

Please change the present content material of the index.css file with the next content material:

physique {
  margin: 0;
  font-household: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-shade: #112b3c;
}

code {
  font-household: supply-code-professional, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

* {
  padding: 0;
  margin: 0;
  field-sizing: border-field;
}

enter {
  define: none;
  border: none;
}

::-webkit-scrollbar {
  show: none;
}

.counter__container {
  align-gadgets: middle;
  show: flex;
  hole: 1rem;
  justify-content material: middle;
  min-top: 100vh;
  width: 100%;
}

.counter__container span {
  shade: #fff;
  font-measurement: 5rem;
  font-weight: 600;
}

.counter__container button:first-little one {
  padding-backside: 0.25rem;
}

.counter__container button {
  align-gadgets: middle;
  background: #205375;
  border-radius: 50%;
  border: none;
  shade: #fff;
  show: flex;
  font-measurement: 3rem;
  top: 5rem;
  justify-content material: middle;
  define: none;
  width: 5rem;
}
Enter fullscreen mode

Exit fullscreen mode



7.3. Construct the Counter Part

How to Build Counter App with React - Build the counter component - 1

As talked about above, we could have two buttons – enhance and reduce. However, we even have a label that will likely be used to display the present end result. After the customers click on on the rise button, the present end result will likely be elevated by 1. Apart from that, if the customers click on on the lower button, the present end result will likely be decreased by 1.

To develop the counter element, please observe the under steps:

  • Step 1: Please create the Counter.js file contained in the parts folder.

How to Build Counter App with React - Build the counter component - 2

The element must replace the present worth every time the customers click on on the rise or lower buttons. To make the element present the up to date end result, we have to retailer the present end in a state. Every time that state is up to date, the element will likely be re-rendered and present the most recent end result.

  • Step 2: To outline a state, we have to import useState from react within the Counter.js file. 
import { useState } from "react";
Enter fullscreen mode

Exit fullscreen mode

  • Step 3: Within the Counter.js file, we have to outline a purposeful element that returns an empty fragment. 
import { useState } from "react";

const Counter = () => {
  return <></>;
};

export default Counter;
Enter fullscreen mode

Exit fullscreen mode

At the moment, we simply return an empty fragment, we’ll develop the UI within the subsequent steps.

  • Step 4: Within the Counter.js file, we outline a state which known as depend. the depend state will retailer the present end result. 
import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  return <></>;
};

export default Counter;
Enter fullscreen mode

Exit fullscreen mode

The default worth for the depend state is 0. It signifies that once we go to the appliance first time. If we reload the web page, the present worth will likely be 0.

  • Step 5: Within the Counter.js file, we replace the return assertion as follows: 
import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="counter__container">
      <button>-</button>
      <span>{depend}</span>
      <button>+</button>
    </div>
  );
};

export default Counter;
Enter fullscreen mode

Exit fullscreen mode

We’re utilizing the depend state within the return assertion. For that reason, every time the customers click on on the rise or lower buttons, we’ll replace the depend state, and the UI will likely be up to date as nicely and it’ll present the most recent end result.

As we are able to see from the above code snippet, now we have not dealt with the occasions for the rise and reduce buttons, but. We are going to do this within the under step.

  • Step 6: Within the Counter.js file, we affiliate the occasions for the rise and reduce buttons. 
import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="counter__container">
      <button onClick={lower}>-</button>
      <span>{depend}</span>
      <button onClick={enhance}>+</button>
    </div>
  );
};

export default Counter;
Enter fullscreen mode

Exit fullscreen mode

If the customers click on on the lower button, the lower perform will likely be executed. Following that, if the customers click on on the rise button, the enhance perform will likely be executed.

We’ve not outlined the enhance and lower capabilities. We are going to do this within the subsequent step.

  • Step 7: Within the Counter.js file, we outline the enhance perform. 
import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const enhance = () => {
    setCount((depend) => depend + 1);
  };

  return (
    <div className="counter__container">
      <button onClick={lower}>-</button>
      <span>{depend}</span>
      <button onClick={enhance}>+</button>
    </div>
  );
};

export default Counter;
Enter fullscreen mode

Exit fullscreen mode

Contained in the enhance perform, we known as setCount to replace the depend state, the setCount perform accepts a callback perform as its parameter. That callback perform could have one parameter (the present depend worth). Due to this fact, we simply have to get the present depend worth and enhance it by 1

setCount((depend) => depend + 1);
Enter fullscreen mode

Exit fullscreen mode

  • Step 8: Within the Counter.js file, we outline the lower perform. 
import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const enhance = () => {
    setCount((depend) => depend + 1);
  };

  const lower = () => {
    setCount((depend) => depend - 1);
  };

  return (
    <div className="counter__container">
      <button onClick={lower}>-</button>
      <span>{depend}</span>
      <button onClick={enhance}>+</button>
    </div>
  );
};

export default Counter;
Enter fullscreen mode

Exit fullscreen mode

The lower perform is just like the enhance perform. > Contained in the lower perform, we known as setCount to replace the depend state, the setCount perform accepts a callback perform as its parameter. That callback perform could have one parameter (the present depend worth). Due to this fact, we simply have to get the present depend worth and reduce it by 1.

The total supply code of the Counter.js file will likely be like this:

import { useState } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  const enhance = () => {
    setCount((depend) => depend + 1);
  };

  const lower = () => {
    setCount((depend) => depend - 1);
  };

  return (
    <div className="counter__container">
      <button onClick={lower}>-</button>
      <span>{depend}</span>
      <button onClick={enhance}>+</button>
    </div>
  );
};

export default Counter;
Enter fullscreen mode

Exit fullscreen mode

  • Step 9: Within the App.js file, we have to import the Counter element that we outlined above. 
import Counter from "./parts/Counter";
Enter fullscreen mode

Exit fullscreen mode

  • Step 10: We have to use the imported counter element by updating the return assertion within the App.js file. 
import Counter from "./parts/Counter";

perform App() {
  return <Counter />;
}

export default App;
Enter fullscreen mode

Exit fullscreen mode

The total supply code of the App.js file will likely be like this:

import Counter from "./parts/Counter";

perform App() {
  return <Counter />;
}

export default App;
Enter fullscreen mode

Exit fullscreen mode

Now if we run our code, the UI will likely be like this:

How to Build Counter App with React - Featured Image



8. Pushing the Venture to Github

On this half, we’ll push our undertaking to Github. GitHub is the place over 73 million builders form the way forward for software program, collectively. Contribute to the open-source neighborhood, handle your Git repositories, and so forth.

To push our undertaking to Github, we have to observe the under steps:

  • Step 1: Create the .gitignore file in your root listing with the next content material. 
node_modules
Enter fullscreen mode

Exit fullscreen mode

We don’t wish to push the node_modules folder to Github.

  • Step 2: Go to this link, after which log in to Github together with your created account.

Pushing the project to Github - 1

  • Step 3: After we have logged in to Github, please go to this Link to create a brand new repository.

  • Step 4: We have to enter the repository identify after which click on on the `Create Repository button.

Pushing the project to Github - 2

  • Step 5: We have to open the terminal, cd to the undertaking folder, and observe the rules on Github

Pushing the project to Github - 3

If the whole lot is ok, it is best to see the under UI

Pushing the project to Github - 4



9. Making a New Vercel Account

On this part, we’ll create a brand new Vercel Account as a result of we wish to deploy our software on Vercel.

Vercel combines the most effective developer expertise with an obsessive concentrate on end-user efficiency.

The platform allows frontend groups to do their greatest work. Vercel is the most effective place to deploy any frontend app. Begin by deploying with zero configuration to our international edge community. Scale dynamically to tens of millions of pages with out breaking a sweat.

To create a brand new Vercel account, please observe the under steps:

  • Step 1: Please go to this Link and click on on the Login button.

Creating a new Vercel Account - 1

  • Step 2: Please log in together with your Github account.

Creating a new Vercel Account - 2

  • Step 3: After logging in to the Vercel platform efficiently, we will likely be on this page



10. Deploying the Venture to Vercel

On this half, we’ll deploy our undertaking to the Vercel platform.

As talked about above, Vercel combines the most effective developer expertise with an obsessive concentrate on end-user efficiency.

The platform allows frontend groups to do their greatest work. Vercel is the most effective place to deploy any frontend app. Begin by deploying with zero configuration to our international edge community. Scale dynamically to tens of millions of pages with out breaking a sweat.

To deploy the undertaking to Vercel, please observe the under steps:

Please ensure that we have logged in to the Vercel platform.

  • Step 1: Please go to this link and click on on the Create Venture button.

Deploying the project to Vercel - 1

  • Step 2: Please click on on the Import button to import our repository to Vercel.

Please observe that the connected picture is the screenshot on the time of scripting this course. Your UI could also be completely different. Nonetheless, the aim is similar, we wish to import our repository to the Vercel platform.

Deploying the project to Vercel - 2

  • Step 3: Please enter the surroundings variables, we simply have to enter all the surroundings variables in our .env file. Nonetheless, we should not have any surroundings variable on this undertaking. Due to this fact, we are able to ignore that. After that, we have to click on on the Deploy button.

Deploying the project to Vercel - 3

If the whole lot is ok, we must always see the under UI

Deploying the project to Vercel - 4



11. Conclusion

Congratulation! We’ve completed the counter software through the use of React. In conclusion, now we have identified concerning the functions of this course, and created and structured the undertaking. Following that, we additionally developed the Counter element and deployed the appliance to Vercel. Thanks a lot for becoming a member of this course, you’ll find many programs on Code Courses.

Add a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Join us on Social Media

Facebook Twitter Youtube