{"id":932,"date":"2025-10-10T19:06:44","date_gmt":"2025-10-10T16:06:44","guid":{"rendered":"https:\/\/khaledshs.com\/%d8%ba%d9%8a%d8%b1-%d9%85%d8%b5%d9%86%d9%81\/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%aa%d8%ab%d8%a8%d9%8a%d8%aa-%d9%88%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-react-js\/"},"modified":"2025-10-13T14:20:02","modified_gmt":"2025-10-13T11:20:02","slug":"%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%aa%d8%ab%d8%a8%d9%8a%d8%aa-%d9%88%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-react-js","status":"publish","type":"post","link":"https:\/\/khaledshs.com\/ar\/%d8%a7%d9%84%d8%af%d8%b1%d9%88%d8%b3-%d8%a7%d9%84%d8%aa%d8%b9%d9%84%d9%8a%d9%85%d9%8a%d8%a9\/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d8%aa%d8%ab%d8%a8%d9%8a%d8%aa-%d9%88%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-react-js\/","title":{"rendered":"\u0643\u064a\u0641\u064a\u0629 \u062a\u062b\u0628\u064a\u062a \u0648\u0627\u0633\u062a\u062e\u062f\u0627\u0645 react.js"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1152\" height=\"768\" src=\"https:\/\/khaledshs.com\/wp-content\/uploads\/2025\/10\/Install-and-Start-Using-React.js-Medium.png\" alt=\"\" class=\"wp-image-927\" srcset=\"https:\/\/khaledshs.com\/wp-content\/uploads\/2025\/10\/Install-and-Start-Using-React.js-Medium.png 1152w, https:\/\/khaledshs.com\/wp-content\/uploads\/2025\/10\/Install-and-Start-Using-React.js-Medium-300x200.png 300w, https:\/\/khaledshs.com\/wp-content\/uploads\/2025\/10\/Install-and-Start-Using-React.js-Medium-1024x683.png 1024w\" sizes=\"(max-width: 1152px) 100vw, 1152px\" \/><\/figure>\n\n<p>React.js \u0648\u0627\u062d\u062f\u0629 \u0645\u0646 \u0623\u0634\u0647\u0631 \u0645\u0643\u062a\u0628\u0627\u062a JavaScript \u0644\u0628\u0646\u0627\u0621 \u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645. \u0637\u0648\u0631\u062a\u0647\u0627 Facebook\u060c \u0648\u062a\u062a\u064a\u062d \u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u0625\u0646\u0634\u0627\u0621 \u0645\u0643\u0648\u0646\u0627\u062a \u0648\u0627\u062c\u0647\u0629 \u0645\u0633\u062a\u062e\u062f\u0645 \u0633\u0631\u064a\u0639\u0629 \u0648\u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0648\u0642\u0627\u0628\u0644\u0629 \u0644\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0648\u064a\u0628.<br\/>\u064a\u0631\u0634\u062f\u0643 \u0647\u0630\u0627 \u0627\u0644\u062f\u0644\u064a\u0644 \u062e\u0644\u0627\u0644 \u0625\u0639\u062f\u0627\u062f \u0628\u064a\u0626\u0629 \u062a\u0637\u0648\u064a\u0631 React \u0648\u0625\u0646\u0634\u0627\u0621 \u062a\u0637\u0628\u064a\u0642 React \u0627\u0644\u0623\u0648\u0644. <\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\">\u0645\u0642\u062f\u0645\u0629<\/h2>\n\n<p>\u064a\u0628\u0633\u0637 React \u0628\u0646\u0627\u0621 \u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0647\u0646\u062f\u0633\u0629 \u0645\u0639\u0645\u0627\u0631\u064a\u0629 \u0642\u0627\u0626\u0645\u0629 \u0639\u0644\u0649 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a. \u0643\u0644 \u062c\u0632\u0621 \u0645\u0646 \u0648\u0627\u062c\u0647\u0629 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u2014 \u0645\u062b\u0644 \u0627\u0644\u0623\u0632\u0631\u0627\u0631 \u0648\u0627\u0644\u0646\u0645\u0627\u0630\u062c \u0623\u0648 \u0623\u0634\u0631\u0637\u0629 \u0627\u0644\u062a\u0646\u0642\u0644 \u2014 \u064a\u0645\u0643\u0646 \u0625\u0646\u0634\u0627\u0624\u0647 \u0643\u0645\u0643\u0648\u0646 \u0645\u0633\u062a\u0642\u0644 \u064a\u0633\u0647\u0644 \u0625\u0639\u0627\u062f\u0629 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647 \u0648\u0635\u064a\u0627\u0646\u062a\u0647. <\/p>\n\n<p>\u0641\u064a \u0647\u0630\u0627 \u0627\u0644\u062f\u0631\u0633 (\u062f\u0644\u064a\u0644 \u0627\u0644\u0645\u0628\u062a\u062f\u0626\u064a\u0646 \u0644\u0640 react.js)\u060c \u0633\u062a\u062a\u0639\u0644\u0645 \u0643\u064a\u0641\u064a\u0629:<\/p>\n\n<ol class=\"wp-block-list\">\n<li>\u062a\u062b\u0628\u064a\u062a Node.js \u0648 npm (\u0645\u0637\u0644\u0648\u0628\u0627\u0646 \u0644\u0640 React)<\/li>\n\n\n\n<li>\u0625\u0646\u0634\u0627\u0621 \u0645\u0634\u0631\u0648\u0639 React \u062c\u062f\u064a\u062f \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 <strong>Create React App<\/strong><\/li>\n\n\n\n<li>\u062a\u0634\u063a\u064a\u0644 \u062e\u0627\u062f\u0645 \u0627\u0644\u062a\u0637\u0648\u064a\u0631<\/li>\n\n\n\n<li>\u0641\u0647\u0645 \u0628\u0646\u064a\u0629 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/li>\n\n\n\n<li>\u062a\u0639\u062f\u064a\u0644 \u0645\u0643\u0648\u0646 React \u0627\u0644\u0623\u0648\u0644<\/li>\n<\/ol>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u0645\u062a\u0637\u0644\u0628\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/h2>\n\n<p>\u0642\u0628\u0644 \u0627\u0644\u0628\u062f\u0621\u060c \u062a\u0623\u0643\u062f \u0645\u0646 \u0623\u0646 \u0644\u062f\u064a\u0643:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0645\u0639\u0631\u0641\u0629 \u0623\u0633\u0627\u0633\u064a\u0629<\/strong> \u0628\u0640 HTML \u0648 CSS \u0648 JavaScript<\/li>\n\n\n\n<li><strong>\u0645\u062d\u0631\u0631 \u0623\u0643\u0648\u0627\u062f<\/strong> \u0645\u062b\u0644 <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Visual Studio Code<\/a><\/li>\n\n\n\n<li><strong>Node.js \u0648 npm<\/strong> \u0645\u062b\u0628\u062a\u0627\u0646 \u0639\u0644\u0649 \u0646\u0638\u0627\u0645\u0643<\/li>\n<\/ul>\n\n<p>\u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0645\u0627 \u0625\u0630\u0627 \u0643\u0627\u0646 Node.js \u0648 npm \u0645\u062b\u0628\u062a\u064a\u0646 \u0628\u0627\u0644\u0641\u0639\u0644. \u064a\u0645\u0643\u0646\u0643 \u062a\u0639\u0644\u0645 \u0643\u064a\u0641\u064a\u0629 \u062a\u062b\u0628\u064a\u062a Node.js \u0639\u0644\u0649 \u062c\u0647\u0627\u0632\u0643 \u0645\u0646 \u0647\u0630\u0627 <a href=\"https:\/\/khaledshs.com\/ar\/%d8%a7%d9%84%d8%af%d8%b1%d9%88%d8%b3-%d8%a7%d9%84%d8%aa%d8%b9%d9%84%d9%8a%d9%85%d9%8a%d8%a9\/%d9%83%d9%8a%d9%81%d9%8a%d8%a9-%d9%86%d8%b4%d8%b1-node-js-%d8%b9%d9%84%d9%89-ubuntu-24-04-%d8%a5%d8%b9%d8%af%d8%a7%d8%af-%d8%a7%d9%84%d8%a5%d9%86%d8%aa%d8%a7%d8%ac\/\" target=\"_blank\" rel=\"noopener\" title=\"&#x643;&#x64A;&#x641;&#x64A;&#x629; &#x646;&#x634;&#x631; node.js &#x639;&#x644;&#x649; ubuntu 24.04 (&#x625;&#x639;&#x62F;&#x627;&#x62F; &#x627;&#x644;&#x625;&#x646;&#x62A;&#x627;&#x62C;)\">\u0627\u0644\u0631\u0627\u0628\u0637<\/a>: <\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" 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;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>node -v\nnpm -v\n<\/textarea><\/pre><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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">node<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">-v<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">npm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">-v<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<p>\u0625\u0630\u0627 \u0644\u0645 \u064a\u0643\u0648\u0646\u0627 \u0645\u062b\u0628\u062a\u064a\u0646\u060c \u062d\u0645\u0644\u0647\u0645\u0627 \u0645\u0646 <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener\" title=\"\">\u0645\u0648\u0642\u0639 Node.js \u0627\u0644\u0631\u0633\u0645\u064a<\/a>.<\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u062e\u0637\u0648\u0629 1 \u2014 \u062a\u062b\u0628\u064a\u062a node.js \u0648 npm<\/h2>\n\n<ol class=\"wp-block-list\">\n<li>\u0632\u0631 <a>https:\/\/nodejs.org\/<\/a><\/li>\n\n\n\n<li>\u062d\u0645\u0644 \u0625\u0635\u062f\u0627\u0631 <strong>LTS (\u0627\u0644\u062f\u0639\u0645 \u0637\u0648\u064a\u0644 \u0627\u0644\u0645\u062f\u0649)<\/strong>.<\/li>\n\n\n\n<li>\u062b\u0628\u062a\u0647 \u0628\u0627\u062a\u0628\u0627\u0639 \u062a\u0639\u0644\u064a\u0645\u0627\u062a \u0627\u0644\u0625\u0639\u062f\u0627\u062f.<\/li>\n\n\n\n<li>\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u062a\u062b\u0628\u064a\u062a:<\/li>\n<\/ol>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" 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;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>node -v\nnpm -v\n<\/textarea><\/pre><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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">node<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">-v<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">npm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">-v<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u062e\u0637\u0648\u0629 2 \u2014 \u0625\u0646\u0634\u0627\u0621 \u062a\u0637\u0628\u064a\u0642 react \u062c\u062f\u064a\u062f<\/h2>\n\n<p>\u064a\u0648\u0641\u0631 React \u0637\u0631\u064a\u0642\u0629 \u0628\u0633\u064a\u0637\u0629 \u0644\u0628\u062f\u0621 \u0645\u0634\u0631\u0648\u0639 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062f\u0627\u0629 <strong>Create React App<\/strong> \u0627\u0644\u0631\u0633\u0645\u064a\u0629.<\/p>\n\n<p>\u0634\u063a\u0644 \u0627\u0644\u0623\u0645\u0631 \u0627\u0644\u062a\u0627\u0644\u064a \u0641\u064a terminal:<\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" 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;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>npx create-react-app my-react-app\n<\/textarea><\/pre><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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">npx<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">create-react-app<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">my-react-app<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<p>\u0627\u0644\u0634\u0631\u062d:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><code>npx<\/code>  \u064a\u0634\u063a\u0644 \u0623\u0648\u0627\u0645\u0631 \u0645\u0646 npm \u0628\u062f\u0648\u0646 \u062a\u062b\u0628\u064a\u062a \u0639\u0627\u0645.<\/li>\n\n\n\n<li><code>create-react-app<\/code>  \u064a\u0646\u0634\u0626 \u0645\u0634\u0631\u0648\u0639 React \u062c\u0627\u0647\u0632 \u0644\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645.<\/li>\n\n\n\n<li><code>my-react-app<\/code>  \u0647\u0648 \u0627\u0633\u0645 \u0645\u0634\u0631\u0648\u0639\u0643 \u2014 \u064a\u0645\u0643\u0646\u0643 \u062a\u063a\u064a\u064a\u0631\u0647 \u0644\u0623\u064a \u0634\u064a\u0621.<\/li>\n<\/ul>\n\n<p>\u0633\u064a\u062b\u0628\u062a \u0647\u0630\u0627 \u062c\u0645\u064a\u0639 \u0627\u0644\u062a\u0628\u0639\u064a\u0627\u062a \u0627\u0644\u0636\u0631\u0648\u0631\u064a\u0629 \u0648\u064a\u0646\u0634\u0626 \u0628\u0646\u064a\u0629 \u0627\u0644\u0645\u062c\u0644\u062f\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629.<\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u062e\u0637\u0648\u0629 3 \u2014 \u0627\u0644\u0627\u0646\u062a\u0642\u0627\u0644 \u0644\u0645\u062c\u0644\u062f \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/h2>\n\n<p>\u0628\u0639\u062f \u0627\u0644\u062a\u062b\u0628\u064a\u062a\u060c \u0627\u0646\u062a\u0642\u0644 \u0644\u062f\u0644\u064a\u0644 \u0645\u0634\u0631\u0648\u0639\u0643:<\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" 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;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>cd my-react-app\n<\/textarea><\/pre><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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">cd<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">my-react-app<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u062e\u0637\u0648\u0629 4 \u2014 \u062a\u0634\u063a\u064a\u0644 \u062e\u0627\u062f\u0645 \u0627\u0644\u062a\u0637\u0648\u064a\u0631<\/h2>\n\n<p>\u0634\u063a\u0644 \u0627\u0644\u0623\u0645\u0631 \u0627\u0644\u062a\u0627\u0644\u064a \u0644\u0628\u062f\u0621 \u062a\u0637\u0628\u064a\u0642 React:<\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" 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;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>npm start\n<\/textarea><\/pre><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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">npm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">start<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<p>\u0633\u064a\u0642\u0648\u0645 \u0647\u0630\u0627 \u0628\u0640:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>\u062a\u062c\u0645\u064a\u0639 \u0643\u0648\u062f React.<\/li>\n\n\n\n<li>\u062a\u0634\u063a\u064a\u0644 \u062e\u0627\u062f\u0645 \u0627\u0644\u062a\u0637\u0648\u064a\u0631.<\/li>\n\n\n\n<li>\u0641\u062a\u062d \u062a\u0637\u0628\u064a\u0642\u0643 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0641\u064a \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u0639\u0644\u0649 <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a>.<\/li>\n<\/ul>\n\n<p>\u0633\u062a\u0634\u0627\u0647\u062f \u0635\u0641\u062d\u0629 \u062a\u0631\u062d\u064a\u0628 React \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u062a\u0624\u0643\u062f \u0623\u0646 \u0643\u0644 \u0634\u064a\u0621 \u064a\u0639\u0645\u0644 \u0628\u0634\u0643\u0644 \u0635\u062d\u064a\u062d.<\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u062e\u0637\u0648\u0629 5 \u2014 \u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u0628\u0646\u064a\u0629 \u0627\u0644\u0645\u0634\u0631\u0648\u0639<\/h2>\n\n<p>\u064a\u062d\u062a\u0648\u064a \u062a\u0637\u0628\u064a\u0642 React \u0639\u0644\u0649 \u0627\u0644\u0623\u062f\u0644\u0629 \u0648\u0627\u0644\u0645\u0644\u0641\u0627\u062a \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0627\u0644\u062a\u0627\u0644\u064a\u0629:<\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" 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;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>my-react-app\/\n\u251c\u2500\u2500 node_modules\/ # \u062a\u0628\u0639\u064a\u0627\u062a \u0627\u0644\u0645\u0634\u0631\u0648\u0639\n\u251c\u2500\u2500 public\/ # \u0627\u0644\u0645\u0644\u0641\u0627\u062a \u0627\u0644\u062b\u0627\u0628\u062a\u0629 (HTML\u060c \u0627\u0644\u0623\u064a\u0642\u0648\u0646\u0627\u062a)\n\u251c\u2500\u2500 src\/ # \u0643\u0648\u062f React \u0627\u0644\u0631\u0626\u064a\u0633\u064a\n\u2502 \u251c\u2500\u2500 App.js # \u0627\u0644\u0645\u0643\u0648\u0646 \u0627\u0644\u062c\u0630\u0631\n\u2502 \u251c\u2500\u2500 index.js # \u0646\u0642\u0637\u0629 \u0627\u0644\u062f\u062e\u0648\u0644\n\u2502 \u2514\u2500\u2500 App.css # \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0645\u0643\u0648\u0646\n\u251c\u2500\u2500 package.json # \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0645\u0634\u0631\u0648\u0639\n\u2514\u2500\u2500 README.md\n<\/textarea><\/pre><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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">my-react-app\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u251c\u2500\u2500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">node_modules\/<\/span><span style=\"color: #D8DEE9FF\">       <\/span><span style=\"color: #616E88\"># Project dependencies<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u251c\u2500\u2500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">public\/<\/span><span style=\"color: #D8DEE9FF\">             <\/span><span style=\"color: #616E88\"># Static files (HTML, icons)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u251c\u2500\u2500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">src\/<\/span><span style=\"color: #D8DEE9FF\">                <\/span><span style=\"color: #616E88\"># Main React source code<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u2502<\/span><span style=\"color: #D8DEE9FF\">   <\/span><span style=\"color: #A3BE8C\">\u251c\u2500\u2500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">App.js<\/span><span style=\"color: #D8DEE9FF\">          <\/span><span style=\"color: #616E88\"># Root component<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u2502<\/span><span style=\"color: #D8DEE9FF\">   <\/span><span style=\"color: #A3BE8C\">\u251c\u2500\u2500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">index.js<\/span><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #616E88\"># Entry point<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u2502<\/span><span style=\"color: #D8DEE9FF\">   <\/span><span style=\"color: #A3BE8C\">\u2514\u2500\u2500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">App.css<\/span><span style=\"color: #D8DEE9FF\">         <\/span><span style=\"color: #616E88\"># Component styling<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u251c\u2500\u2500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">package.json<\/span><span style=\"color: #D8DEE9FF\">        <\/span><span style=\"color: #616E88\"># Project configuration<\/span><\/span>\n<span class=\"line\"><span style=\"color: #88C0D0\">\u2514\u2500\u2500<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">README.md<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<ul class=\"wp-block-list\">\n<li><strong><code>src\/App.js<\/code><\/strong>  \u2014 \u0645\u0644\u0641 \u0627\u0644\u0645\u0643\u0648\u0646 \u0627\u0644\u0631\u0626\u064a\u0633\u064a. \u0633\u062a\u062d\u0631\u0631 \u0647\u0630\u0627 \u0644\u062a\u063a\u064a\u064a\u0631 \u0645\u0627 \u064a\u0638\u0647\u0631 \u0639\u0644\u0649 \u0627\u0644\u0634\u0627\u0634\u0629. <\/li>\n\n\n\n<li><strong><code>src\/index.js<\/code><\/strong>  \u2014 \u064a\u0639\u0631\u0636 \u062a\u0637\u0628\u064a\u0642 React \u0641\u064a \u0639\u0646\u0635\u0631 HTML \u0627\u0644\u062c\u0630\u0631.<\/li>\n\n\n\n<li><strong><code>public\/index.html<\/code><\/strong>  \u2014 \u0642\u0627\u0644\u0628 HTML \u0627\u0644\u0631\u0626\u064a\u0633\u064a.<\/li>\n<\/ul>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u062e\u0637\u0648\u0629 6 \u2014 \u062a\u0639\u062f\u064a\u0644 \u0645\u0643\u0648\u0646 react \u0627\u0644\u0623\u0648\u0644<\/h2>\n\n<p>\u0627\u0641\u062a\u062d \u0645\u0644\u0641 <code>src\/App.js<\/code> \u0648\u0627\u0633\u062a\u0628\u062f\u0644 \u0645\u062d\u062a\u0648\u064a\u0627\u062a\u0647 \u0628\u0640:<\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" 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;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>function App() {\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;\u0645\u0631\u062d\u0628\u0627\u064b\u060c React!&lt;\/h1&gt;\n      &lt;p&gt;\u0623\u0647\u0644\u0627\u064b \u0628\u0643 \u0641\u064a \u062a\u0637\u0628\u064a\u0642 React \u0627\u0644\u0623\u0648\u0644.&lt;\/p&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;\n<\/textarea><\/pre><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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #81A1C1\">function<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #88C0D0\">App<\/span><span style=\"color: #ECEFF4\">()<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #ECEFF4\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  <\/span><span style=\"color: #81A1C1\">return<\/span><span style=\"color: #D8DEE9FF\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;h1&gt;<\/span><span style=\"color: #D8DEE9FF\">Hello, React!<\/span><span style=\"color: #81A1C1\">&lt;\/h1&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">      <\/span><span style=\"color: #81A1C1\">&lt;p&gt;<\/span><span style=\"color: #D8DEE9FF\">Welcome to your first React application.<\/span><span style=\"color: #81A1C1\">&lt;\/p&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">    <\/span><span style=\"color: #81A1C1\">&lt;\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D8DEE9FF\">  )<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ECEFF4\">}<\/span><\/span>\n<span class=\"line\"\/>\n<span class=\"line\"><span style=\"color: #81A1C1\">export<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #81A1C1\">default<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #D8DEE9\">App<\/span><span style=\"color: #81A1C1\">;<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<p>\u0627\u062d\u0641\u0638 \u0627\u0644\u0645\u0644\u0641. \u0633\u064a\u062a\u0645 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0645\u062a\u0635\u0641\u062d \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0648\u0633\u062a\u0634\u0627\u0647\u062f \u0631\u0633\u0627\u0644\u062a\u0643 \u0627\u0644\u062c\u062f\u064a\u062f\u0629 \u0639\u0644\u0649 \u0627\u0644\u0635\u0641\u062d\u0629. <\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u062e\u0637\u0648\u0629 7 \u2014 \u0627\u0644\u0628\u0646\u0627\u0621 \u0644\u0644\u0625\u0646\u062a\u0627\u062c (\u0627\u062e\u062a\u064a\u0627\u0631\u064a)<\/h2>\n\n<p>\u0639\u0646\u062f\u0645\u0627 \u064a\u0635\u0628\u062d \u062a\u0637\u0628\u064a\u0642\u0643 \u062c\u0627\u0647\u0632\u0627\u064b \u0644\u0644\u0646\u0634\u0631\u060c \u064a\u0645\u0643\u0646\u0643 \u0625\u0646\u0634\u0627\u0621 \u0628\u0646\u0627\u0621 \u0645\u062d\u0633\u0646:<\/p>\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" 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;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#2e3440ff\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"\/><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"\/><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"\/><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#d8dee9ff;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>npm run build\n<\/textarea><\/pre><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 nord\" style=\"background-color: #2e3440ff\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #88C0D0\">npm<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">run<\/span><span style=\"color: #D8DEE9FF\"> <\/span><span style=\"color: #A3BE8C\">build<\/span><\/span>\n<span class=\"line\"\/><\/code><\/pre><\/div>\n\n<p>\u064a\u0646\u0634\u0626 \u0647\u0630\u0627 \u0627\u0644\u0623\u0645\u0631 \u062f\u0644\u064a\u0644 <code>build\/<\/code> \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0645\u0644\u0641\u0627\u062a \u0627\u0644\u0625\u0646\u062a\u0627\u062c \u0627\u0644\u0645\u0636\u063a\u0648\u0637\u0629 \u0627\u0644\u062c\u0627\u0647\u0632\u0629 \u0644\u0644\u0631\u0641\u0639 \u0639\u0644\u0649 \u0623\u064a \u062e\u0627\u062f\u0645 \u0648\u064a\u0628.<\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u062e\u0627\u062a\u0645\u0629<\/h2>\n\n<p>\u0644\u0642\u062f \u0646\u062c\u062d\u062a \u0641\u064a \u062a\u062b\u0628\u064a\u062a React.js \u0648\u0625\u0646\u0634\u0627\u0621 \u0645\u0634\u0631\u0648\u0639\u0643 \u0627\u0644\u0623\u0648\u0644 \u0648\u0639\u0631\u0636 \u0645\u0643\u0648\u0646 \u0628\u0633\u064a\u0637 \u0639\u0644\u0649 \u0627\u0644\u0634\u0627\u0634\u0629. \u0645\u0646 \u0647\u0646\u0627\u060c \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0628\u062f\u0621 \u0641\u064a \u0627\u0633\u062a\u0643\u0634\u0627\u0641 \u0645\u064a\u0632\u0627\u062a React \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629\u060c \u0645\u062b\u0644: <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635<\/strong><\/li>\n\n\n\n<li><strong>\u0627\u0644\u062d\u0627\u0644\u0629 \u0648\u0627\u0644\u062e\u0637\u0627\u0641\u0627\u062a<\/strong><\/li>\n\n\n\n<li><strong>\u0645\u0639\u0627\u0644\u062c\u0629 \u0627\u0644\u0623\u062d\u062f\u0627\u062b<\/strong><\/li>\n\n\n\n<li><strong>\u0627\u0644\u062a\u0648\u062c\u064a\u0647 (react router)<\/strong><\/li>\n\n\n\n<li><strong>\u062a\u0643\u0627\u0645\u0644 API (fetch \u0623\u0648 Axios)<\/strong><\/li>\n<\/ul>\n\n<p>\u0644\u0644\u062a\u0639\u0644\u0645 \u0627\u0644\u0645\u0641\u0635\u0644 \u0623\u0643\u062b\u0631\u060c \u0631\u0627\u062c\u0639:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"noopener\" title=\"\">\u0648\u062b\u0627\u0626\u0642 React \u0627\u0644\u0631\u0633\u0645\u064a\u0629<\/a><\/li>\n<\/ul>\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React.js \u0648\u0627\u062d\u062f\u0629 \u0645\u0646 \u0623\u0634\u0647\u0631 \u0645\u0643\u062a\u0628\u0627\u062a JavaScript \u0644\u0628\u0646\u0627\u0621 \u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645. \u0637\u0648\u0631\u062a\u0647\u0627 Facebook\u060c \u0648\u062a\u062a\u064a\u062d \u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u0625\u0646\u0634\u0627\u0621 \u0645\u0643\u0648\u0646\u0627\u062a \u0648\u0627\u062c\u0647\u0629 \u0645\u0633\u062a\u062e\u062f\u0645 \u0633\u0631\u064a\u0639\u0629 \u0648\u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u0648\u0642\u0627\u0628\u0644\u0629 \u0644\u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0627\u0644\u0648\u064a\u0628.\u064a\u0631\u0634\u062f\u0643 \u0647\u0630\u0627&#8230;<\/p>\n","protected":false},"author":1,"featured_media":930,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[35],"tags":[],"class_list":["post-932","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-35"],"acf":[],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/khaledshs.com\/wp-content\/uploads\/2025\/10\/Install-and-Start-Using-React.js-Medium.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/posts\/932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/comments?post=932"}],"version-history":[{"count":2,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/posts\/932\/revisions"}],"predecessor-version":[{"id":938,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/posts\/932\/revisions\/938"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/media\/930"}],"wp:attachment":[{"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/media?parent=932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/categories?post=932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/khaledshs.com\/ar\/wp-json\/wp\/v2\/tags?post=932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}