1、安装NodeJS6.0以上自带npm依赖包管理工具

2、webstrom 2019.2 工具

1、在cmd输入node -v就可以看到node的当前版本

2、在输入node进入node环境

3、查看npm版本号：npm -v

4、再次输入npm可以看到下面有哪些包

5、下一个全局安装react -app ：install create-react-app yarn -g

6、 下面在webstrom工具中创建React项目引用React所需要的依赖

7、项目构架：

启动项目进行访问：npm run status

在设置中下载这些可以提供自动提示的功能

若react语法不支持

第一个组件：编写Hello word组件，引入节点，渲染页面

html页面引入ReactJS开发

<!DOCTYPE html>

<html>
<head>
　　<title>html引用React技术</title>
</head>
<body>
　　<div id="like_button_container"></div>

<!--<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>-->
<script src="ReatJS/react.development.js"></script>
<script src="ReatJS/babel.min.js"></script>
<script src="ReatJS/react-dom.development.js"></script>
<script src="js/index.js"></script>
<script type="text/babel">
　　　　　　ReactDOM.render(
　　　　　　　　<h1>Hello, world!</h1>,
　　　　　　　　document.getElementById('like_button_container')
　　　　　　);
</script>

</body>
</html>

搭建React项目环境【1】的更多相关文章

  1. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  2. [Web 前端] webstorm 快速搭建react项目

    cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下 ...

  3. JBOSS安装与配置搭建本地项目环境(方便前端开发调式)

    JBOSS安装与配置搭建本地项目环境  什么是JBOSS? JBOSS是EJB的服务器,就像Tomcat是JSP服务器一样,就是服务器的一种. 环境搭建如下: 一:首先安装JDK,配置环境变量(PAT ...

  4. 使用Yarn+Webpack+Babel6搭建React.js环境

    使用Yarn+Webpack+Babel6搭建React.js环境 Facebook开源的React.js已经改变了世人对前端UI的思考方式.这种基于组件方式的优势之一,就是使View更加的简单,因为 ...

  5. 使用webpack搭建react项目 webpack-react-project

    webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...

  6. 搭建vue项目环境

    前言 在开发本项目之前,我对vue,react,angular等框架了解,仅限于知道它们是什么框架,他们的核心是什么,但是并没有实际使用过(angular 1.0版本用过,因为太难用,所以对这类框架都 ...

  7. 使用脚手架快速搭建React项目

    create-react-app是Facebook官方推出的脚手架,基本可以零配置搭建基于webpack的React开发环境步骤: 打开控制台 进入你想要创建项目的目录文件下面 依次执行以下命令 np ...

  8. 使用 webpack 搭建 React 项目

    简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...

  9. 从零开始使用 webpack5 搭建 react 项目

    本文的示例项目源码可以点击 这里 获取 一.前言 webpack5 也已经发布一段时间了,其模块联邦.bundle 缓存等新特性值得在项目中进行使用.经过笔者在公司实际项目中的升级结果来看,其提升效果 ...

随机推荐

  1. Blob/DataURL/canvas/image的相互转换

    函数都比较简单,直接看就ok了 /*-----------------------------------------------------------------------*/ // canva ...

  2. Qt编写小清新风格界面

    给一个朋友定制的界面,左侧有导航,左侧底部有运行+暂停+停止按钮,右侧有可伸缩面板,面板之间可以拉伸调节高度,左右两侧可以拉伸调节高度,所有的宽高和位置都保存在配置文件,下次重启立即应用,无边框标题栏 ...

  3. Global.asax.cs 为 /.aspx 执行子请求时出错。 Server.Transfer

    x 后台代码 Global.asax.cs protected void Application_Error(object sender, EventArgs e){Server.Transfer(& ...

  4. Ubuntu安装sysv-rc-conf配置开机启动服务

    ubuntu下chkconfig的替代方案: 第一步:在终端键入sudo apt-get install sysv-rc-conf安装sysv-rc-conf服务. 第二步:检查设置系统开机自启动服务 ...

  5. LODOP打印项水平居中

    LODOP控制打印项水平居中,可以用如下语句,该语句控制的是打印项本身在纸张中水平居中.LODOP.SET_PRINT_STYLEA(0,"Horient",2);这个根据大的打印 ...

  6. 手机端rem无限适配

    参考文档: http://blog.csdn.net/xwqqq/article/details/54862279 https://github.com/amfe/lib-flexible/tree/ ...

  7. mybatis对实体的引用必须以 ';' 分隔符结尾

    今天在使用 generate 时(问题起源),由于扫描了mysql所有库下的user表,因此添加参数 nullCatalogMeansCurrent=true 添加改参数解决的原因 查看 但是添加后出 ...

  8. python递归函数（10）

    一个函数在函数体内部调用自己,这样的函数称为递归函数,递归的次数在python是有限制的,默认递归次数是997次,超过997次会报错:RecursionError. 一.递归函数案例 案例一:计算数字 ...

  9. 【RSR】RSR如何配置BGP与BFD联动(动态路由)

    应用场景 企业租用运营商MSTP线路,配置BGP路由协议上网,由于企业本端出口路由器无法检测到运营商中间链路通信中断,导致路由收敛缓慢,无法快速的切换到其它备份线路,此时可以在路由器上启用BGP与BF ...

  10. LeetCode 84. 柱状图中最大的矩形(Largest Rectangle in Histogram)

    84. 柱状图中最大的矩形 84. Largest Rectangle in Histogram