react 创建新页面_如何新建react项目「建议收藏」

在开发React项目前最关键的当然是项目的创建,现在的前端工程化使得前端项目的创建也变得越来越复杂,今天我们介绍的是浏览器中直接引入的方式搭建react项目。如何新建react项目前文中,我们介绍过了2种react项目的搭建方式,分别是webpack的方式搭建和create-react-app脚手架的方式搭建感兴趣的同学可以点击下方链接,进行学习。webpack的方式搭建项目:怎样搭建rea…

大家好,又见面了,我是你们的朋友全栈君。

在开发React项目前最关键的当然是项目的创建,现在的前端工程化使得前端项目的创建也变得越来越复杂,今天我们介绍的是浏览器中直接引入的方式搭建react项目。

react 创建新页面_如何新建react项目「建议收藏」

如何新建react项目

前文中,我们介绍过了2种react项目的搭建方式,分别是 webpack的方式搭建 和 create-react-app脚手架的方式搭建

感兴趣的同学可以点击下方链接,进行学习。webpack的方式搭建项目:怎样搭建react项目

create-react-app的方式搭建项目:怎么新建一个react项目

今天,我们介绍下,如何使用浏览器,直接引入react,react-dom搭建一个项目。

浏览器中通过标签直接引入

React框架有两个核心的包,分别是react以及react-dom,如何想直接在浏览器中使用React,那么把这两个包直接引入就可以了。

如果想要使用JSX语法,那么必须引入Babel。

1、首先创建一个index.html文件

React

接下来引入相关的包

React

在body标签中创建Dom结构以及script标签,这里因为引入了babel,所以script标签的type必须是”text/babel”。

React

// 必须添加type=”text/babel”,否则不识别JSX语法

然后在scirpt中写React代码

React

// 必须添加type=”text/babel”,否则不识别JSX语法

class App extends React.Component {

render() {

return(

Hello World

)

}

}

ReactDOM.render(, document.getElementById(‘app’))

最后在浏览器中打开index.html,页面上会渲染出Hello World。

这样,一个简单的react项目就搭建完成了。

本文来自React答疑栏目,欢迎学习!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/129726.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 解决java.lang.RuntimeException: com.netflix.client.ClientException: Load balancer does not have availa[通俗易懂]

    解决java.lang.RuntimeException: com.netflix.client.ClientException: Load balancer does not have availa[通俗易懂]解决java.lang.RuntimeException:com.netflix.client.ClientException:Loadbalancerdoesnothaveavailableserverforclient:xxx-xxx-xxx小弟第一次发博客,不喜勿喷,工作经验(1个月)各位大佬你们,最近在接触微服务项目,在运行的过程中遇到许多问题,第一次写博客,就发…

    2022年7月24日
    20
  • springboot启动类注解_常用设备启动方式分为几类

    springboot启动类注解_常用设备启动方式分为几类SpringBoot启动类packagecom.kmu.archives.system;importlombok.extern.slf4j.Slf4j;importorg.springframework.boot.SpringApplication;importorg.springframework.boot.autoconfigure.SpringBootApplication;importorg.springframework.context.ConfigurableApplica

    2025年9月25日
    8
  • 2022IDEA专业版激活码【2022最新】「建议收藏」

    (2022IDEA专业版激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~4KDDGND3CI-eyJsaWNlb…

    2022年4月1日
    1.1K
  • vue.js单页应用_vue嵌入第三方页面

    vue.js单页应用_vue嵌入第三方页面今天我们看看VUE怎么开发单页面应用,VUE提供了脚手架vue-cli,通过这个可以很轻松的创建VUE单页面应用,1.创建VUE项目  首先确保电脑上安装了NODE.JS, 在创建项目的目录下,打开CMD命令行,执行脚手架命令,安装脚手架cli. #全局安装vue-cli,一定要在全局模式下安装vue-cli,否则无法使用vue命令npminstall-gvue…

    2022年10月13日
    5
  • vuejs环境搭建_vue搭建论坛

    vuejs环境搭建_vue搭建论坛前端框架vue开放环境搭建

    2022年9月1日
    6
  • 半小时一篇文过完C语言基础知识点[通俗易懂]

    半小时一篇文过完C语言基础知识点[通俗易懂]本文定位读者为小白读者,将使用最快的方法学完C语言,并且制作一个学生管理系统。由于是速成的方法,本文不会描述过多的其它知识,大部分知识点只是描述了如何进行使用,如何深入还需要各位努力;不过学习过了一遍内容后,学习起来也会较为容易。环境:系统:windows7IDE:Devc面向读者:小白一、HelloWorldHelloWorld是经典的编程入门程序,指在编写代码生成程序,运行该程序将会在程序中显示HelloWorld。以下是一个HelloWorld的C语言代码:#include&

    2022年9月21日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号