Samarthya

Life can change any moment, and I am ready for it.

About Me

ReactJS: A new app `tns`

Saurabh Sharma 3 years ago

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.

Step – 1:

create-react-app tns

success! Created tns at /home/saurabh/sourcebox/reactjs/tns
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd tns
  npm start

Happy hacking!

as suggested let’s cd into tns and do npm start

The code files that it generates are as under

drwxrwxr-x    6 saurabh saurabh   4096 Apr 17 18:03 ./
drwxrwxr-x    3 saurabh saurabh   4096 Apr 17 17:41 ../
drwxrwxr-x    8 saurabh saurabh   4096 Apr 17 18:04 .git/
-rw-rw-r--    1 saurabh saurabh    310 Apr 17 17:43 .gitignore
drwxrwxr-x 1061 saurabh saurabh  36864 Apr 17 17:50 node_modules/
-rw-rw-r--    1 saurabh saurabh    807 Apr 17 17:43 package.json
-rw-rw-r--    1 saurabh saurabh 692900 Apr 17 17:43 package-lock.json
drwxrwxr-x    2 saurabh saurabh   4096 Apr 17 17:43 public/
-rw-rw-r--    1 saurabh saurabh   3369 Apr 17 17:43 README.md
drwxrwxr-x    2 saurabh saurabh   4096 Apr 17 17:43 src/

Folder src/

.
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js

Main component

The boiler plate code generates the first component for us.

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Index.html

It defines the binding where to put in the component

 <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <!-- The main root element -->
    <div id="root"></div>
  </body>

Adding some Welcome Name

function Welcome({ myName }) {
  return <p> Welcome {myName}</p>
}

myName is an attribute that I will be passing to this element, which will be referenced from the main app.

<Welcome myName="Mr. Saurabh"></Welcome>

Help

  • React official documentation (link)