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. 接口测试01- Jmeter-线程进程-环境变量

    1.1 概念 JMeter 是 Apache 组织使用 Java 开发的一款测试工具 ,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静态和动态资源,例如静态文件.Java ...

  2. (转载)Universal Correspondence Network

    转载自:Chris Choy's blog Universal Correspondence Network In this post, we will give a very high-level ...

  3. 使用ffmpeg -re循环推流(循环读取视频文件)推送EasyDSS RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器的方法

    需求分析 众所周知,EasyDSS与EasyNVR最大的区别是,EasyDSS被动接受前端设备的推流,将推送过来的直播流进行直播转码.智能处理.视频分发,在通过CDN分发节点分发到终端播放SDK.而E ...

  4. [转自baidu]修正古人五行，《七行说》之提出

    一.论原五行相生.相克关系不妥之处: 祖国医学原“五行说”即金.木.水.火.土.在五行学说中说相生规律为:金生水:水生木:木生火:火生土:土生金.相克规律为:火克金:金克木:木克土:土克水:水克火.这 ...

  5. 【python基础】Python性能加速的方法

    参考 1. 给Python加速(性能加速的方法); 2. pythonSpeed_PerformanceTips; 完

  6. mysql 按照计算值排序

    SELECT title,browse_num/exposure_num as click_rate FROM `tf_news` ORDER BY browse_num/exposure_num d ...

  7. JAVA多态中的隐藏和覆盖

    Java的引用变量有两个类型,一个是编译时类型,一个是运行时类型 编译时类型:由声明该变量时使用的类型决定 运行时类型:由该变量指向的对象类型决定 如果编译时类型和运行时类型不一致,会出现所谓的多态. ...

  8. U盘改造计划之PE、kali、U盘三合一

    最强U盘攻略之一 前一段时间朋友买电脑问了我一些问题,我突然发现U盘怎么这么便宜,128G金士顿,140?!!!我16年买的可是240啊.买贵一百块,我好方啊.但是我的U盘,我是不会屈服做一个普通的U ...

  9. 小程序发起get请求====post请求

  10. 在Firefox中操作iframe的一个小问题

    在做一个 Web 的打印功能时,需要将被打印的文档写到 iframe 的 document 中. <!doctype html> <html lang="en"& ...