{"id":6998,"date":"2019-05-10T21:34:54","date_gmt":"2019-05-10T21:34:54","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=6998"},"modified":"2019-05-10T21:34:54","modified_gmt":"2019-05-10T21:34:54","slug":"creating-a-react-application-by-hand","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/creating-a-react-application-by-hand\/","title":{"rendered":"Creating a React application by hand"},"content":{"rendered":"

By default it’s probably better and certainly simpler to create a React application using yarn create<\/em> but it’s always good to know how to create such an application from scratch yourself.<\/p>\n

To start with, create a folder for our application and within it create a folder named src, within this create an empty file named index.tsx. Then add the following to this file<\/p>\n

\r\nReactDOM.render(\r\n  <App \/>,\r\n  document.getElementById('root')\r\n);\r\n<\/pre>\n
We don’t actually have React dependencies available to our application at this point so run the following, these will add React as well as TypeScript and TypeScript definitions of React (obviously if you don’t want to work in TypeScript, remove the –typescript switches and the last three yarn commands).<\/p>\n
\r\nyarn add react --typescript\r\nyarn add react-dom --typescript\r\nyarn add react-scripts\r\nyarn add typescript\r\nyarn add @types\/react\r\nyarn add @types\/react-dom\r\n<\/pre>\n
yarn will create the package.json file and download the required dependencies. They purpose of the dependencies are probably pretty obvious – the first includes React, the second React-dom and the third gives us the scripts we’re used to when running the code generated React applications, such as supplying the script for yarn start<\/em>.<\/p>\n
Within the package.json add the following, which will add the scripts that we’re used to having available<\/p>\n
\r\n"scripts": {\r\n   "start": "react-scripts start",\r\n   "build": "react-scripts build",\r\n   "test": "react-scripts test",\r\n   "eject": "react-scripts eject"\r\n}\r\n<\/pre>\n
We’re going to need to also add a folder named public<\/em> which we’ll place an index.html file in which will act as our default page. Here’s a minimal version copied from a React generated application<\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang="en">\r\n  <head>\r\n    <meta charset="utf-8" \/>\r\n    <link rel="shortcut icon" href="%PUBLIC_URL%\/favicon.ico" \/>\r\n    <meta\r\n      name="viewport"\r\n      content="width=device-width, initial-scale=1, shrink-to-fit=no"\r\n    \/>\r\n    <meta name="theme-color" content="#000000" \/>\r\n    <link rel="manifest" href="%PUBLIC_URL%\/manifest.json" \/>\r\n    <title>Game App<\/title>\r\n  <\/head>\r\n  <body>\r\n    <noscript>You need to enable JavaScript to run this app.<\/noscript>\r\n    <div id="root"><\/div>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
At this point we should be able to execute<\/p>\n
\r\nyarn start\r\n<\/pre>\n
and now we should see a React application running in the browser.<\/p>\n
If you want to add some CSS to the application, we can simply create index.css in the src folder, create your styles then to use it in index.tsx add the following at the top of the file<\/p>\n
\r\nimport '.\/index.css';\r\n<\/pre>\n
If you’re using VSCode, as I am, you may wish to click on the status bar where it display a version of TypeScript, when index.tsx is open, and set to the most upto date version listed.<\/p>\n","protected":false},"excerpt":{"rendered":"
By default it’s probably better and certainly simpler to create a React application using yarn create but it’s always good to know how to create such an application from scratch yourself. To start with, create a folder for our application and within it create a folder named src, within this create an empty file named […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[243,242],"tags":[],"class_list":["post-6998","post","type-post","status-publish","format-standard","hentry","category-react","category-yarn"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=6998"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6998\/revisions"}],"predecessor-version":[{"id":7021,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/6998\/revisions\/7021"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=6998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=6998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=6998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}