{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/react-js/introduction","result":{"data":{"mdx":{"id":"f90ce0fa-cc9b-5d5a-baef-acef05ad3623","excerpt":"Introduction to React.js We are now in the last stage of our journey to become front-end developers. Congratulations for having reached this far!\nWe have…","fields":{"slug":"/react-js/introduction/"},"frontmatter":{"title":"React: Intro","description":"Intro | React | RefugeesCode","image":null,"disableTableOfContents":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"React: Intro\",\n \"description\": \"Intro | React | RefugeesCode\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", {\n \"id\": \"introduction-to-reactjs\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#introduction-to-reactjs\",\n \"aria-label\": \"introduction to reactjs permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Introduction to React.js\"), mdx(\"p\", null, \"We are now in the last stage of our journey to become front-end developers. Congratulations for having reached this far!\\nWe have already learned the tools to provide our websites with a great user experience, which implies that they are aesthetically pleasing,\\nthey are well organized and users can get what they want from the website in a fast and simple way.\\nNow we will learn a new tool that will help us very much in reaching our goal: a Javascript library originally created by Facebook called React\"), mdx(\"h2\", {\n \"id\": \"goals\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#goals\",\n \"aria-label\": \"goals permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Goals\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"We will start the implementation of an UI following a series of steps to decide how to add interactivity.\\nFirst we will use only Javascript and they we will do the same using React\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"We will review the reasons why React is a great tool for front-end development\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"We will learn:\", mdx(\"ol\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ol\"\n }, \"How to start a React project\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"How files are structured inside it\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"How components are created and managed\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"What are component props and to use them\")))), mdx(\"h2\", {\n \"id\": \"implementing-an-ui\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#implementing-an-ui\",\n \"aria-label\": \"implementing an ui permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Implementing an UI\"), mdx(\"p\", null, \"Given the following screen:\"), mdx(\"div\", {\n style: {\n \"display\": \"flex\"\n }\n }, mdx(\"img\", {\n src: \"../../wft.png\",\n style: {\n \"margin\": \"0 auto\"\n }\n })), mdx(\"p\", null, \"Let's follow the following steps to implement it: 1. Break the UI into elements\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"2. Build the html version\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"3. Define interactivity: triggers, events and data that changes (state)\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"4. Add interactivity\"), mdx(\"h3\", {\n \"id\": \"using-javascript\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#using-javascript\",\n \"aria-label\": \"using javascript permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Using Javascript\"), mdx(\"p\", null, \"Give it a try for yourself. Use what you have learned so far about the DOM (Document Object Model).\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"As a quick reminder, for this html:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-Javascript\"\n }, \"\\n\\n\\n\\n Page Title\\n\\n\\n\\n

\\\"My first heading

\\n

\\\"My first paragraph\\\"

\\n\\n\\n\\n\")), mdx(\"p\", null, \"the DOM tree chart is this:\\n\", mdx(\"img\", {\n parentName: \"p\",\n \"src\": \"../../dom-tree.png\",\n \"alt\": \"DOM tree chart\"\n })), mdx(\"details\", null, mdx(\"summary\", {\n style: {\n \"lineHeight\": \"1.8rem\",\n \"marginBlockEnd\": \"1.8rem\"\n }\n }, \" \", mdx(\"span\", {\n style: {\n \"fontWeight\": \"800\"\n }\n }, \"One possible implementation\"), \" (Check only after you have tried for yourself ;-)\"), mdx(\"a\", {\n href: \"https://stackblitz.com/edit/stackblitz-starters-jmezyd?file=index.html\",\n target: \"_blank\"\n }, \"Javascript Implementation\", \" \")), mdx(\"h2\", {\n \"id\": \"using-react\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#using-react\",\n \"aria-label\": \"using react permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Using React\"), mdx(\"ol\", null, mdx(\"li\", {\n parentName: \"ol\"\n }, \"Setting up the development environment (Node.js, npm, vite)\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"Understanding JSX (Javascript XML)\"), mdx(\"li\", {\n parentName: \"ol\"\n }, \"Components and Props\")), mdx(\"h3\", {\n \"id\": \"intro\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#intro\",\n \"aria-label\": \"intro permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Intro\"), mdx(\"p\", null, \"To develop a project using React we could something like this on a html file:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\\n \\n \\n \\n Document\\n \\n\\n \\n \\n
\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n\\n\")), mdx(\"p\", null, \"React enables us to write code that resembles HTML (known as JSX), which greatly streamlines the development process. Consider the number of lines of code required to create an element, set its attributes, and render it by manipulating the DOM. By using JSX instead, we can significantly reduce this!\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"This is possible through a process known as \\u2018transpilation\\u2019. Transpilation involves transforming code written in one high-level language into another high-level language. In the case of React, we use Babel to transpile JSX into JavaScript code that can be executed by the browser. This process is analogous to compilation, which transforms code from a high-level language (like Java) into a low-level language (like assembly), or even machine code. \"), mdx(\"h3\", {\n \"id\": \"creating-our-first-project\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#creating-our-first-project\",\n \"aria-label\": \"creating our first project permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Creating our first project\"), mdx(\"p\", null, \"Rather than manually handling these processes, we will utilize \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://vitejs.dev/guide/\"\n }, \"Vite\"), \". It automates the setup and transpilation tasks for us. Additionally, it provides a development server that instantly displays our code in the browser as we write it.\\nIn order to use Vite we need Node, so is Node installed in your computer?\\nIf you are not sure type this in your terminal\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"node --version\\n\")), mdx(\"p\", null, \"If you get something similar to this:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"bash: node: command not found\\n\")), mdx(\"p\", null, \"Then proceed to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://nodejs.org\"\n }, \"Node site\"), \" and follow the instructions for your OS.\\nHaving confirmed that Node is install, proceed to create your first React project with the command:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"npm create vite@latest\\n\")), mdx(\"p\", null, \"Answer the prompts like this:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Project name: mfrReact\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Select a framework: React\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Select a variant: Javascript\\nand then execute:\")), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-bash\"\n }, \"cd mfrReact\\nnpm install\\nnpm run dev\\n\")), mdx(\"h3\", {\n \"id\": \"reviewing-how-the-project-is-structured\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#reviewing-how-the-project-is-structured\",\n \"aria-label\": \"reviewing how the project is structured permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Reviewing how the project is structured\"), mdx(\"p\", null, \"First file we are going to study is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"index.html\"), \" at the root:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-html\"\n }, \"\\n\\n \\n \\n \\n \\n Vite + React\\n \\n \\n
\\n \\n \\n\\n\")), mdx(\"p\", null, \"As you can see, inside \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"body\"), \" there is only one html element, a div with id root and a script tag that has \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src/main.jsx\"), \" as source.\\nSo let's review that directory and file:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-Javascript\"\n }, \"//src/main.jsx\\nimport React from 'react'\\nimport ReactDOM from 'react-dom/client'\\nimport App from './App.jsx'\\nimport './index.css'\\n\\nReactDOM.createRoot(document.getElementById('root')).render(\\n \\n \\n ,\\n)\\n\")), mdx(\"p\", null, \"Let's break this code down step-by-step:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ReactDOM.createRoot(_document_.getElementById('root'))\"), \":\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"ReactDOM\"), \" is a library provided by React that allows us to interact with the browser's DOM (Document Object Model).\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"createRoot()\"), \" is a method from ReactDOM that creates a \\\"root\\\" for our React application. This root is where our React components will be rendered.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"_document_.getElementById('root')\"), \" is selecting an HTML element on the web page with the ID \\\"root\\\". This is where our React application will be mounted and displayed.\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \".render()\"), \":\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"The \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"render()\"), \" method is used to actually render our React application to the DOM.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Whatever we pass as an argument to \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"render()\"), \" will be what gets displayed in the \\\"root\\\" element we selected earlier.\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\"), \":\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\"), \" is a special React component that adds additional checks and warnings to help identify potential issues in the application.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"\"), \" is the top-level component of our React application. This is where the main logic and structure of our app is defined.\")))), mdx(\"p\", null, \"Now, let's dive deeper into the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component in the code snippet.\\nThe \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" is a functional component in React. This means that it's a Javascript function that returns JSX code, which is a syntax extension for Javascript that allows you to write HTML-like code in your Javascript files.\\nPrevious React versions also included \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://react.dev/reference/react/Component#defining-a-class-component\"\n }, \"class components\"), \". Currently there are considered legacy (not used in new project although new versions keep compatibility)\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-Javascript\"\n }, \"// In Javascript we can define functions like this\\nfunction app({title, description}){\\n // body of the function\\n}\\n// In React, a component is a function that returns a JSX object.\\n// Its should always be an uppercase letter (PascalNotation)\\nfunction App({title, description}{\\n return {\\n // JSX\\n }\\n})\\n// and when it's invoked instead of using app(\\\"Title\\\", \\\"Description\\\"), you do:\\n\\n\")), mdx(\"p\", null, \"In JSX, the way we define attributes on HTML-like elements is slightly different from regular HTML. For example, instead of using the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"class\"), \" attribute, we would use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"className\"), \" in JSX. This is because \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"class\"), \" is a reserved keyword in Javascript, so React uses \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"className\"), \" to avoid any conflicts.\"), mdx(\"p\", null, \"Here's an example of how we might use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"className\"), \" in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-Javascript\"\n }, \"function App(props) {\\n return (\\n
\\n

{props.title}

\\n

{props.description}

\\n
\\n );\\n}\\n\")), mdx(\"p\", null, \"In React, components can accept parameters, called \\\"props\\\", that allow you to pass data into the component. These props can be accessed within the component function and used to dynamically render the component's content.\\nSo, the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component could be defined like this:\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-Javascript\"\n }, \"function App(props) {\\n // Access props here and use them to render the component\\n return (\\n
\\n

{props.title}

\\n

{props.description}

\\n
\\n );\\n}\\n\")), mdx(\"p\", null, \"In this example, the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App\"), \" component accepts \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"props\"), \" as a parameter, which could contain properties like \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"title\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"description\"), \". These props can then be used inside the component's JSX code to dynamically render the content.\"), mdx(\"p\", null, \"The JSX syntax used in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"return\"), \" statement of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App\"), \" component allows you to write HTML-like code directly in your Javascript files. This makes it easier to visualize and reason about the structure of your UI components.\"), mdx(\"p\", null, \"When the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component is rendered, React will replace the JSX code with the corresponding HTML elements in the browser's DOM, creating the actual user interface.\"), mdx(\"p\", null, \"So, in the context of the original code snippet, the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" component is the main entry point of the React application, and it can accept any necessary props to customize its behavior and appearance.\"), mdx(\"h3\", {\n \"id\": \"composition\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#composition\",\n \"aria-label\": \"composition permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Composition\"), mdx(\"p\", null, \"In React, the \\\"children\\\" refer to the content that is enclosed between the opening and closing tags of a component. This content can be other React components, HTML elements, or even plain text.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-Javascript\"\n }, \"function MyComponent() {\\n return (\\n
\\n

