{"id":128800,"date":"2024-11-08T13:48:31","date_gmt":"2024-11-08T18:48:31","guid":{"rendered":"https:\/\/www.inmotionhosting.com\/support\/?p=128800"},"modified":"2025-02-04T18:00:46","modified_gmt":"2025-02-04T23:00:46","slug":"install-react","status":"publish","type":"post","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/","title":{"rendered":"Step-by-Step Guide to Installing React (Updated for 2024)"},"content":{"rendered":"<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react-1024x538.png\" alt=\"Installing React - Step By Step Guide\" class=\"wp-image-128807\" srcset=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react-1024x538.png 1024w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react-300x158.png 300w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react-768x403.png 768w, https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react.png 1200w\" sizes=\"auto, (min-width: 1360px) 876px, (min-width: 960px) calc(61.58vw + 51px), calc(100vw - 80px)\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/react.dev\" target=\"_blank\" rel=\"noreferrer noopener\">React<\/a> is a popular JavaScript library for building user interfaces, especially single-page applications where dynamic content updates are essential. This guide will walk you through the updated steps to install React using the latest tools like <strong>Vite<\/strong> and <strong><a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/a-step-by-step-guide-to-installing-next-js\/\" target=\"_blank\" rel=\"noreferrer noopener\">Next.js<\/a><\/strong> and explain why you should use a framework tailored to your needs.<\/p>\n\n\n\n<h2 class=\"wp-block-heading toc-anchor\" id=\"what\">What Is React?<\/h2>\n\n\n\n<p>React, developed by Facebook, is a powerful library that makes building interactive and reusable user interface components easier. Its component-based architecture allows developers to create complex UIs by breaking them into smaller, manageable parts. It is widely used for creating single-page applications (SPAs) that update efficiently without full-page reloads.<\/p>\n\n\n\n<h2 class=\"wp-block-heading toc-anchor\" id=\"why\">Why Use React?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Component-based<\/strong>: Simplifies UI creation with reusable components.<\/li>\n\n\n\n<li><strong>Fast rendering<\/strong>: Optimizes performance through the virtual DOM.<\/li>\n\n\n\n<li><strong>Rich ecosystem<\/strong>: Supported by a strong community and a wide range of libraries.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading toc-anchor\" id=\"what-you-need\">What You Will Need<\/h2>\n\n\n\n<p>Before you begin, make sure you have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Node.js<\/strong>: This includes Node Package Manager (NPM), which is necessary for installing React.<\/li>\n\n\n\n<li><strong>A code editor<\/strong>: Visual Studio Code (VS Code) is a popular choice.<\/li>\n<\/ul>\n\n\n\n<p>You can check if Node.js is installed by running the following command in your terminal:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(26px, 1.625rem, 39px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"node -v\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><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=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #B392F0\">node<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">-v<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>If Node.js isn\u2019t installed, download and install it from the <a href=\"https:\/\/nodejs.org\/\">official Node.js website<\/a>. <\/p>\n\n\n\n<p>We <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">recommend sticking to a\u00a0<a href=\"https:\/\/www.inmotionhosting.com\/vps-hosting\" target=\"_blank\" rel=\"noopener\">VPS Hosting<\/a>\u00a0plan or a\u00a0<a href=\"https:\/\/www.inmotionhosting.com\/dedicated-servers\" target=\"_blank\" rel=\"noopener\">Dedicated Server<\/a>, allowing<\/span> you to install additional software.<\/p>\n\n\n<div class=\"jumbotron\"><p style=\"margin-top:0;\"><img decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/custom\/security.svg\" align=\"right\" alt=\"Secure VPS Hosting\" height=\"80\">Enjoy high-performance, lightning-fast servers with increased security and maximum up-time with our <a href=\"https:\/\/www.inmotionhosting.com\/vps-hosting\">Secure VPS Hosting<\/a>!<\/p>\r\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Linux VPS    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>cPanel or Control Web Panel    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Scalable    <img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/design.inmotionhosting.com\/assets\/icons\/standard\/check-blue.svg\" alt=\"check mark\" width=\"24\" height=\"24\" \/>Website Migration Assistance<\/p>\r\n<p style=\"margin:10px 0;\"><a class=\"btn btn-primary btn-lg\" href=\"https:\/\/www.inmotionhosting.com\/vps-hosting\/linux-vps\">Linux VPS Hosting<\/a><\/p><\/div>\n\n\n\n<h2 class=\"wp-block-heading toc-anchor\" id=\"guide\">Step-by-Step Guide to Installing React<\/h2>\n\n\n\n<p class=\"alert alert-warning\">You may still come across tutorials or guides that recommend <strong>Create React App (CRA)<\/strong> as a starting point for React projects. However, it is important to note that CRA was deprecated in 2023 due to its outdated build processes and limited capabilities compared to modern tools. <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">Usin<\/span>g frameworks like\u00a0Vite,\u00a0Next.js, or\u00a0Remix\u00a0is now encouraged for new projects.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Create a React Application Using Vite<\/h3>\n\n\n\n<p><strong>Vite<\/strong> is now a popular choice for React projects due to its fast build times and modern development experience. To create a React app using Vite, follow these steps:<\/p>\n\n\n\n<p>Run the following command in your terminal: <\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(26px, 1.625rem, 39px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"npm create vite@latest my-react-app --template react\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><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=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #B392F0\">npm<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">create<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">vite@latest<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">my-react-app<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #79B8FF\">--template<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">react<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Explanation<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>npm create vite@latest<\/code> initializes a new Vite project.<\/li>\n\n\n\n<li><code>my-react-app<\/code> is the name of your project, which you can replace with any name you like.<\/li>\n\n\n\n<li><code>--template react<\/code> sets up the project specifically for React.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Navigate to Your Project Directory<\/h3>\n\n\n\n<p>Move into your project folder:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(26px, 1.625rem, 39px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"cd my-react-app\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><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=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #79B8FF\">cd<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">my-react-app<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Install Dependencies<\/h3>\n\n\n\n<p>Install all necessary project dependencies:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(26px, 1.625rem, 39px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"npm install\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><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=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #B392F0\">npm<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">install<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Start the React Application<\/h3>\n\n\n\n<p>Start the development server to see your application running locally:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(26px, 1.625rem, 39px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"npm run dev\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><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=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #B392F0\">npm<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">run<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">dev<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>This command opens your React app in your default browser at <code>http:\/\/localhost:5173\/<\/code> (or a different port if 5173 is in use). You should see the default Vite + React welcome page, indicating your setup is complete. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Explore the Project Structure<\/h3>\n\n\n\n<p>The Vite project structure will look similar to this:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(26px, 1.625rem, 39px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"my-react-app\/\n\u251c\u2500\u2500 node_modules\/\n\u251c\u2500\u2500 public\/\n\u2502   \u2514\u2500\u2500 index.html\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 App.css\n\u2502   \u251c\u2500\u2500 App.jsx\n\u2502   \u251c\u2500\u2500 main.jsx\n\u2502   \u2514\u2500\u2500 index.css\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 README.md\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><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=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #B392F0\">my-react-app\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">\u251c\u2500\u2500<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">node_modules\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">\u251c\u2500\u2500<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">public\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">\u2502<\/span><span style=\"color: #E1E4E8\">   <\/span><span style=\"color: #9ECBFF\">\u2514\u2500\u2500<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">index.html<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">\u251c\u2500\u2500<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">src\/<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">\u2502<\/span><span style=\"color: #E1E4E8\">   <\/span><span style=\"color: #9ECBFF\">\u251c\u2500\u2500<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">App.css<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">\u2502<\/span><span style=\"color: #E1E4E8\">   <\/span><span style=\"color: #9ECBFF\">\u251c\u2500\u2500<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">App.jsx<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">\u2502<\/span><span style=\"color: #E1E4E8\">   <\/span><span style=\"color: #9ECBFF\">\u251c\u2500\u2500<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">main.jsx<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">\u2502<\/span><span style=\"color: #E1E4E8\">   <\/span><span style=\"color: #9ECBFF\">\u2514\u2500\u2500<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">index.css<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">\u251c\u2500\u2500<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">package.json<\/span><\/span>\n<span class=\"line\"><span style=\"color: #B392F0\">\u2514\u2500\u2500<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">README.md<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Key Folders\/Files:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><code>src\/<\/code><\/strong>: Contains your React components and main code.<\/li>\n\n\n\n<li><strong><code>public\/<\/code><\/strong>: Holds static files such as <code>index.html<\/code>.<\/li>\n\n\n\n<li><strong><code>package.json<\/code><\/strong>: Lists dependencies and scripts for your project.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: Modify Your First Component<\/h3>\n\n\n\n<p>Open <code>App.jsx<\/code> in your code editor and replace the default content with:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono-NL.ttf\" style=\"font-size:clamp(16px, 1rem, 24px);font-family:Code-Pro-JetBrains-Mono-NL,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:clamp(26px, 1.625rem, 39px);--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"function App() {\n  return (\n    &lt;div&gt;\n      &lt;h1&gt;Hello, React with Vite!&lt;\/h1&gt;\n      &lt;p&gt;Welcome to your first React app using Vite.&lt;\/p&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;\" style=\"color:#e1e4e8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><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=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki github-dark\" style=\"background-color: #24292e\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #F97583\">function<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #B392F0\">App<\/span><span style=\"color: #E1E4E8\">() {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  <\/span><span style=\"color: #F97583\">return<\/span><span style=\"color: #E1E4E8\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">&lt;<\/span><span style=\"color: #B392F0\">div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">&lt;<\/span><span style=\"color: #B392F0\">h1&gt;Hello,<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">React<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">with<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">Vite!<\/span><span style=\"color: #F97583\">&lt;<\/span><span style=\"color: #9ECBFF\">\/h<\/span><span style=\"color: #F97583\">1&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">      <\/span><span style=\"color: #F97583\">&lt;<\/span><span style=\"color: #B392F0\">p&gt;Welcome<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">to<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">your<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">first<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">React<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">app<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">using<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">Vite.<\/span><span style=\"color: #F97583\">&lt;<\/span><span style=\"color: #9ECBFF\">\/<\/span><span style=\"color: #E1E4E8\">p<\/span><span style=\"color: #F97583\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">    <\/span><span style=\"color: #F97583\">&lt;<\/span><span style=\"color: #B392F0\">\/div&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">  );<\/span><\/span>\n<span class=\"line\"><span style=\"color: #E1E4E8\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #F97583\">export<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">default<\/span><span style=\"color: #E1E4E8\"> <\/span><span style=\"color: #9ECBFF\">App<\/span><span style=\"color: #E1E4E8\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Save your changes, and your browser will automatically refresh to display the updated content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading toc-anchor\" id=\"best-practices\">Best Practices for Using React<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Use functional components and hooks<\/strong>: Modern React development favors functional components with hooks (<code>useState<\/code>, <code>useEffect<\/code>) for cleaner, more readable code.<\/li>\n\n\n\n<li><strong>Keep components small and modular<\/strong>: Design components to focus on a single responsibility.<\/li>\n\n\n\n<li><strong>Maintain a clear folder structure<\/strong>: Organize components into subfolders as your app grows.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading toc-anchor\" id=\"framework\">Choosing the Right React Framework and Build Tools<\/h2>\n\n\n\n<p>When deciding how to set up a new React project, it\u2019s crucial to choose the right tool based on your project needs. Here\u2019s an overview of some frameworks and why you might use them, inspired by <a href=\"https:\/\/react.dev\/learn\/start-a-new-react-project\">React\u2019s official recommendations<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vite<\/strong>: Build tool that is ideal for simple, fast setups and development with React. It provides an optimized development experience and quick hot reloading.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/\">Next.js<\/a><\/strong>: A full-featured framework for building React applications with server-side rendering, static site generation, and API routes. Use this if you need more advanced routing and server capabilities.<\/li>\n\n\n\n<li><strong>Remix<\/strong>: Focuses on full-stack web development with a strong emphasis on progressive enhancement and server-side rendering. Consider this for applications that need more robust server interactions.<\/li>\n<\/ul>\n\n\n\n<p>Each of these frameworks and tools offers a modern, optimized way to start and build React applications with better performance and scalability compared to the now-deprecated CRA.<\/p>\n\n\n\n<h2 class=\"wp-block-heading toc-anchor\" id=\"conclusion\">Conclusion<\/h2>\n\n\n\n<p>With the deprecation of <strong>Create React App<\/strong>, modern tools like <strong>Vite<\/strong> and <strong>Next.js<\/strong> provide a more efficient and feature-rich environment for React development. By following this guide, you\u2019ve set up a React app using Vite and learned the essentials for starting your journey in building React applications. Explore these frameworks to find the best fit for your project\u2019s requirements and take your React skills to the next level.<\/p>\n\n\n\n<p class=\"alert alert-info\">For more tutorials and resources on React, check out <a href=\"https:\/\/www.inmotionhosting.com\/support\/\">our support articles<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React is a popular JavaScript library for building user interfaces, especially single-page applications where dynamic content updates are essential. This guide will walk you through the updated steps to install React using the latest tools like Vite and Next.js and explain why you should use a framework tailored to your needs. What Is React? React,<a class=\"moretag\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/\"> Read More ><\/a><\/p>\n","protected":false},"author":57032,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4573],"tags":[],"class_list":["post-128800","post","type-post","status-publish","format-standard","hentry","category-next-js"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Step-by-Step Guide to Installing React (Updated for 2024)<\/title>\n<meta name=\"description\" content=\"Learn how to install React using modern tools like Vite and Next.js after the deprecation of Create React App.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Step-by-Step Guide to Installing React (Updated for 2024)\" \/>\n<meta property=\"og:description\" content=\"Learn how to install React using modern tools like Vite and Next.js after the deprecation of Create React App.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/\" \/>\n<meta property=\"og:site_name\" content=\"InMotion Hosting Support Center\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/inmotionhosting\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-08T18:48:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-04T23:00:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react-1024x538.png\" \/>\n<meta name=\"author\" content=\"Derrell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:site\" content=\"@InMotionHosting\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Derrell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/\"},\"author\":{\"name\":\"Derrell\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0736f70b4077032374f89709cdc255b7\"},\"headline\":\"Step-by-Step Guide to Installing React (Updated for 2024)\",\"datePublished\":\"2024-11-08T18:48:31+00:00\",\"dateModified\":\"2025-02-04T23:00:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/\"},\"wordCount\":797,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react-1024x538.png\",\"articleSection\":[\"Next.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/\",\"name\":\"Step-by-Step Guide to Installing React (Updated for 2024)\",\"isPartOf\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react-1024x538.png\",\"datePublished\":\"2024-11-08T18:48:31+00:00\",\"dateModified\":\"2025-02-04T23:00:46+00:00\",\"description\":\"Learn how to install React using modern tools like Vite and Next.js after the deprecation of Create React App.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#primaryimage\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react.png\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.inmotionhosting.com\/support\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Step-by-Step Guide to Installing React (Updated for 2024)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#website\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"name\":\"InMotion Hosting Support Center\",\"description\":\"Web Hosting Support &amp; Tutorials\",\"publisher\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#organization\",\"name\":\"InMotion Hosting\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"contentUrl\":\"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg\",\"width\":696,\"height\":696,\"caption\":\"InMotion Hosting\"},\"image\":{\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/inmotionhosting\/\",\"https:\/\/x.com\/InMotionHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0736f70b4077032374f89709cdc255b7\",\"name\":\"Derrell\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/derrell-willis\"],\"url\":\"https:\/\/www.inmotionhosting.com\/support\/author\/derrellw\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Step-by-Step Guide to Installing React (Updated for 2024)","description":"Learn how to install React using modern tools like Vite and Next.js after the deprecation of Create React App.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/","og_locale":"en_US","og_type":"article","og_title":"Step-by-Step Guide to Installing React (Updated for 2024)","og_description":"Learn how to install React using modern tools like Vite and Next.js after the deprecation of Create React App.","og_url":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/","og_site_name":"InMotion Hosting Support Center","article_publisher":"https:\/\/www.facebook.com\/inmotionhosting\/","article_published_time":"2024-11-08T18:48:31+00:00","article_modified_time":"2025-02-04T23:00:46+00:00","og_image":[{"url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react-1024x538.png","type":"","width":"","height":""}],"author":"Derrell","twitter_card":"summary_large_image","twitter_creator":"@InMotionHosting","twitter_site":"@InMotionHosting","twitter_misc":{"Written by":"Derrell","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#article","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/"},"author":{"name":"Derrell","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0736f70b4077032374f89709cdc255b7"},"headline":"Step-by-Step Guide to Installing React (Updated for 2024)","datePublished":"2024-11-08T18:48:31+00:00","dateModified":"2025-02-04T23:00:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/"},"wordCount":797,"commentCount":0,"publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react-1024x538.png","articleSection":["Next.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/","url":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/","name":"Step-by-Step Guide to Installing React (Updated for 2024)","isPartOf":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#primaryimage"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react-1024x538.png","datePublished":"2024-11-08T18:48:31+00:00","dateModified":"2025-02-04T23:00:46+00:00","description":"Learn how to install React using modern tools like Vite and Next.js after the deprecation of Create React App.","breadcrumb":{"@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#primaryimage","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react.png","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2024\/11\/installing-react.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/install-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.inmotionhosting.com\/support\/"},{"@type":"ListItem","position":2,"name":"Step-by-Step Guide to Installing React (Updated for 2024)"}]},{"@type":"WebSite","@id":"https:\/\/www.inmotionhosting.com\/support\/#website","url":"https:\/\/www.inmotionhosting.com\/support\/","name":"InMotion Hosting Support Center","description":"Web Hosting Support &amp; Tutorials","publisher":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.inmotionhosting.com\/support\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.inmotionhosting.com\/support\/#organization","name":"InMotion Hosting","url":"https:\/\/www.inmotionhosting.com\/support\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/","url":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","contentUrl":"https:\/\/www.inmotionhosting.com\/support\/wp-content\/uploads\/2023\/02\/inmotion-hosting-logo-yoast.jpg","width":696,"height":696,"caption":"InMotion Hosting"},"image":{"@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/inmotionhosting\/","https:\/\/x.com\/InMotionHosting"]},{"@type":"Person","@id":"https:\/\/www.inmotionhosting.com\/support\/#\/schema\/person\/0736f70b4077032374f89709cdc255b7","name":"Derrell","sameAs":["https:\/\/www.linkedin.com\/in\/derrell-willis"],"url":"https:\/\/www.inmotionhosting.com\/support\/author\/derrellw\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"primary_category":{"id":4573,"name":"Next.js","slug":"next-js","link":"https:\/\/www.inmotionhosting.com\/support\/edu\/next-js\/"},"_links":{"self":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/128800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/users\/57032"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/comments?post=128800"}],"version-history":[{"count":4,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/128800\/revisions"}],"predecessor-version":[{"id":129792,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/posts\/128800\/revisions\/129792"}],"wp:attachment":[{"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/media?parent=128800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/categories?post=128800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inmotionhosting.com\/support\/wp-json\/wp\/v2\/tags?post=128800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}