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. memcached概述与基本操作

    memcached 什么是memcached memcached之前是danga的一个项目,最早是为LiveJournal服务的,当初设计师为了加速LiveJournal访问速度而开发的,后来被很多大 ...

  2. vs2019 中文离线安装包下载

    1. 通过在https://visualstudio.microsoft.com/zh-hans/downloads/ 下载VS2019, 之后会下载vs_enterprise__78682482.1 ...

  3. 有些新电脑采用“UEFI”作为固件。由于UEFI不支持DOS，所以在UEFI环境下安装的WIN10等系统也就无法使用基于DOS的一键GHOST

    有些新电脑采用“UEFI”作为固件.由于UEFI不支持DOS,所以在UEFI环境下安装的WIN10等系统也就无法使用基于DOS的一键GHOST

  4. C# EF6框架连接postgresql数据库

    https://blog.csdn.net/jwdym01/article/details/102845602

  5. Zookeeper架构及FastLeaderElection机制

    原文链接:http://www.jasongj.com/zookeeper/fastleaderelection/ Zookeeper是什么 Zookeeper是一个分布式协调服务,可用于服务发现,分 ...

  6. [转帖]Windows 7寿终正寝 为何Windows 10屡被吐槽它却无比经典？

    Windows 7寿终正寝 为何Windows 10屡被吐槽它却无比经典? https://www.cnbeta.com/articles/tech/908897.htm 是的,一代经典操作系统Win ...

  7. Django 自定义表名

    class UserInfo(AbstractUser): phone = models.BigIntegerField(null=True, blank=True) create_time = mo ...

  8. Linux环境python3.6.5

     安装python3.6可能使用的依赖 yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel r ...

  9. JXOI2018

    发现自己不会T3可以退群了 排序问题(组合.模拟) 可以发现Gobo Sort相当于在所有排列中随机选择一个,所以当第\(i\)个数出现次数为\(a_i\)时,期望的Sort次数就是\(\frac{( ...

  10. Java 哈希表

    public int firstUniqChar(String s){ int[] freq=new int[26]; for(int i=0;i<s.length();i++){ freq[s ...