This is the MyComponent

\\n

And this is some content inside the component.

\\n \\n
\\n );\\n}\\n\\nfunction AnotherComponent() {\\n return (\\n
\\n

This is another component

\\n

This component is being used as a child of MyComponent.

\\n
\\n );\\n}\\n\")), mdx(\"p\", null, \"In this example, the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" is being used as a child of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \". The content between the opening and closing tags of \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \" is considered the \\\"children\\\" of that component.\"), mdx(\"p\", null, \"The children concept in React is powerful because it allows you to create reusable and composable components. WE can build components that accept and render other components as their children, enabling us to create complex user interfaces by combining smaller, more focused components.\"), mdx(\"p\", null, \"This flexibility in composing components is a key feature of React and helps promote the creation of modular, maintainable, and scalable user interfaces.\"), mdx(\"p\", null, \"Now it's \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"your turn\"), \" to implement the UI with React using composition and props.\"), mdx(\"details\", null, mdx(\"summary\", {\n style: {\n \"lineHeight\": \"1.8rem\",\n \"marginBlockEnd\": \"1.8rem\"\n }\n }, \" \", mdx(\"span\", {\n style: {\n \"fontWeight\": \"800\"\n }\n }, \"One possible implementation\"), \" (Check only after you have tried for yourself ;-)\"), mdx(\"a\", {\n href: \"https://stackblitz.com/edit/vitejs-vite-ba3ki8?file=index.html\",\n target: \"_blank\"\n }, \"React Implementation\", \" \")), mdx(\"p\", null, \"Next class you will learn how to add interactivity with hooks. Please install React\\nDeveloper Tool extension on your browser. Here's the link for \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?pli=1\"\n }, \"Chrome\"), \". With this tool you will be able to inspect props and state of your React components, so understanding what's happening and debuggung will be easier.\"), mdx(\"h2\", {\n \"id\": \"additional-info\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#additional-info\",\n \"aria-label\": \"additional info permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Additional Info\"), mdx(\"h3\", {\n \"id\": \"what-is-react\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#what-is-react\",\n \"aria-label\": \"what is react permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"What is React\"), mdx(\"p\", null, \"According to \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.jetbrains.com/lp/devecosystem-2023/\"\n }, \"JetBrains' State of Developer Ecosystem 2023 Survey\"), \", React is the \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.jetbrains.com/lp/devecosystem-2023/Javascript/\"\n }, \"top library\"), \" used by Javascript developers\\n\", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.jetbrains.com/lp/devecosystem-2023/Javascript/\"\n }, mdx(\"img\", {\n parentName: \"a\",\n \"src\": \"../../image.png\",\n \"alt\": \"JetBrain survay js react\"\n }))), mdx(\"h1\", {\n \"id\": \"why-react-became-the-most-popular-solution-to-design-interactive-interfaces\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h1\",\n \"href\": \"#why-react-became-the-most-popular-solution-to-design-interactive-interfaces\",\n \"aria-label\": \"why react became the most popular solution to design interactive interfaces permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Why React became the most popular solution to design interactive interfaces?\"), mdx(\"video\", {\n poster: \"../../1.png\",\n src: \"../../video1.mp4\",\n style: {\n \"width\": \"100%\"\n },\n controls: true\n }), mdx(\"p\", null, \"Christopher Chedeau, Front-end Engineering Manager at Facebook recalls a time before joining the company when he worked on a project for World of Warcraft, which required searching through 20,000 guilds. He spent months optimizing performance to display changes in real-time when filters were adjusted. However, when he tried React, he was able to rewrite the same functionality in about half an hour, and the performance was comparable.\"), mdx(\"h2\", {\n \"id\": \"react19\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#react19\",\n \"aria-label\": \"react19 permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"React19\"), mdx(\"p\", null, \"A new version, React19, is already available for testing and will include very interesting features such as server actions. The release date is expected to be later this year 2024. More info \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.freecodecamp.org/news/new-react-19-features/\"\n }, \"here\")), mdx(\"h3\", {\n \"id\": \"references\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#references\",\n \"aria-label\": \"references permalink\",\n \"className\": \"anchor before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"References\"), mdx(\"p\", null, mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://react.dev\"\n }, \"React Documentation\")));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":1,"value":"Introduction to React.js"},{"depth":2,"value":"Goals"},{"depth":2,"value":"Implementing an UI"},{"depth":3,"value":"Using Javascript"},{"depth":2,"value":"Using React"},{"depth":3,"value":"Intro"},{"depth":3,"value":"Creating our first project"},{"depth":3,"value":"Reviewing how the project is structured"},{"depth":3,"value":"Composition"},{"depth":2,"value":"Additional Info"},{"depth":3,"value":"What is React"},{"depth":1,"value":"Why React became the most popular solution to design interactive interfaces?"},{"depth":2,"value":"React19"},{"depth":3,"value":"References"}]}},"pageContext":{"slug":"/react-js/introduction/","prev":{"label":"Asynchronous JavaScript","link":"/advanced-js/async"},"next":{"label":"States","link":"/react-js/states"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/react-js/introduction.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}