{"id":32941,"date":"2024-11-01T09:12:37","date_gmt":"2024-11-01T09:12:37","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32941"},"modified":"2024-11-01T12:34:11","modified_gmt":"2024-11-01T12:34:11","slug":"doctype-react-course-creating-a-counter-app-example","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32941\/","title":{"rendered":"React Course: Creating a Counter App Example"},"content":{"rendered":"<p>In modern web development, React is one of the most popular libraries. Using React makes it easier to build user interfaces, and thanks to its component-based structure, code reusability and management are convenient. In this tutorial, we will create a basic counter app and explore the fundamental concepts of React and how to implement a real UI.<\/p>\n<h2>1. Introduction to React<\/h2>\n<p>React is an open-source JavaScript library developed by Facebook, optimized for building and managing UI components. By using React, you can develop each component independently and dynamically update the UI through state changes. This allows for efficient work even in complex SPAs (Single Page Applications).<\/p>\n<h2>2. Overview of the Counter App<\/h2>\n<p>The counter app is one of the simplest forms of an application that allows users to increase or decrease a number by clicking a button. Through this example, you will learn the basic concepts of React such as components, state, and event handling.<\/p>\n<h2>3. Setting Up the Development Environment<\/h2>\n<p>To get started with React development, you need to have Node.js and npm installed on your PC. Node.js is a JavaScript runtime environment, and npm is a JavaScript package manager.<\/p>\n<ul>\n<li><strong>Install Node.js:<\/strong> Download and install the LTS version from the <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener\">official Node.js website<\/a>.<\/li>\n<li><strong>Install create-react-app:<\/strong> create-react-app is a tool that makes it easy to create React applications. Enter the following command in the command window to install it.<\/li>\n<\/ul>\n<pre><code>npm install -g create-react-app<\/code><\/pre>\n<h2>4. Creating a New React Project<\/h2>\n<p>Now, let&#8217;s create a new project using create-react-app. Enter the following command to create a project named &#8216;counter-app&#8217;:<\/p>\n<pre><code>npx create-react-app counter-app<\/code><\/pre>\n<p>Once the project is successfully created, we will navigate to the directory and run the app.<\/p>\n<pre><code>cd counter-app\nnpm start<\/code><\/pre>\n<p>By accessing <strong>http:\/\/localhost:3000<\/strong> in your browser, you can check the default React app screen.<\/p>\n<h2>5. Implementing the Counter Component<\/h2>\n<p>Now, let&#8217;s create the component that will implement the counter functionality. Create a file named <code>Counter.js<\/code> in the <code>src<\/code> folder and write the code as follows:<\/p>\n<pre><code>import React, { useState } from 'react';\n\nconst Counter = () =&gt; {\n    const [count, setCount] = useState(0);\n\n    const increment = () =&gt; {\n        setCount(count + 1);\n    };\n\n    const decrement = () =&gt; {\n        setCount(count - 1);\n    };\n\n    return (\n        <div>\n            <h1>Counter: {count}<\/h1>\n            <button onclick=\"{increment}\">Increase<\/button>\n            <button onclick=\"{decrement}\">Decrease<\/button>\n        <\/div>\n    );\n};\n\nexport default Counter;<\/code><\/pre>\n<h2>6. Adding the Counter Component to App.js<\/h2>\n<p>Now, we will add the newly created <code>Counter<\/code> component to the <code>src\/App.js<\/code> file to display it on the screen. The code is as follows:<\/p>\n<pre><code>import React from 'react';\nimport '.\/App.css';\nimport Counter from '.\/Counter';\n\nfunction App() {\n    return (\n        <div classname=\"App\">\n            <header classname=\"App-header\">\n                <counter><\/counter>\n            <\/header>\n        <\/div>\n    );\n}\n\nexport default App;<\/code><\/pre>\n<h2>7. Applying Styles<\/h2>\n<p>To make the UI of the counter app look better, let&#8217;s add some CSS. Add the following styles to the <code>src\/App.css<\/code> file:<\/p>\n<pre><code>.App {\n    text-align: center;\n}\n\n.App-header {\n    background-color: #282c34;\n    min-height: 100vh;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    font-size: calc(10px + 2vmin);\n    color: white;\n}\n\nbutton {\n    margin: 10px;\n    padding: 10px 20px;\n    font-size: 16px;\n    cursor: pointer;\n}<\/code><\/pre>\n<h2>8. Running the Counter App<\/h2>\n<p>Everything is ready, so let&#8217;s run the app again using the <strong>npm start<\/strong> command. You will be able to see the counter increasing and decreasing in the browser.<\/p>\n<h2>9. Implementing Additional Features<\/h2>\n<p>Let&#8217;s add more features to the counter app to gain a deeper understanding of React.<\/p>\n<ul>\n<li><strong>Reset Function:<\/strong> Add a button to reset the counter to 0.<\/li>\n<li><strong>Even\/Odd Distinction:<\/strong> Change the background color based on whether the counter value is even or odd.<\/li>\n<\/ul>\n<h3>Adding the Reset Function<\/h3>\n<p>Let&#8217;s add a reset button. Modify the <code>Counter.js<\/code> file as follows:<\/p>\n<pre><code>const reset = () =&gt; {\n    setCount(0);\n};<\/code><\/pre>\n<p>Then, add the reset button below it.<\/p>\n<pre><code>&lt;button onClick={reset}&gt;Reset&lt;\/button&gt;<\/code><\/pre>\n<h3>Even\/Odd Distinction<\/h3>\n<p>Let&#8217;s implement changing the background color based on whether the counter value is even or odd. Modify the <code>Counter.js<\/code> file as follows:<\/p>\n<pre><code>const backgroundColor = count % 2 === 0 ? 'lightblue' : 'lightcoral';\n\nreturn (\n    &lt;div style={{ backgroundColor }}&gt;\n        &lt;h1&gt;Counter: {count}&lt;\/h1&gt;\n        &lt;button onClick={increment}&gt;Increase&lt;\/button&gt;\n        &lt;button onClick={decrement}&gt;Decrease&lt;\/button&gt;\n        &lt;button onClick={reset}&gt;Reset&lt;\/button&gt;\n    &lt;\/div&gt;\n);<\/code><\/pre>\n<h2>10. Conclusion<\/h2>\n<p>Through this tutorial, we covered the basic concepts of React while implementing a counter app. React is a wonderful tool that helps build more complex applications based on these basic components. I hope this tutorial has been a valuable learning experience for you. I recommend using React to create various projects in the future.<\/p>\n<h2>11. References<\/h2>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\" target=\"_blank\" rel=\"noopener\">Official React Documentation<\/a><\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/hooks-intro.html\" target=\"_blank\" rel=\"noopener\">Introduction to React Hooks<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/ko\/docs\/Web\/JavaScript\" target=\"_blank\" rel=\"noopener\">JavaScript MDN Documentation<\/a><\/li>\n<\/ul>\n<footer>\n<p>This article was written as part of a React tutorial.<\/p>\n<\/footer>\n","protected":false},"excerpt":{"rendered":"<p>In modern web development, React is one of the most popular libraries. Using React makes it easier to build user interfaces, and thanks to its component-based structure, code reusability and management are convenient. In this tutorial, we will create a basic counter app and explore the fundamental concepts of React and how to implement a &hellip; <a href=\"https:\/\/atmokpo.com\/w\/32941\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;React Course: Creating a Counter App Example&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[123],"tags":[],"class_list":["post-32941","post","type-post","status-publish","format-standard","hentry","category-react-basics-course"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Course: Creating a Counter App Example - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/32941\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Course: Creating a Counter App Example - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"In modern web development, React is one of the most popular libraries. Using React makes it easier to build user interfaces, and thanks to its component-based structure, code reusability and management are convenient. In this tutorial, we will create a basic counter app and explore the fundamental concepts of React and how to implement a &hellip; \ub354 \ubcf4\uae30 &quot;React Course: Creating a Counter App Example&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32941\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:12:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T12:34:11+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32941\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32941\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"React Course: Creating a Counter App Example\",\"datePublished\":\"2024-11-01T09:12:37+00:00\",\"dateModified\":\"2024-11-01T12:34:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32941\/\"},\"wordCount\":576,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"React basics course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32941\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32941\/\",\"name\":\"React Course: Creating a Counter App Example - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:12:37+00:00\",\"dateModified\":\"2024-11-01T12:34:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32941\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32941\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32941\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Course: Creating a Counter App Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Course: Creating a Counter App Example - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/32941\/","og_locale":"ko_KR","og_type":"article","og_title":"React Course: Creating a Counter App Example - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"In modern web development, React is one of the most popular libraries. Using React makes it easier to build user interfaces, and thanks to its component-based structure, code reusability and management are convenient. In this tutorial, we will create a basic counter app and explore the fundamental concepts of React and how to implement a &hellip; \ub354 \ubcf4\uae30 \"React Course: Creating a Counter App Example\"","og_url":"https:\/\/atmokpo.com\/w\/32941\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:12:37+00:00","article_modified_time":"2024-11-01T12:34:11+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"4\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32941\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32941\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"React Course: Creating a Counter App Example","datePublished":"2024-11-01T09:12:37+00:00","dateModified":"2024-11-01T12:34:11+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32941\/"},"wordCount":576,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["React basics course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32941\/","url":"https:\/\/atmokpo.com\/w\/32941\/","name":"React Course: Creating a Counter App Example - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:12:37+00:00","dateModified":"2024-11-01T12:34:11+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32941\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32941\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32941\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"React Course: Creating a Counter App Example"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32941","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=32941"}],"version-history":[{"count":2,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32941\/revisions"}],"predecessor-version":[{"id":38065,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32941\/revisions\/38065"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32941"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32941"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}