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. git让线上代码强制覆盖本地的

    git强制覆盖本地命令(分步执行): git fetch --all    git reset --hard origin/master    git pull git强制覆盖本地命令(单条执行):  ...

  2. 禅道的使用—bug管理工具

    简介 禅道项目管理软件集产品管理.项目管理.质量管理.文档管理.组织管理和事务管理于一体,是一款功能完备的项目管理软件,完美地覆盖了项目管理的核心流程. 1.禅道使用的基本流程 禅道管理软件中,核心的 ...

  3. 为什么k8s引入pod概念？

    为什么k8s引入pod概念? 1.可管理性 有些容器天生需要紧密关联,以pod为最小单位进行调度 扩展 共享资源 管理生命周期 例如: 一个容器写日志,一个容器读取日志进行相关内容的展示 2.通信和资 ...

  4. 微信小程序访问豆瓣电影api400错误解决方法

    最近在跟着demo学习微信小程序,却卡在了第一步请求豆瓣电影api上,折腾了很久,代码如下: wx.request({ url : "https://api.douban.com/v2/mo ...

  5. Zabbix案例实践|Zabbix屏蔽告警

    近期项目中,客户要求在凌晨00:00到02:00的CPU屏蔽虚拟化监控上ESXI的红色告警,红色告警是由于某台vmCPU利用率过高而产生的.做法如下:1. 找到红色告警的触发器,通过触发器找到监控项, ...

  6. LVS（3种模式+10种调度算法）

    一.LVS简介 LVS(Linux Virtual Server)即Linux虚拟服务器,是由章文嵩博士主导的开源负载均衡项目,目前LVS已经被集成到Linux内核模块中.该项目在Linux内核中实现 ...

  7. gdocrimg04从库无法重启问题

    1.查看error.logVersion: '5.6.25-log'  socket: '/tmp/mysqld.3324_gdocrimg04.sock'  port: 3324  Source d ...

  8. 中国大学MOOC-翁恺-C语言程序设计习题集（一）

    练习 02-0. 整数四则运算(10) 本题要求编写程序,计算2个正整数的和.差.积.商并输出.题目保证输入和输出全部在整型范围内. 输入格式: 输入在一行中给出2个正整数A和B. 输出格式: 在4行 ...

  9. JavaNetty

    Netty的简单使用: import io.netty.bootstrap.Bootstrap; import io.netty.buffer.Unpooled; import io.netty.ch ...

  10. java 单链表反转

    最近与人瞎聊,聊到各大厂的面试题,其中有一个就是用java实现单链表反转.闲来无事,决定就这个问题进行一番尝试. 1.准备链表 准备一个由DataNode组成的单向链表,DataNode如下: pub ...