创建第一个react项目
本教程将指导你如何从零开始创建一个简单的React项目。我们将使用create-react-app这个官方提供的脚手架工具来快速搭建项目。
前提条件
在开始之前，请确保你已经安装了以下软件：
- Node.js：最好使用node版本管理器，可以参考这个教程
- npm（Node包管理器）：通常随Node.js一起安装。
版本验证：
步骤1：创建新项目
安装完成后，使用create-react-app命令创建一个新的React项目。例如，我们将项目命名为my-first-react-app：
npx create-react-app my-first-react-app
这个命令会自动创建一个名为my-first-react-app的新目录，并设置好所有必要的配置文件和依赖。
第一次创建需要安装create-react-app：
出现下图即创建完成：
步骤2：进入项目目录
进入新创建的项目目录：
cd my-first-react-app
步骤3：启动开发服务器
在项目目录中，运行以下命令以启动开发服务器：
npm start
这会启动一个本地开发服务器，并在默认的Web浏览器中自动打开一个新标签页，地址通常是http://localhost:3000。你应该会看到React的欢迎界面。
步骤4：修改代码
现在，让我们修改一下默认的代码，看看效果。打开项目目录中的src/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>
欢迎来到我的第一个React项目！
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
学习React
</a>
</header>
</div>
);
}
export default App;
保存文件后，开发服务器会自动重新加载，你会在浏览器中看到更新后的内容。
步骤5：构建项目
当你准备将项目部署到生产环境时，可以使用以下命令构建项目：
npm run build
这会生成一个build目录，其中包含所有经过压缩和优化的静态文件，可以直接部署到Web服务器。
总结
通过以上步骤，你已经成功创建并运行了你的第一个React项目。接下来，你可以继续探索React的更多功能，编写更复杂的组件和应用程序。
希望这个教程对你有所帮助！如果有任何问题，欢迎随时提问。
参考资料
原文地址：https://blog.csdn.net/qq_41472205/article/details/143822807
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！