react环境搭建

最新推荐文章于 2024-07-24 11:09:48 发布

一个好好的程序员

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量590

点赞数

文章标签：前端 react.js

本文链接：https://blog.csdn.net/m0_62823653/article/details/125732296

版权

第一部分：创建新的 React 应用

推荐的工具链

如果你是在学习 React 或创建一个新的单页应用，请使用 Create React App。
如果你是在用 Node.js 构建服务端渲染的网站，试试 Next.js。
如果你是在构建面向内容的静态网站，试试 Gatsby。
如果你是在打造组件库或将 React 集成到现有代码仓库，尝试更灵活的工具链。

Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。

它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。要创建项目，请执行：

npx create-react-app my-app
cd my-app
npm start

创建成功后如下命令

  npm start
    Starts the development server. //启动开发服务器

  npm run build  //将应用打包到静态文件中用于生产
    Bundles the app into static files for production.

  npm test       //启动测试运行程序
    Starts the test runner.

第二种：搭建开发环境：浏览器（不推荐）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="like_button_container"></div>
    <!-- 引入react核心库 -->
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <!-- 引入react-dom.用于支持react操作dom -->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <!-- 引入babel-用于将jsx转为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
   <!-- 加载我们的 React 组件。-->
   <script type="text/babel"> //type="text/babel"：写jsx必写
    // 1.创建虚拟DOM
    const VDOM =<h1>hello,react</h1> //此处一定不要写引号，因为不是字符串
    // 2.渲染虚拟DOM到页面
    // ReactDOM.render(虚拟dom,容器)
    ReactDOM.render(VDOM,document.querySelector('#like_button_container'))
   </script> 
</body>

</html>

一个好好的程序员

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
react环境搭建

是一个用于的舒适环境，也是用React创建的最佳方式。它会配置你的开发环境，以便使你能够使用最新的JavaScript特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装。...
复制链接

扫一扫