Debian 12 bookworm
Sponsored Link

React : Install2023/07/14

 
Install React which is a JavaScript library for building user interfaces.
[1]
[2] Create a test React application with a common user.
debian@dlp:~$
node -v

v18.13.0
debian@dlp:~$
mkdir testproject

debian@dlp:~/testproject$
cd testproject
# create React application [test-app]

debian@dlp:~/testproject$
npx create-react-app test-app

Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in /home/debian/testproject/test-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

.....
.....

Success! Created test-app at /home/debian/testproject/test-app
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ft go back!

We suggest that you begin by typing:

  cd test-app
  npm start

Happy hacking!

debian@dlp:~/testproject$
cd test-app

debian@dlp:~/testproject/test-app$
npm start


> test-app@0.1.0 start
> react-scripts start

Compiled successfully!

You can now view test-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://10.0.0.30:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
  Access to the URL that is shown on the console above from any client computer, and then that's OK if following app is shown.
[3] Edit the test-app and insert [Hello World] text.
debian@dlp:~$
vi ~/testproject/test-app/src/App.js
# add texts

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>
          Hello React World!
        </h1>
        <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;

debian@dlp:~$
cd ~/testproject/test-app

debian@dlp:~/testproject/test-app$
npm start

Matched Content