当前位置:网站首页 > React.js开发 > 正文

原生html引入react,如何引入react.js

886d8b473f64c2b185fedc9bd4fad3a1.png

如何引入react.js

单页面直接使用react.js文件很简单,只需要像引入普通js文件一样,通过script标签引入即可。

因为react使用jsx开发更方便,所以我们也需要引入babel来转换jsx的代码。

下面介绍如何构建这样一个基于React的页面。

1、首先我创建一个最基本的html文件,然后引入React的库文件,主要是react 和 react-dom,此外还要引入babel进行语法编译,不然浏览器是无法识别你的react。

Hello World

//我们的react

2、这样,我们就可以开始写js内容了,我们在id为app的div后面添加script标签,按照react的语法可以写我们的内容啦,还要注意script标签要加type="text/babel",不然无法识别jsx语法哦!如下:

ReactDOM.render(

Hello, world!

,

document.getElementById('root')

);

以上就是React的最简单的方式。

更多React相关技术文章,请访问React答疑栏目进行学习!

到此这篇原生html引入react,如何引入react.js的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • React.js:改变Web开发方式的JavaScript库2024-10-30 23:51:45
  • React.js 全面解析:从基础到实战案例_react详解2024-10-30 23:51:45
  • React.FC详细解说2024-10-30 23:51:45
  • 基于Node.js 搭建React.js开发环境2024-10-30 23:51:45
  • TypeScript+React Web应用开发实战2024-10-30 23:51:45
  • React.js入门级教程附带代码详解2024-10-30 23:51:45
  • 【React】详解 index.js 文件_【React】详解 index.js 文件2024-10-30 23:51:45
  • vue和React区别=> Vue.js 与 React.js:深度对比2024-10-30 23:51:45
  • React.js:构建你的第一个组件_react 搭建2024-10-30 23:51:45
  • window安装react.js开发环境_window安装react.js开发环境2024-10-30 23:51:45
  • 全屏图片