React : Install2022/06/28 |
Install React which is a JavaScript library for building user interfaces.
|
|
[1] | |
[2] | Create a test React application with a common user. |
# create React application [test-app] [cent@dlp testproject]$ npx create-react-app test-app Need to install the following packages: create-react-app 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/cent/testproject/test-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... ..... ..... Happy hacking![cent@dlp testproject]$ cd test-app [cent@dlp 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. |
[cent@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;
[cent@dlp testproject]$ cd ~/testproject/test-app [cent@dlp test-app]$ npm start |
Sponsored Link |