React Course: First Encounter with JavaScript - \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\/32937\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Course: First Encounter with JavaScript - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"Hello! In this course, we will delve deeply into React and JavaScript. The React we will use is a component-based library that is very useful for building user interfaces (UI). At the same time, JavaScript is a language that is essential for understanding and utilizing React. We will start with the basic concepts of JavaScript … \ub354 \ubcf4\uae30 "React Course: First Encounter with JavaScript"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32937\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:12:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:21:24+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\/32937\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32937\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"React Course: First Encounter with JavaScript\",\"datePublished\":\"2024-11-01T09:12:36+00:00\",\"dateModified\":\"2024-11-01T11:21:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32937\/\"},\"wordCount\":658,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"React basics course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32937\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32937\/\",\"name\":\"React Course: First Encounter with JavaScript - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:12:36+00:00\",\"dateModified\":\"2024-11-01T11:21:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32937\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32937\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32937\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Course: First Encounter with JavaScript\"}]},{\"@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_head_json":{"title":"React Course: First Encounter with JavaScript - \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\/32937\/","og_locale":"ko_KR","og_type":"article","og_title":"React Course: First Encounter with JavaScript - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"Hello! In this course, we will delve deeply into React and JavaScript. The React we will use is a component-based library that is very useful for building user interfaces (UI). At the same time, JavaScript is a language that is essential for understanding and utilizing React. We will start with the basic concepts of JavaScript … \ub354 \ubcf4\uae30 \"React Course: First Encounter with JavaScript\"","og_url":"https:\/\/atmokpo.com\/w\/32937\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:12:36+00:00","article_modified_time":"2024-11-01T11:21:24+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\/32937\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32937\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"React Course: First Encounter with JavaScript","datePublished":"2024-11-01T09:12:36+00:00","dateModified":"2024-11-01T11:21:24+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32937\/"},"wordCount":658,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["React basics course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32937\/","url":"https:\/\/atmokpo.com\/w\/32937\/","name":"React Course: First Encounter with JavaScript - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:12:36+00:00","dateModified":"2024-11-01T11:21:24+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32937\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32937\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32937\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"React Course: First Encounter with JavaScript"}]},{"@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\/32937","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=32937"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32937\/revisions"}],"predecessor-version":[{"id":32938,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32937\/revisions\/32938"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Hello! In this course, we will delve deeply into React and JavaScript. The React we will use is a component-based library that is very useful for building user interfaces (UI). At the same time, JavaScript is a language that is essential for understanding and utilizing React. We will start with the basic concepts of JavaScript for those who are new to it.<\/p>\n

1. Understanding JavaScript<\/h2>\n
JavaScript is the most widely used programming language in web development. It has become one of the core technologies of the web, alongside HTML and CSS. With JavaScript, we can add dynamic features to web pages and allow for interaction with users.<\/p>\n

1.1 History of JavaScript<\/h3>\n
JavaScript was first developed by Brendan Eich in 1995. Initially, it was used for writing simple scripts within browsers, but over time it began to be used for developing complex applications as well.<\/p>\n

1.2 Basic Syntax of JavaScript<\/h3>\n

Variable Declaration:<\/strong> To declare a variable, we use var<\/code>, let<\/code>, and const<\/code>. let<\/code> and const<\/code> have block scope, and const<\/code> declares a constant that cannot be reassigned.<\/li>\n

Data Types:<\/strong> JavaScript supports various data types. The main data types are as follows:\n\nNumber<\/li>\n String<\/li>\n Boolean<\/li>\n Object<\/li>\n Array<\/li>\n Null<\/li>\n Undefined<\/li>\n<\/ul>\n<\/li>\n Function:<\/strong> To define a function, we write as follows:\nfunction sayHello(name) {\n return \"Hello, \" + name + \"!\";\n}<\/code><\/pre>\n<\/li>\n<\/ul>\n2. Understanding React<\/h2>\nReact is a JavaScript library developed by Facebook, which is very useful for building user interfaces. React allows us to manage the UI by breaking it down into independent pieces (components) using a component-based structure.<\/p>\n 2.1 Features of React<\/h3>\n\nComponent-Based:<\/strong> The UI of the application can be divided into multiple independent components, making it easier to manage.<\/li>\n Virtual DOM:<\/strong> React uses a virtual DOM to minimize changes to the actual DOM and optimize performance.<\/li>\n One-Way Data Binding:<\/strong> Data flows from parent components to child components, which makes the flow of data clear.<\/li>\n<\/ul>\n2.2 Installing and Setting Up React<\/h3>\nTo use React, you need to install Node.js and npm (Node Package Manager). After installation, you can create a new React project using the following command:<\/p>\n npx create-react-app my-app<\/code><\/pre>\nNow, navigate to the project directory:<\/p>\n cd my-app<\/code><\/pre>\n3. Creating Your First React Component<\/h2>\nNow let’s create a React component. Basic React components are defined as JavaScript functions or classes. Here is an example of creating a functional component:<\/p>\n import React from 'react';\n\nfunction HelloWorld() {\n return Hello, React!<\/h1>;\n}\n\nexport default HelloWorld;<\/code><\/pre>\nIn the code above, we define a component called HelloWorld<\/code>, which displays the phrase “Hello, React!” on the screen.<\/p>\n 3.1 Using Components<\/h3>\nTo use the created component in another file, you can import it and use it as a JSX tag. For example:<\/p>\n import HelloWorld from '.\/HelloWorld';\n\nfunction App() {\n return (\n \n <\/HelloWorld>\n <\/div>\n );\n}\n\nexport default App;<\/code><\/pre>\n4. Understanding JSX<\/h2>\nIn React, we use JSX (JavaScript XML) to define the UI. JSX is a syntax that allows you to write HTML within JavaScript code. Using JSX makes the code more readable.<\/p>\n 4.1 JSX Syntax<\/h3>\n\nJSX is similar to HTML, but you must use className instead of class.<\/li>\n You can insert JavaScript expressions into tags using curly braces ({}<\/code>).<\/li>\n To return multiple JSX elements, they must be wrapped in a single parent element.<\/li>\n<\/ul>\n5. State Management and Lifecycle<\/h2>\nIn React, you can manage the state of a component and control the creation and destruction of a component through lifecycle methods.<\/p>\n 5.1 State Management<\/h3>\nimport React, { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n return (\n \n Current Count: {count}<\/p>\n

1. Understanding JavaScript<\/h2>\n
JavaScript is the most widely used programming language in web development. It has become one of the core technologies of the web, alongside HTML and CSS. With JavaScript, we can add dynamic features to web pages and allow for interaction with users.<\/p>\n

1.1 History of JavaScript<\/h3>\n
JavaScript was first developed by Brendan Eich in 1995. Initially, it was used for writing simple scripts within browsers, but over time it began to be used for developing complex applications as well.<\/p>\n

2. Understanding React<\/h2>\n
React is a JavaScript library developed by Facebook, which is very useful for building user interfaces. React allows us to manage the UI by breaking it down into independent pieces (components) using a component-based structure.<\/p>\n

Hello, React!<\/h1>;\n}\n\nexport default HelloWorld;<\/code><\/pre>\n
In the code above, we define a component called `HelloWorld<\/code>, which displays the phrase “Hello, React!” on the screen.<\/p>\n`

4. Understanding JSX<\/h2>\n
In React, we use JSX (JavaScript XML) to define the UI. JSX is a syntax that allows you to write HTML within JavaScript code. Using JSX makes the code more readable.<\/p>\n

5. State Management and Lifecycle<\/h2>\n
In React, you can manage the state of a component and control the creation and destruction of a component through lifecycle methods.<\/p>\n

5.1 State Management<\/h3>\n
`import React, { useState } from 'react';\n\nfunction Counter() {\n const [count, setCount] = useState(0);\n\n return (\n \n Current Count: {count}<\/p>\n`

React Lifecycle<\/h1>;\n }\n}<\/code><\/pre>\n

