{"id":101,"date":"2025-05-26T13:03:43","date_gmt":"2025-05-26T13:03:43","guid":{"rendered":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/?page_id=101"},"modified":"2025-05-27T14:51:40","modified_gmt":"2025-05-27T14:51:40","slug":"listing-users","status":"publish","type":"page","link":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/listing-users\/","title":{"rendered":"Working with lists"},"content":{"rendered":"\n<p>Today going make a preview list of users.<\/p>\n\n\n\n<p>After creating a new project<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-highlight-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#002339;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 35, 57, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#003353\">src\/App.js<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#002339;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>import logo from &#8216;.\/logo.svg&#8217;;\nimport &#8216;.\/App.css&#8217;;\n\nfunction App() {\n  return (\n    &lt;div className=&#8221;App&#8221;&gt;\n      &lt;header className=&#8221;App-header&#8221;&gt;\n        &lt;img src={logo} className=&#8221;App-logo&#8221; alt=&#8221;logo&#8221; \/&gt;\n        &lt;p&gt;\n          Edit &lt;code&gt;src\/App.js&lt;\/code&gt; and save to reload.\n        &lt;\/p&gt;\n        &lt;a\n          className=&#8221;App-link&#8221;\n          href=&#8221;https:\/\/reactjs.org&#8221;\n          target=&#8221;_blank&#8221;\n          rel=&#8221;noopener noreferrer&#8221;\n        &gt;\n          Learn React\n        &lt;\/a&gt;\n      &lt;\/header&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;JavaScript<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki slack-ochin\" style=\"background-color: #FFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7B30D0\">import<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">logo<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">from<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;.\/logo.svg&#39;<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7B30D0\">import<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;.\/App.css&#39;<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0991B6\">function<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7EB233\">App<\/span><span style=\"color: #002339\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">  <\/span><span style=\"color: #7B30D0\">return<\/span><span style=\"color: #002339\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    &lt;<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #DF8618; font-style: italic\">className<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #A44185\">&quot;App&quot;<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">      &lt;<\/span><span style=\"color: #0444AC\">header<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #DF8618; font-style: italic\">className<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #A44185\">&quot;App-header&quot;<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;<\/span><span style=\"color: #0444AC\">img<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #DF8618; font-style: italic\">src<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #002339\">{<\/span><span style=\"color: #2F86D2\">logo<\/span><span style=\"color: #002339\">} <\/span><span style=\"color: #DF8618; font-style: italic\">className<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #A44185\">&quot;App-logo&quot;<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #DF8618; font-style: italic\">alt<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #A44185\">&quot;logo&quot;<\/span><span style=\"color: #002339\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;<\/span><span style=\"color: #0444AC\">p<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">          Edit &lt;<\/span><span style=\"color: #0444AC\">code<\/span><span style=\"color: #002339\">&gt;src\/App.js&lt;\/<\/span><span style=\"color: #0444AC\">code<\/span><span style=\"color: #002339\">&gt; and save to reload.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;\/<\/span><span style=\"color: #0444AC\">p<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;<\/span><span style=\"color: #0444AC\">a<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">          <\/span><span style=\"color: #DF8618; font-style: italic\">className<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #A44185\">&quot;App-link&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">          <\/span><span style=\"color: #DF8618; font-style: italic\">href<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #A44185\">&quot;https:\/\/reactjs.org&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">          <\/span><span style=\"color: #DF8618; font-style: italic\">target<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #A44185\">&quot;_blank&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">          <\/span><span style=\"color: #DF8618; font-style: italic\">rel<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #A44185\">&quot;noopener noreferrer&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">          Learn React<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;\/<\/span><span style=\"color: #0444AC\">a<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">      &lt;\/<\/span><span style=\"color: #0444AC\">header<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    &lt;\/<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B30D0\">export<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">default<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">App<\/span><span style=\"color: #002339\">;<\/span><span style=\"color: #2F86D2\">JavaScript<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#FFF;color:#003353;font-size:12px;line-height:1;position:relative\">JavaScript<\/span><\/div>\n\n\n\n<p>We need to remove everything inside of <strong><em>return<\/em><\/strong> function.<br>And replacing <strong><em>import &#8216;.\/App.css&#8217; <\/em><\/strong>to <strong><em>import &#8216;.\/main.css&#8217;<\/em><\/strong> and removing import logo line completely, we going create a new custom style. we aren&#8217;t going need that logo.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-highlight-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#002339;--cbp-line-number-width:calc(1 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 35, 57, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#003353\">src\/App.js<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#002339;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>import &#8216;.\/main.css&#8217;;\n\nfunction App() {\n    return (\n        \n    );\n}\n\nexport default App;<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki slack-ochin\" style=\"background-color: #FFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7B30D0\">import<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;.\/main.css&#39;<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0991B6\">function<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7EB233\">App<\/span><span style=\"color: #002339\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #7B30D0\">return<\/span><span style=\"color: #002339\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B30D0\">export<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">default<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">App<\/span><span style=\"color: #002339\">;<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#FFF;color:#003353;font-size:12px;line-height:1;position:relative\">JavaScript<\/span><\/div>\n\n\n\n<p>New we going to create a new function for the title for the page, using <em>title<\/em> as key to store value when calling the function and new it&#8217;s creates a header with <em>title <\/em>prop<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-highlight-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#002339;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 35, 57, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#003353\">src\/App.js<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#002339;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>import &#8216;.\/main.css&#8217;;\n\nfunction Header({title}){\n    return (\n        &lt;header>\n            {title}\n        &lt;\/header>\n    )\n}\n\nfunction App() {\n    return (\n        &lt;div>\n          &lt;Header title=&#8221;List of Users&#8221; \/>\n        &lt;\/div>\n    );\n}\n\nexport default App;<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki slack-ochin\" style=\"background-color: #FFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7B30D0\">import<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;.\/main.css&#39;<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0991B6\">function<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7EB233\">Header<\/span><span style=\"color: #002339\">({<\/span><span style=\"color: #B1108E\">title<\/span><span style=\"color: #002339\">}){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #7B30D0\">return<\/span><span style=\"color: #002339\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;<\/span><span style=\"color: #0444AC\">header<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            {<\/span><span style=\"color: #2F86D2\">title<\/span><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;\/<\/span><span style=\"color: #0444AC\">header<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0991B6\">function<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7EB233\">App<\/span><span style=\"color: #002339\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #7B30D0\">return<\/span><span style=\"color: #002339\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">          &lt;<\/span><span style=\"color: #DC3EB7\">Header<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #DF8618; font-style: italic\">title<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #A44185\">&quot;List of Users&quot;<\/span><span style=\"color: #002339\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;\/<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B30D0\">export<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">default<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">App<\/span><span style=\"color: #002339\">;<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#FFF;color:#003353;font-size:12px;line-height:1;position:relative\">JavaScript<\/span><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"93\" height=\"42\" src=\"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/05\/image-2.png\" alt=\"\" class=\"wp-image-116\"\/><\/figure>\n\n\n\n<p>Now in our created <strong><em>main.css<\/em><\/strong> we going added some code to it, we going use <\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-highlight-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#002339;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 35, 57, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#003353\">src\/main.css<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#002339;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>@import url(&#8216;https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;family=Lora:ital,wght@0,400..700;1,400..700&amp;display=swap&#8217;);\n\n* {\n    margin: 0;\n    padding: 0;\n}\n\nbody {\n    background-color: #333;\n    color: #ffffff;\n    font-weight: 300;\n    font-family: &#8220;Lora&#8221;, serif;\n}<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki slack-ochin\" style=\"background-color: #FFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7B30D0\">@import<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #1AB394\">url<\/span><span style=\"color: #002339\">(<\/span><span style=\"color: #A44185\">&#39;https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;family=Lora:ital,wght@0,400..700;1,400..700&amp;display=swap&#39;<\/span><span style=\"color: #002339\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0444AC\">*<\/span><span style=\"color: #002339\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">margin<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">0<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">padding<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">0<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0444AC\">body<\/span><span style=\"color: #002339\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">background-color<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">#333<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">color<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">#ffffff<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">font-weight<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">300<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">font-family<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #A44185\">&quot;Lora&quot;<\/span><span style=\"color: #002339\">, <\/span><span style=\"color: #174781\">serif<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#FFF;color:#003353;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"115\" height=\"38\" src=\"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/05\/image-4.png\" alt=\"\" class=\"wp-image-118\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-highlight-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#002339;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 35, 57, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#003353\">src\/App.js<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#002339;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>import &#8216;.\/main.css&#8217;;\n\nfunction Header({title}){\n    return (\n        &lt;header>\n            {title}\n        &lt;\/header>\n    )\n}\n\nfunction Users() {\n    let UsersList = [\n        {\n            id: 1,\n            firstname: &#8216;Bob&#8217;,\n            lastname: &#8216;Marley&#8217;,\n            bio: &#8216;Bob Marley like\\&#8217;s PHP.&#8217;,\n            age: 40,\n            isHappy: true\n        },\n        {\n            id: 2,\n            firstname: &#8216;John&#8217;,\n            lastname: &#8216;Doe&#8217;,\n            bio: &#8216;John Doe like\\&#8217;s JS.&#8217;,\n            age: 22,\n            isHappy: false\n        }\n    ];\n\n    return(\n        &lt;div>\n            {UsersList.map((user) => (\n                &lt;div>\n                    &lt;h3>{user.firstname} {user.lastname}: {user.age}&lt;\/h3>\n                    &lt;p>{user.bio}&lt;\/p>\n                    &lt;b>{user.isHappy ? &#8216;Happy : D&#8217; : &#8216;Not happy&#8217;}&lt;\/b>\n                &lt;\/div>\n            ))}\n        &lt;\/div>\n    )\n}\n\nfunction App() {\n    return (\n        &lt;div>\n            &lt;Header title=&#8221;List of Users&#8221;   \/>\n            &lt;Users \/>\n        &lt;\/div>\n    );\n}\n\nexport default App;<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki slack-ochin\" style=\"background-color: #FFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7B30D0\">import<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;.\/main.css&#39;<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0991B6\">function<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7EB233\">Header<\/span><span style=\"color: #002339\">({<\/span><span style=\"color: #B1108E\">title<\/span><span style=\"color: #002339\">}){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #7B30D0\">return<\/span><span style=\"color: #002339\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;<\/span><span style=\"color: #0444AC\">header<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            {<\/span><span style=\"color: #2F86D2\">title<\/span><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;\/<\/span><span style=\"color: #0444AC\">header<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0991B6\">function<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7EB233\">Users<\/span><span style=\"color: #002339\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #0991B6\">let<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">UsersList<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #002339\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            id: <\/span><span style=\"color: #174781\">1<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            firstname: <\/span><span style=\"color: #A44185\">&#39;Bob&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            lastname: <\/span><span style=\"color: #A44185\">&#39;Marley&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            bio: <\/span><span style=\"color: #A44185\">&#39;Bob Marley like<\/span><span style=\"color: #174781\">\\&#39;<\/span><span style=\"color: #A44185\">s PHP.&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            age: <\/span><span style=\"color: #174781\">40<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            isHappy: <\/span><span style=\"color: #174781\">true<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            id: <\/span><span style=\"color: #174781\">2<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            firstname: <\/span><span style=\"color: #A44185\">&#39;John&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            lastname: <\/span><span style=\"color: #A44185\">&#39;Doe&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            bio: <\/span><span style=\"color: #A44185\">&#39;John Doe like<\/span><span style=\"color: #174781\">\\&#39;<\/span><span style=\"color: #A44185\">s JS.&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            age: <\/span><span style=\"color: #174781\">22<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            isHappy: <\/span><span style=\"color: #174781\">false<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    ];<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #7B30D0\">return<\/span><span style=\"color: #002339\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            {<\/span><span style=\"color: #2F86D2\">UsersList<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #7EB233\">map<\/span><span style=\"color: #002339\">((<\/span><span style=\"color: #B1108E\">user<\/span><span style=\"color: #002339\">) <\/span><span style=\"color: #0991B6\">=&gt;<\/span><span style=\"color: #002339\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                &lt;<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                    &lt;<\/span><span style=\"color: #0444AC\">h3<\/span><span style=\"color: #002339\">&gt;{<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">firstname<\/span><span style=\"color: #002339\">} {<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">lastname<\/span><span style=\"color: #002339\">}: {<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">age<\/span><span style=\"color: #002339\">}&lt;\/<\/span><span style=\"color: #0444AC\">h3<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                    &lt;<\/span><span style=\"color: #0444AC\">p<\/span><span style=\"color: #002339\">&gt;{<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">bio<\/span><span style=\"color: #002339\">}&lt;\/<\/span><span style=\"color: #0444AC\">p<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                    &lt;<\/span><span style=\"color: #0444AC\">b<\/span><span style=\"color: #002339\">&gt;{<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">isHappy<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">?<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;Happy : D&#39;<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">:<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;Not happy&#39;<\/span><span style=\"color: #002339\">}&lt;\/<\/span><span style=\"color: #0444AC\">b<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                &lt;\/<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            ))}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;\/<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0991B6\">function<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7EB233\">App<\/span><span style=\"color: #002339\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #7B30D0\">return<\/span><span style=\"color: #002339\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            &lt;<\/span><span style=\"color: #DC3EB7\">Header<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #DF8618; font-style: italic\">title<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #A44185\">&quot;List of Users&quot;<\/span><span style=\"color: #002339\">   \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            &lt;<\/span><span style=\"color: #DC3EB7\">Users<\/span><span style=\"color: #002339\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;\/<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B30D0\">export<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">default<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">App<\/span><span style=\"color: #002339\">;<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#FFF;color:#003353;font-size:12px;line-height:1;position:relative\">JavaScript<\/span><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"199\" height=\"148\" src=\"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/05\/image-11.png\" alt=\"\" class=\"wp-image-138\"\/><\/figure>\n\n\n\n<p>Let&#8217;s make our separate our functions to a different files<\/p>\n\n\n\n<p>let&#8217;s create a folder called components we going store reusable functions, all and inside the that folder create files Called <strong><em>Users.js<\/em><\/strong> and <strong><em>Header.js<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-highlight-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#002339;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 35, 57, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#003353\">src\/App.js<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#002339;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>import &#8216;.\/main.css&#8217;;\n\nimport Users from &#8216;.\/components\/Users&#8217;\nimport Header from &#8216;.\/components\/Header&#8217;\n\nfunction App() {\n    return (\n        &lt;div>\n            &lt;Header title=&#8221;List of Users&#8221;\/>\n            &lt;main>\n                &lt;Users \/>\n            &lt;\/main>\n        &lt;\/div>\n    );\n}\n\n\nexport default App;<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki slack-ochin\" style=\"background-color: #FFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7B30D0\">import<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;.\/main.css&#39;<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B30D0\">import<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">Users<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">from<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;.\/components\/Users&#39;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #7B30D0\">import<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">Header<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">from<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;.\/components\/Header&#39;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0991B6\">function<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7EB233\">App<\/span><span style=\"color: #002339\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #7B30D0\">return<\/span><span style=\"color: #002339\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            &lt;<\/span><span style=\"color: #DC3EB7\">Header<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #DF8618; font-style: italic\">title<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #A44185\">&quot;List of Users&quot;<\/span><span style=\"color: #002339\">\/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            &lt;<\/span><span style=\"color: #0444AC\">main<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                &lt;<\/span><span style=\"color: #DC3EB7\">Users<\/span><span style=\"color: #002339\"> \/&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            &lt;\/<\/span><span style=\"color: #0444AC\">main<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;\/<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B30D0\">export<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">default<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">App<\/span><span style=\"color: #002339\">;<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#FFF;color:#003353;font-size:12px;line-height:1;position:relative\">JavaScript<\/span><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-highlight-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#002339;--cbp-line-number-width:calc(1 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 35, 57, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#003353\">src\/components\/Header.js<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#002339;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>function Header({title}){\n    return (\n        &lt;header>\n            {title}\n        &lt;\/header>\n    )\n}\n\nexport default Header;<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki slack-ochin\" style=\"background-color: #FFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #0991B6\">function<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7EB233\">Header<\/span><span style=\"color: #002339\">({<\/span><span style=\"color: #B1108E\">title<\/span><span style=\"color: #002339\">}){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #7B30D0\">return<\/span><span style=\"color: #002339\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;<\/span><span style=\"color: #0444AC\">header<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            {<\/span><span style=\"color: #2F86D2\">title<\/span><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;\/<\/span><span style=\"color: #0444AC\">header<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B30D0\">export<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">default<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">Header<\/span><span style=\"color: #002339\">;<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#FFF;color:#003353;font-size:12px;line-height:1;position:relative\">JavaScript<\/span><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-highlight-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#002339;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 35, 57, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#003353\">src\/components\/Users.js<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#002339;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>function Users() {\n    let UsersList = [\n        {\n            id: 1,\n            firstname: &#8216;Bob&#8217;,\n            lastname: &#8216;Marley&#8217;,\n            bio: &#8216;Bob Marley like\\&#8217;s PHP.&#8217;,\n            age: 40,\n            isHappy: true\n        },\n        {\n            id: 2,\n            firstname: &#8216;John&#8217;,\n            lastname: &#8216;Doe&#8217;,\n            bio: &#8216;John Doe like\\&#8217;s JS.&#8217;,\n            age: 22,\n            isHappy: false\n        }\n    ];\n\n    return(\n        &lt;div>\n            {UsersList.map((user) => (\n                &lt;div>\n                    &lt;h3>{user.firstname} {user.lastname}: {user.age}&lt;\/h3>\n                    &lt;p>{user.bio}&lt;\/p>\n                    &lt;b>{user.isHappy ? &#8216;Happy : D&#8217; : &#8216;Not happy&#8217;}&lt;\/b>\n                &lt;\/div>\n            ))}\n        &lt;\/div>\n    )\n}\n\nexport default Users;<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki slack-ochin\" style=\"background-color: #FFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #0991B6\">function<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7EB233\">Users<\/span><span style=\"color: #002339\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #0991B6\">let<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">UsersList<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #002339\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            id: <\/span><span style=\"color: #174781\">1<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            firstname: <\/span><span style=\"color: #A44185\">&#39;Bob&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            lastname: <\/span><span style=\"color: #A44185\">&#39;Marley&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            bio: <\/span><span style=\"color: #A44185\">&#39;Bob Marley like<\/span><span style=\"color: #174781\">\\&#39;<\/span><span style=\"color: #A44185\">s PHP.&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            age: <\/span><span style=\"color: #174781\">40<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            isHappy: <\/span><span style=\"color: #174781\">true<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            id: <\/span><span style=\"color: #174781\">2<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            firstname: <\/span><span style=\"color: #A44185\">&#39;John&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            lastname: <\/span><span style=\"color: #A44185\">&#39;Doe&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            bio: <\/span><span style=\"color: #A44185\">&#39;John Doe like<\/span><span style=\"color: #174781\">\\&#39;<\/span><span style=\"color: #A44185\">s JS.&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            age: <\/span><span style=\"color: #174781\">22<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            isHappy: <\/span><span style=\"color: #174781\">false<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    ];<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #7B30D0\">return<\/span><span style=\"color: #002339\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            {<\/span><span style=\"color: #2F86D2\">UsersList<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #7EB233\">map<\/span><span style=\"color: #002339\">((<\/span><span style=\"color: #B1108E\">user<\/span><span style=\"color: #002339\">) <\/span><span style=\"color: #0991B6\">=&gt;<\/span><span style=\"color: #002339\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                &lt;<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                    &lt;<\/span><span style=\"color: #0444AC\">h3<\/span><span style=\"color: #002339\">&gt;{<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">firstname<\/span><span style=\"color: #002339\">} {<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">lastname<\/span><span style=\"color: #002339\">}: {<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">age<\/span><span style=\"color: #002339\">}&lt;\/<\/span><span style=\"color: #0444AC\">h3<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                    &lt;<\/span><span style=\"color: #0444AC\">p<\/span><span style=\"color: #002339\">&gt;{<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">bio<\/span><span style=\"color: #002339\">}&lt;\/<\/span><span style=\"color: #0444AC\">p<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                    &lt;<\/span><span style=\"color: #0444AC\">b<\/span><span style=\"color: #002339\">&gt;{<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">isHappy<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">?<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;Happy : D&#39;<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">:<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;Not happy&#39;<\/span><span style=\"color: #002339\">}&lt;\/<\/span><span style=\"color: #0444AC\">b<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                &lt;\/<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            ))}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;\/<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B30D0\">export<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">default<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">Users<\/span><span style=\"color: #002339\">;<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#FFF;color:#003353;font-size:12px;line-height:1;position:relative\">JavaScript<\/span><\/div>\n\n\n\n<p>We going edit the css file once again now we could edit the Users list<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-highlight-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#002339;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 35, 57, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#003353\">src\/main.css<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#002339;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>@import url(&#8216;https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;family=Lora:ital,wght@0,400..700;1,400..700&amp;display=swap&#8217;);\n\n* {\n    margin: 0;\n    padding: 0;\n}\n\nbody {\n    background-color: #333;\n    color: #ffffff;\n    font-weight: 300;\n    font-family: &#8220;Lora&#8221;, serif;\n}\n\n.TitleHeader {\n    background-color: #222;\n    padding: 25px 100px;\n    font-weight: 600;\n    font-family: &#8220;Lora&#8221;, serif;\n}\n\nmain {\n    margin: 50px 100px;\n    width: 50%;\n    float: left;\n}\n\n.UserRow {\n    margin-bottom: 50px;\n    background-color: blueviolet;\n    padding: 20px;\n}<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki slack-ochin\" style=\"background-color: #FFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #7B30D0\">@import<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #1AB394\">url<\/span><span style=\"color: #002339\">(<\/span><span style=\"color: #A44185\">&#39;https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&amp;family=Lora:ital,wght@0,400..700;1,400..700&amp;display=swap&#39;<\/span><span style=\"color: #002339\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0444AC\">*<\/span><span style=\"color: #002339\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">margin<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">0<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">padding<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">0<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0444AC\">body<\/span><span style=\"color: #002339\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">background-color<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">#333<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">color<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">#ffffff<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">font-weight<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">300<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">font-family<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #A44185\">&quot;Lora&quot;<\/span><span style=\"color: #002339\">, <\/span><span style=\"color: #174781\">serif<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #DF8618; font-style: italic\">.TitleHeader<\/span><span style=\"color: #002339\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">background-color<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">#222<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">padding<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">25<\/span><span style=\"color: #7B30D0\">px<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #174781\">100<\/span><span style=\"color: #7B30D0\">px<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">font-weight<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">600<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">font-family<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #A44185\">&quot;Lora&quot;<\/span><span style=\"color: #002339\">, <\/span><span style=\"color: #174781\">serif<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #0444AC\">main<\/span><span style=\"color: #002339\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">margin<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">50<\/span><span style=\"color: #7B30D0\">px<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #174781\">100<\/span><span style=\"color: #7B30D0\">px<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">width<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">50<\/span><span style=\"color: #7B30D0\">%<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">float<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">left<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #DF8618; font-style: italic\">.UserRow<\/span><span style=\"color: #002339\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">margin-bottom<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">50<\/span><span style=\"color: #7B30D0\">px<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">background-color<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">blueviolet<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #DC3EB7\">padding<\/span><span style=\"color: #002339\">: <\/span><span style=\"color: #174781\">20<\/span><span style=\"color: #7B30D0\">px<\/span><span style=\"color: #002339\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#FFF;color:#003353;font-size:12px;line-height:1;position:relative\">CSS<\/span><\/div>\n\n\n\n<p>Adding className on div in Users.js<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-highlight-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#002339;--cbp-line-number-width:calc(2 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 35, 57, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#003353\">src\/components\/Users.js<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#002339;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>function Users() {\n    let UsersList = [\n        {\n            id: 1,\n            firstname: &#8216;Bob&#8217;,\n            lastname: &#8216;Marley&#8217;,\n            bio: &#8216;Bob Marley like\\&#8217;s PHP.&#8217;,\n            age: 40,\n            isHappy: true\n        },\n        {\n            id: 2,\n            firstname: &#8216;John&#8217;,\n            lastname: &#8216;Doe&#8217;,\n            bio: &#8216;John Doe like\\&#8217;s JS.&#8217;,\n            age: 22,\n            isHappy: false\n        }\n    ];\n\n    return(\n        &lt;div>\n            {UsersList.map((user) => (\n                &lt;div className=&#8221;UserRow&#8221;>\n                        &lt;h3>{user.firstname} {user.lastname}: {user.age}&lt;\/h3>\n                        &lt;p>{user.bio}&lt;\/p>\n                        &lt;b>{user.isHappy ? &#8216;Happy : D&#8217; : &#8216;Not happy&#8217;}&lt;\/b>\n                &lt;\/div>\n            ))}\n        &lt;\/div>\n    )\n}\n\nexport default Users;<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki slack-ochin\" style=\"background-color: #FFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #0991B6\">function<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7EB233\">Users<\/span><span style=\"color: #002339\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #0991B6\">let<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">UsersList<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #002339\"> [<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            id: <\/span><span style=\"color: #174781\">1<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            firstname: <\/span><span style=\"color: #A44185\">&#39;Bob&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            lastname: <\/span><span style=\"color: #A44185\">&#39;Marley&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            bio: <\/span><span style=\"color: #A44185\">&#39;Bob Marley like<\/span><span style=\"color: #174781\">\\&#39;<\/span><span style=\"color: #A44185\">s PHP.&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            age: <\/span><span style=\"color: #174781\">40<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            isHappy: <\/span><span style=\"color: #174781\">true<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        },<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            id: <\/span><span style=\"color: #174781\">2<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            firstname: <\/span><span style=\"color: #A44185\">&#39;John&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            lastname: <\/span><span style=\"color: #A44185\">&#39;Doe&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            bio: <\/span><span style=\"color: #A44185\">&#39;John Doe like<\/span><span style=\"color: #174781\">\\&#39;<\/span><span style=\"color: #A44185\">s JS.&#39;<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            age: <\/span><span style=\"color: #174781\">22<\/span><span style=\"color: #002339\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            isHappy: <\/span><span style=\"color: #174781\">false<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    ];<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #7B30D0\">return<\/span><span style=\"color: #002339\">(<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            {<\/span><span style=\"color: #2F86D2\">UsersList<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #7EB233\">map<\/span><span style=\"color: #002339\">((<\/span><span style=\"color: #B1108E\">user<\/span><span style=\"color: #002339\">) <\/span><span style=\"color: #0991B6\">=&gt;<\/span><span style=\"color: #002339\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                &lt;<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #DF8618; font-style: italic\">className<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #A44185\">&quot;UserRow&quot;<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                        &lt;<\/span><span style=\"color: #0444AC\">h3<\/span><span style=\"color: #002339\">&gt;{<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">firstname<\/span><span style=\"color: #002339\">} {<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">lastname<\/span><span style=\"color: #002339\">}: {<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">age<\/span><span style=\"color: #002339\">}&lt;\/<\/span><span style=\"color: #0444AC\">h3<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                        &lt;<\/span><span style=\"color: #0444AC\">p<\/span><span style=\"color: #002339\">&gt;{<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">bio<\/span><span style=\"color: #002339\">}&lt;\/<\/span><span style=\"color: #0444AC\">p<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                        &lt;<\/span><span style=\"color: #0444AC\">b<\/span><span style=\"color: #002339\">&gt;{<\/span><span style=\"color: #2F86D2\">user<\/span><span style=\"color: #002339\">.<\/span><span style=\"color: #2F86D2\">isHappy<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">?<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;Happy : D&#39;<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">:<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #A44185\">&#39;Not happy&#39;<\/span><span style=\"color: #002339\">}&lt;\/<\/span><span style=\"color: #0444AC\">b<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">                &lt;\/<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            ))}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;\/<\/span><span style=\"color: #0444AC\">div<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B30D0\">export<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">default<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">Users<\/span><span style=\"color: #002339\">;<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#FFF;color:#003353;font-size:12px;line-height:1;position:relative\">JavaScript<\/span><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro padding-bottom-disabled cbp-has-line-numbers cbp-highlight-hover\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#002339;--cbp-line-number-width:calc(1 * 0.6 * .875rem);--cbp-line-highlight-color:rgba(0, 35, 57, 0.2);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#f2f2f2;color:#003353\">src\/components\/Header.js<\/span><span role=\"button\" tabindex=\"0\" style=\"color:#002339;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>function Header({title}){\n    return (\n        &lt;header className=&#8221;TitleHeader&#8221;>\n            {title}\n        &lt;\/header>\n    )\n}\n\nexport default Header;<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki slack-ochin\" style=\"background-color: #FFF\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #0991B6\">function<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7EB233\">Header<\/span><span style=\"color: #002339\">({<\/span><span style=\"color: #B1108E\">title<\/span><span style=\"color: #002339\">}){<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    <\/span><span style=\"color: #7B30D0\">return<\/span><span style=\"color: #002339\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;<\/span><span style=\"color: #0444AC\">header<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #DF8618; font-style: italic\">className<\/span><span style=\"color: #7B30D0\">=<\/span><span style=\"color: #A44185\">&quot;TitleHeader&quot;<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">            {<\/span><span style=\"color: #2F86D2\">title<\/span><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">        &lt;\/<\/span><span style=\"color: #0444AC\">header<\/span><span style=\"color: #002339\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">    )<\/span><\/span>\n<span class=\"line\"><span style=\"color: #002339\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #7B30D0\">export<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #7B30D0\">default<\/span><span style=\"color: #002339\"> <\/span><span style=\"color: #2F86D2\">Header<\/span><span style=\"color: #002339\">;<\/span><\/span><\/code><\/pre><span style=\"display:flex;align-items:flex-end;padding:10px;width:100%;justify-content:flex-end;background-color:#FFF;color:#003353;font-size:12px;line-height:1;position:relative\">JavaScript<\/span><\/div>\n\n\n\n<p>Here our page<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"423\" src=\"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/05\/image-10-1024x423.png\" alt=\"\" class=\"wp-image-136\" srcset=\"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/05\/image-10-1024x423.png 1024w, https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/05\/image-10-300x124.png 300w, https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/05\/image-10-768x317.png 768w, https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-content\/uploads\/sites\/5\/2025\/05\/image-10.png 1157w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Today going make a preview list of users. After creating a new project We need to remove everything inside of return function.And replacing import &#8216;.\/App.css&#8217; to import &#8216;.\/main.css&#8217; and removing import logo line completely, we going create a new custom style. we aren&#8217;t going need that logo. New we going to create a new function &#8230; <a title=\"Working with lists\" class=\"read-more\" href=\"https:\/\/praktikant.thkit.ee\/reactjs\/en\/listing-users\/\" aria-label=\"Read more about Working with lists\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-101","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/pages\/101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/comments?post=101"}],"version-history":[{"count":14,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/pages\/101\/revisions"}],"predecessor-version":[{"id":146,"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/pages\/101\/revisions\/146"}],"wp:attachment":[{"href":"https:\/\/praktikant.thkit.ee\/reactjs\/en\/wp-json\/wp\/v2\/media?parent=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}