编写React框架时,引入相关js库文件不起作用

最近在学习react框架,看网上一般引入react.development.js,react-dom.development.js,babel.min.js文件都是采用

 <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 <!-- 生产环境中不建议使用 -->
 <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

这种方式,但是使用这种方式的一个弊端是每次加载网页都要去该目的地址获取相关文件,运行速度不快,因此我就想能不能自己下来来直接引用,这是初步尝试:

<script src="../js/react.development.js" ></script>
<script src="../js/react-dom.developemnt.js" ></script>
<script src="../js/babel.min.js" ></script>

结局是失败了。。。刷新网页后发现加载不出来了。。。想不通错在了哪里,后面发现react框架使用jsx,也是javascript的一种,但是这种文件在加载的时候需要babel进行转换,因此我就想react需要的那三个库文件是不是也是jsx的写法。于是乎进行了一些改动

<script type="text/babel" src="../js/react.development.js" ></script>
<script type="text/babel" src="../js/react-dom.developemnt.js" ></script>
<script type="text/babel" src="../js/babel.min.js" ></script>

刷新网页,成功加载!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
### 回答1: 好的,我可以回答这个问题。React TS 项目框架可以使用 Create React App 来创建,然后在其中添加 TypeScript 支持。另外,可以使用 Redux 或 MobX 等状态管理来管理应用程序的状态。还可以使用 React Router 来处理路由。此外,可以使用 Axios 或 Fetch 等来处理数据请求。最后,可以使用 Jest 或 Enzyme 等测试编写测试用例。 ### 回答2: React TS项目框架可以基于现有的脚手架工具来创建,如Create React App(CRA)。 首先,我们需要安装Node.js和npm(Node Package Manager)。然后,在命令行中运行以下命令来创建一个新的React TS项目: ``` npx create-react-app my-app --template typescript ``` 这将在当前目录下创建一个名为my-app的新项目,并使用TypeScript模板。 接下来,进入my-app目录,并打开一个编辑器。在src目录下,可以看到一个名为index.tsx的文件,这是React组件的入口文件。我们可以在这个文件中开始编写我们的应用程序。 删除不需要的代码,并添加自己的组件和逻辑。可以使用JSX语法编写组件,并使用TypeScript来进行类型检查。在编写组件,还可以使用React的钩子函数(Hooks)来管理组件状态和生命周期。 此外,还可以根据项目需求安装其他依赖项,如UI组件、数据管理等。可以使用npm或者yarn来安装这些依赖项,并在代码中按需引入和使用。 当准备好运行项目,只需在命令行中运行以下命令: ``` npm start ``` 这将启动一个开发服务器,并在浏览器中打开一个新的标签页,显示你的应用程序。每当进行代码更改,服务器会自动重新加载应用程序,以便立即看到更改效果。 在开发完成后,可以运行以下命令来构建应用程序的生产版本: ``` npm run build ``` 这将在build目录中生成一个优化过的、供生产环境使用的应用程序。 以上就是一个简单的React TS项目框架的创建过程。根据具体项目需求,可以继续定制和扩展框架,以满足开发需求。 ### 回答3: React是一个非常受欢迎的JavaScript,用于构建用户界面。而TypeScript是一种强类型的JavaScript超集,它提供了更好的开发工具和编译错误检查。结合React和TypeScript,可以创建更可靠、可维护和可扩展的项目。 以下是一个适用于React TypeScript项目的基本框架: 1. 安装项目依赖:首先,需要安装React和TypeScript的相关依赖。可以使用npm或yarn命令来安装,例如: ``` npx create-react-app my-app --template typescript ``` 这将创建一个新的React TypeScript项目。 2. 文件结构:创建一个适当的文件结构来组织你的代码。以下是一个示例文件结构: ``` - src - components:存放React组件 - pages:存放页面组件 - styles:存放样式文件 - utils:存放工具函数 - App.tsx:React应用的入口文件 - index.tsx:React渲染的入口文件 ``` 3. 编写组件:开始编写React组件。使用TypeScript的类型注解来定义组件的Props类型,并使用React的函数式组件或类组件来实现组件的逻辑。 4. 使用Hook:React提供了许多有用的Hook,如useState、useEffect等。它们可以在函数式组件中使用,并提供了更好的状态管理和生命周期管理。 5. 使用CSS模块化:使用CSS模块化来组织和管理你的样式文件。在TypeScript项目中,可以使用`.module.css`或`.module.scss`来定义模块化样式。 6. 添加路由:如果需要创建多页面应用,可以使用React Router添加路由功能。React Router提供了一个简单易用的API来实现页面之间的导航。 7. 使用Redux:如果需要全局状态管理,可以考虑使用Redux。Redux与React结合使用,可以更好地管理和共享应用程序的状态。 8. 运行项目:在项目根目录下运行`npm start`或`yarn start`命令来启动开发服务器,预览你的React TypeScript应用。 以上是一个简单的React TypeScript项目框架。根据具体的项目需求,你还可以添加更多的功能和工具来提高开发效率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Coding101

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值