6. Event Handling<\/h2>\n
In React, handling HTML events is very straightforward. When handling events, you use properties like onClick or onChange.<\/p>\n
`function App() {\n const handleClick = () => {\n alert('The button has been clicked!');\n };\n\n return`

1. Understanding JavaScript<\/h2>\nJavaScript is the most widely used programming language in web development. It has become one of the core technologies of the web, alongside HTML and CSS. With JavaScript, we can add dynamic features to web pages and allow for interaction with users.<\/p>\n

1.1 History of JavaScript<\/h3>\nJavaScript was first developed by Brendan Eich in 1995. Initially, it was used for writing simple scripts within browsers, but over time it began to be used for developing complex applications as well.<\/p>\n

2. Understanding React<\/h2>\nReact is a JavaScript library developed by Facebook, which is very useful for building user interfaces. React allows us to manage the UI by breaking it down into independent pieces (components) using a component-based structure.<\/p>\n

Hello, React!<\/h1>;\n}\n\nexport default HelloWorld;<\/code><\/pre>\nIn the code above, we define a component called HelloWorld<\/code>, which displays the phrase “Hello, React!” on the screen.<\/p>\n

4. Understanding JSX<\/h2>\nIn React, we use JSX (JavaScript XML) to define the UI. JSX is a syntax that allows you to write HTML within JavaScript code. Using JSX makes the code more readable.<\/p>\n

5. State Management and Lifecycle<\/h2>\nIn React, you can manage the state of a component and control the creation and destruction of a component through lifecycle methods.<\/p>\n

React Lifecycle<\/h1>;\n }\n}<\/code><\/pre>\n

6. Event Handling<\/h2>\nIn React, handling HTML events is very straightforward. When handling events, you use properties like onClick or onChange.<\/p>\nfunction App() {\n const handleClick = () => {\n alert('The button has been clicked!');\n };\n\n return

1. Understanding JavaScript<\/h2>\n
JavaScript is the most widely used programming language in web development. It has become one of the core technologies of the web, alongside HTML and CSS. With JavaScript, we can add dynamic features to web pages and allow for interaction with users.<\/p>\n

1.1 History of JavaScript<\/h3>\n
JavaScript was first developed by Brendan Eich in 1995. Initially, it was used for writing simple scripts within browsers, but over time it began to be used for developing complex applications as well.<\/p>\n

2. Understanding React<\/h2>\n
React is a JavaScript library developed by Facebook, which is very useful for building user interfaces. React allows us to manage the UI by breaking it down into independent pieces (components) using a component-based structure.<\/p>\n

Hello, React!<\/h1>;\n}\n\nexport default HelloWorld;<\/code><\/pre>\n
In the code above, we define a component called `HelloWorld<\/code>, which displays the phrase “Hello, React!” on the screen.<\/p>\n`

4. Understanding JSX<\/h2>\n
In React, we use JSX (JavaScript XML) to define the UI. JSX is a syntax that allows you to write HTML within JavaScript code. Using JSX makes the code more readable.<\/p>\n

5. State Management and Lifecycle<\/h2>\n
In React, you can manage the state of a component and control the creation and destruction of a component through lifecycle methods.<\/p>\n

6. Event Handling<\/h2>\n
In React, handling HTML events is very straightforward. When handling events, you use properties like onClick or onChange.<\/p>\n
`function App() {\n const handleClick = () => {\n alert('The button has been clicked!');\n };\n\n return`