使用 React.js 显示 hello world
create-react-app 是一个使用默认配置创建 React.js 项目的命令。Create-react-app 有助于运行 React 应用程序。该命令将在 npm 或 yarn 上执行。
如果计算机上已安装 npm 和 node.js，请使用命令 − 全局安装 create-react-app。
npm install –g create-react-app
创建项目 −执行上述命令后，运行以下命令 − 即可创建项目。
npx create-react-app hello-world-example
npx 附带 npm 5.2 及以上版本，您可以在终端中使用 npm –version
检查 npm 版本。如果 npm 版本为 5.2 及以上，则可以直接使用命令 − 创建 react.js 项目。
npx create-react-app hello-world-example
如果 npm 版本为 6 及以上，也可以使用 npm init react-app hello-world 创建 React.js 项目。
使用 Yarn，我们可以使用命令 − yarn create react-app hello-world-example
完成上述命令后，将目录切换到 hello-world-example
使用 create-react-app 时，使用高级 JavaScript 功能所需的 webpack 或 babel 已预先配置，我们只需专注于编写代码即可。
cd hello-world-example
要执行应用程序，请在终端上运行以下命令 −
npm start
npm start 会运行实时开发服务器，代码更改将自动刷新浏览器并反映更改。
将打开一个浏览器窗口，如果没有自动打开，请手动打开浏览器并在地址栏中输入 url − localhost:3000。3000 是 React 应用程序使用的默认端口。如果端口号存在任何问题，可以更改端口号。
应用程序运行时的默认文本显示在下方 −
显示
要更新，请使用任何代码编辑器工具(例如 Visual Studio Code)打开项目
打开文件 App.js
import React from 'react';
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" />
<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;
将 return 语句的内容更改为仅包含 hello World 文本 −
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
Hello World!
</div>
);
}
export default App;
浏览器上的文本将立即更改
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
