{"id":1496,"date":"2021-04-19T10:56:58","date_gmt":"2021-04-19T10:56:58","guid":{"rendered":"https:\/\/blog.samarthya.me\/wps\/?p=1496"},"modified":"2021-04-19T10:56:59","modified_gmt":"2021-04-19T10:56:59","slug":"reactjs-a-new-app-tns","status":"publish","type":"post","link":"https:\/\/blog.samarthya.me\/wps\/2021\/04\/19\/reactjs-a-new-app-tns\/","title":{"rendered":"ReactJS: A new app `tns`"},"content":{"rendered":"

I need to write an app for a friend and what better way to brush up old concepts and write a fresh blog in doing so. So here I am, trying to put together some old and new skills together to help create a simple webapp that will have a dashboard and basic login enabled.<\/p>\n\n\n

Step – 1:<\/h2>\n\n\n\n

create-react-app tns<\/code><\/p>\n\n\n\n

success! Created tns at \/home\/saurabh\/sourcebox\/reactjs\/tns\nInside that directory, you can run several commands:\n\n  npm start\n    Starts the development server.\n\n  npm run build\n    Bundles the app into static files for production.\n\n  npm test\n    Starts the test runner.\n\n  npm run eject\n    Removes this tool and copies build dependencies, configuration files\n    and scripts into the app directory. If you do this, you can\u2019t go back!\n\nWe suggest that you begin by typing:\n\n  cd tns\n  npm start\n\nHappy hacking!\n<\/code><\/pre>\n\n\n\n
as suggested let’s cd<\/code> into tns<\/code> and do npm start<\/code><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The code files that it generates are as under<\/p>\n\n\n\n
drwxrwxr-x    6 saurabh saurabh   4096 Apr 17 18:03 .\/\ndrwxrwxr-x    3 saurabh saurabh   4096 Apr 17 17:41 ..\/\ndrwxrwxr-x    8 saurabh saurabh   4096 Apr 17 18:04 .git\/\n-rw-rw-r--    1 saurabh saurabh    310 Apr 17 17:43 .gitignore\ndrwxrwxr-x 1061 saurabh saurabh  36864 Apr 17 17:50 node_modules\/\n-rw-rw-r--    1 saurabh saurabh    807 Apr 17 17:43 package.json\n-rw-rw-r--    1 saurabh saurabh 692900 Apr 17 17:43 package-lock.json\ndrwxrwxr-x    2 saurabh saurabh   4096 Apr 17 17:43 public\/\n-rw-rw-r--    1 saurabh saurabh   3369 Apr 17 17:43 README.md\ndrwxrwxr-x    2 saurabh saurabh   4096 Apr 17 17:43 src\/<\/code><\/pre>\n\n\n\n
Folder<\/code> src\/<\/code><\/h2>\n\n\n\n
.\n\u251c\u2500\u2500 App.css\n\u251c\u2500\u2500 App.js\n\u251c\u2500\u2500 App.test.js\n\u251c\u2500\u2500 index.css\n\u251c\u2500\u2500 index.js\n\u251c\u2500\u2500 logo.svg\n\u251c\u2500\u2500 reportWebVitals.js\n\u2514\u2500\u2500 setupTests.js<\/code><\/pre>\n\n\n\n
Main component<\/h2>\n\n\n\n
The boiler plate code generates the first component for us.<\/p>\n\n\n\n
function App() {\n  return (\n    <div className=\"App\">\n      <header className=\"App-header\">\n        <img src={logo} className=\"App-logo\" alt=\"logo\" \/>\n        <p>\n          Edit <code>src\/App.js<\/code> and save to reload.\n        <\/p>\n        <a\n          className=\"App-link\"\n          href=\"https:\/\/reactjs.org\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          Learn React\n        <\/a>\n      <\/header>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
Index.html<\/h2>\n\n\n\n
It defines the binding where to put in the component<\/p>\n\n\n\n
 <body>\n    <noscript>You need to enable JavaScript to run this app.<\/noscript>\n    <!-- The main root element -->\n    <div id=\"root\"><\/div>\n  <\/body><\/code><\/pre>\n\n\n\n
Adding some Welcome Name<\/code><\/h2>\n\n\n\n
function Welcome({ myName }) {\n  return <p> Welcome {myName}<\/p>\n}<\/code><\/pre>\n\n\n\n
myName<\/code> is an attribute that I will be passing to this element, which will be referenced from the main app.<\/p>\n\n\n\n
<Welcome myName=\"Mr. Saurabh\"><\/Welcome><\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Help<\/h2>\n\n\n\n