{"id":6501,"date":"2023-03-01T04:37:54","date_gmt":"2023-03-01T04:37:54","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=6501"},"modified":"2023-03-01T04:37:54","modified_gmt":"2023-03-01T04:37:54","slug":"how-to-install-and-configure-reactjs","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/","title":{"rendered":"How to install and configure ReactJS"},"content":{"rendered":"

The first step in installing React on our local system is to install NodeJs and npm.<\/p>\n

Setup Nodejs<\/h2>\n

Node.js provides a runtime environment for JavaScript code to be executed outside of a browser. NPM, the Node package manager, is used to organize and share React and Angular packages.
\nNPM will be installed in addition to Nodejs. Node.js may be downloaded and installed directly from the NodeJs website. https:\/\/nodejs.org<\/a>
\nOnce the Node installation is complete. We may check the version by opening Node.Js Command Prompt. <\/p>\n

Install Create-React-App Tool<\/h3>\n

The next step is to use NPM to install the utility create-react-app. This tool allows us to simply construct react apps from our system. This may be installed at the system or folder level. We will use the following command to install it globally. <\/p>\n

npm install -g create-react-app<\/code><\/p>\n

Creating a new react project<\/h3>\n

We can now develop our first react application after installing create-react-app<\/em><\/strong>. Assume I want to make a project or application in D\/React Programs. I’ll make this folder and use the change directory command to point our command prompt to it.
\nLet’s create a new Project now using the command.<\/p>\n

create-react-app test-project<\/code><\/p>\n

Running the React Application<\/h3>\n

Let’s do CD to the Project we have created and run it locally on our system using npm start. Launch the browser and visit http:\/\/localhost:3000<\/a>. We can then see our first React Application response in the browser.<\/p>\n

cd test-project
\nnpm start<\/code><\/p>\n

We have created a New Project using React and executed the Project.
\nHowever, as developers, we are more interested in learning about the Project that has been built, its structure, and how we might experiment with it. So it’s time to select an editor. When it comes to IDEs, we have several options, including VS Code, React IDE, Sublime Editor, Atom Editor, Webstorm, and a few more. As our editor, we will use VS Code. <\/p>\n

Get certification for your knowledge in the fundamentals of Computer functioning by clearing the Computer Certification<\/a> exam conducted by StudySection. After going through this Computer Certification exam, you will be able to evaluate your basic knowledge of computers<\/em><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"

The first step in installing React on our local system is to install NodeJs and npm. Setup Nodejs Node.js provides<\/p>\n","protected":false},"author":1,"featured_media":6502,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[538,641],"acf":[],"yoast_head":"\nHow to install and configure ReactJS - StudySection Blog<\/title>\n<meta name=\"description\" content=\"NPM will be installed in addition to Nodejs. Node.js may be downloaded and installed directly from the NodeJs website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to install and configure ReactJS - StudySection Blog\" \/>\n<meta property=\"og:description\" content=\"NPM will be installed in addition to Nodejs. Node.js may be downloaded and installed directly from the NodeJs website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-01T04:37:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/03\/ReactJS1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"How to install and configure ReactJS\",\"datePublished\":\"2023-03-01T04:37:54+00:00\",\"dateModified\":\"2023-03-01T04:37:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/\"},\"wordCount\":352,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"keywords\":[\"Node.js\",\"Reactjs\"],\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/\",\"url\":\"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/\",\"name\":\"How to install and configure ReactJS - StudySection Blog\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2023-03-01T04:37:54+00:00\",\"dateModified\":\"2023-03-01T04:37:54+00:00\",\"description\":\"NPM will be installed in addition to Nodejs. Node.js may be downloaded and installed directly from the NodeJs website.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to install and configure ReactJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to install and configure ReactJS - StudySection Blog","description":"NPM will be installed in addition to Nodejs. Node.js may be downloaded and installed directly from the NodeJs website.","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:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/","og_locale":"en_US","og_type":"article","og_title":"How to install and configure ReactJS - StudySection Blog","og_description":"NPM will be installed in addition to Nodejs. Node.js may be downloaded and installed directly from the NodeJs website.","og_url":"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2023-03-01T04:37:54+00:00","og_image":[{"width":300,"height":200,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2023\/03\/ReactJS1.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"How to install and configure ReactJS","datePublished":"2023-03-01T04:37:54+00:00","dateModified":"2023-03-01T04:37:54+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/"},"wordCount":352,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"keywords":["Node.js","Reactjs"],"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/","url":"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/","name":"How to install and configure ReactJS - StudySection Blog","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2023-03-01T04:37:54+00:00","dateModified":"2023-03-01T04:37:54+00:00","description":"NPM will be installed in addition to Nodejs. Node.js may be downloaded and installed directly from the NodeJs website.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/how-to-install-and-configure-reactjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to install and configure ReactJS"}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":170,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6501"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=6501"}],"version-history":[{"count":1,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6501\/revisions"}],"predecessor-version":[{"id":6503,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/6501\/revisions\/6503"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/6502"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=6501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=6501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=6501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}