{"id":1081,"date":"2022-07-06T07:11:05","date_gmt":"2022-07-06T07:11:05","guid":{"rendered":"https:\/\/lucyestela.com\/dev\/?p=1081"},"modified":"2022-07-06T07:24:47","modified_gmt":"2022-07-06T07:24:47","slug":"react-step-1-installation","status":"publish","type":"post","link":"https:\/\/lucyestela.com\/dev\/blog\/react-step-1-installation\/","title":{"rendered":"React – Step 1 – Installation"},"content":{"rendered":"
\n
\n
\n
\n

 <\/p>\n

NOTE: I’m on a PC. If you’re on another operating system there might be slight differences so do a google search.<\/p>\n

Right so you’ve decided you want to build a React app or perhaps you want to convert your html website to React. Great, but how do you do even get started?<\/p>\n

PART A<\/strong><\/p>\n

Well first things first, you need node.js installed. Before you go ahead and install anything, just do a quick check to see if it’s installed already.<\/p>\n

Open Command prompt and type<\/p>\n

npm -v<\/pre>\n
\"\"<\/p>\n
If you have it installed then it will give you your version number. Otherwise you’ll need to install it. To do that then, go here<\/a> to find the latest version for your OP.<\/p>\n
I have  PC so I downloaded the Windows Installer (.msi) file. Run it. You’ll be presented with a setup wizard, so just go through that.<\/p>\n
\"\"<\/p>\n
PART B<\/p>\n
Now you call install React. In Command Prompt type<\/p>\n
npm install -g create-react-app<\/code><\/pre>\n
Now navigate to where you want to install your React App, for example C:\\Users\\user\\Documents\\React and type this command<\/p>\n
npx create-react-app new-app\r\n<\/code><\/pre>\n
Now you need to go into that directory<\/p>\n
cd new-app<\/code><\/pre>\n
and fire it up<\/p>\n
npm start<\/code><\/pre>\n
Your command prompt will do some funky stuff and present you with this<\/p>\n
\"\"<\/p>\n
And will open your browser with this<\/p>\n
\"\"<\/p>\n
And what you’ll see in your new-app folder is this<\/p>\n
\"\"<\/p>\n
So now you have your React app set up, you can start playing around with code. What I needed to do though, was to translate my plain old html website into a React app. How did I do that then? Lots of trial and error. But I’ll give you an insight into that next.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
  NOTE: I’m on a PC. If you’re on another operating system there might be slight differences so do a google search. Right so you’ve decided you want to build a React app or perhaps you want to convert your html website to React. Great, but how do you do even get started? PART A … Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[3,128,127],"tags":[],"class_list":["post-1081","post","type-post","status-publish","format-standard","hentry","category-blog","category-react","category-web"],"_links":{"self":[{"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/posts\/1081","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/comments?post=1081"}],"version-history":[{"count":5,"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/posts\/1081\/revisions"}],"predecessor-version":[{"id":1092,"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/posts\/1081\/revisions\/1092"}],"wp:attachment":[{"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/media?parent=1081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/categories?post=1081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lucyestela.com\/dev\/wp-json\/wp\/v2\/tags?post=1081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}