react安装_前端开发：如何设置本地React游乐场？

最新推荐文章于 2024-07-28 18:42:48 发布

weixin_39664585

最新推荐文章于 2024-07-28 18:42:48 发布

阅读量171

点赞数

文章标签： react安装

大家好，我来了，本期为大家带来的Web前端知识是”前端开发：如何设置本地React游乐场？“，对前端开发有兴趣的小伙伴，和我一起来看看吧！

学习玩和玩的新事物是很自然的。儿童，小猫，小狗探索游戏世界。

同样的方法在编程中很有用。如果您想尝试新的React功能，探索一个想法，实施一个简单的演示，那么您需要一个游乐场。

在这篇文章中，我将向您展示如何通过3个简单的步骤（使用包裹捆包机）以几乎为零的配置设置React游乐场。

1.步骤1：安装包裹

第一步是一个命令：在全球范围内安装包裹捆绑器（我正在使用version 1.12.4）。

运行命令以使用npm安装包裹捆绑器：

npm install -g parcel-bundler

或者，如果您使用纱线：

yarn global add parcel-bundler

下一步是创建源文件。

2.步骤2：创建源文件

您需要创建Playground目录，并在其中放置2个文件：HTML代码和React代码。

我将命名该目录react-playground，但您可以选择自己的目录。让我们创建新目录并输入：

mkdir react-playground && cd react-playground

现在，在react-playground目录内，让我们创建2个源文件。

第一个文件index.jsx包含React代码：

// index.jsx 
import React from 'react'; 
import ReactDOM from 'react-dom';  
function App() {
  return <h1>Your React Playground is ready!</h1>; 
}  
ReactDOM.render(
  <App />,   
  document.getElementById('root') 
);

第二个文件index.html包含HTML代码（脚本标记链接到./index.jsx文件）：

<!-- index.html --> 
<html> 
<body> 
   <div id="root"></div> 
   <script src="./index.jsx"></script> 
</body> 
</html>

创建目录和文件后，您的游乐场具有以下各项：

react-playground   
├── index.html   
└── index.jsx

3.步骤3：运行包裹

该文件后index.html，并index.jsx已在操场上的目录中创建，只需运行构建命令：

parcel index.html

什么一点，直到包裹自动安装依赖（react，react-dom，等），并建立了操场。最后，当建筑完成时，您的游乐场位于http：// localhost：1234。玩得开心！

您可以立即开始对游乐场进行更改。更改源文件后，将parcel自动重建应用程序，然后更新网页。太酷了！

如果您的游乐场需要更多图书馆，则无需手动安装它们。只需使用import语法来要求所需的库，然后parcel自动安装所需的依赖项。

请注意，parcel在运行build命令时会安装最新的稳定依赖项。但是您可以自定义依赖项版本。

4.定制

让我们看看您可能需要的常见定制。

4.1添加CSS

向本地游乐场应用程序添加样式很容易。

首先，styles.css在您的运动场项目目录中创建文件：

/* styles.css */ 
h1 { 
  font-style: italic; 
}

其次，更新index.html链接到新的外部CSS文件：

<!-- index.html --> 
<html> 
<head> 
<link rel="stylesheet" href="./styles.css">
</head>
<body>
   <div id="root"></div> 
   <script src="./index.jsx"></script>
</body> 
</html>

无需任何其他配置，即可parcel选择CSS文件并应用它。对样式表的任何更改都会触发重建和网页更新。大。

4.2特定版本的依赖项

默认情况下，parcel安装最新的稳定依赖项。但是您可以轻松自定义依赖项版本。

第一次构建后，在Playground目录中parcel生成一个package.json文件：

react-playground   
├── index.html   
├── index.jsx   
└── package.json

要安装特定的依赖版本，例如React和React DOM，只需更新package.json：

// package.json 
{ 
  "dependencies": {
    "react": "16.12.0", 
    "react-dom": "16.12.0"
 } 
}

4.3 TypeScript支持

将React源文件重命名为index.tsx（.tsx扩展名代替.jsx），并parcel自动启用对TypeScript的支持。

创建一个包含index.tsx一些TypeScript代码的文件：

// index.tsx 
import * as React from 'react'; 
import * as ReactDOM from 'react-dom';  
function App(): JSX.Element {
   return <h1>Your React Playground is ready!</h1>; 
}  
ReactDOM.render(
  <App />,   
  document.getElementById('root') 
);

然后更新HTML文件，以使script标记指向index.tsx文件：

<!-- index.html --> 
<html> 
<body> 
   <div id="root"></div>  
   <script src="./index.tsx"></script>
</body> 
</html>

最后，安装React类型模块：

npm install --save-dev @types/react @types/react-dom

现在，您的游乐场具有TypeScript支持。编辑器应开始类型检查。

5.结论

操场是玩React的新功能，测试想法，进行快速演示的好方法。如果您希望将所有源代码都放在本地，那么使用包裹是一个不错的开始。

要设置本地React游乐场，需要3个简单的步骤。在全球安装Parcel Bundle，使用2个源文件创建项目目录：HTML和React源文件。最后，只需运行parcelbuild命令。操场已经准备好了！

如果由于某些原因您不喜欢parcel，则可以选择已知的react-create-app。如果您不喜欢当地的游乐场，那么我对codesandbox.io有着很好的经验。

玩的开心！

原著作者：德米特里·帕夫鲁汀

文章来源：国外

文章链接：

Dmitri Pavlutin Blogdmitripavlutin.com

PS：原著文章内容为英文版本，建议使用360极速浏览器进行翻译阅读。

喜欢我文章的小伙伴们，点个关注留个赞呗，万分感谢！

weixin_39664585

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