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. PAT 甲级 1074 Reversing Linked List (25 分)(链表部分逆置,结合使用双端队列和栈,其实使用vector更简单呐)

    1074 Reversing Linked List (25 分)   Given a constant K and a singly linked list L, you are supposed ...

  2. NODE_ENV=production 环境变量设置

    "start": "NODE_ENV=production node ./bin/www"

  3. 多线程、线程池、线程创建、Thread

    转载自https://www.cnblogs.com/jmsjh/p/7762034.html 多线程 1.1 多线程介绍 学习多线程之前,我们先要了解几个关于多线程有关的概念. 进程:进程指正在运行 ...

  4. Java Servlet：服务器小程序

    servlet:服务器小程序 servlet是一个接口,接口是一种规范,因此servlet是一种规范 一个类声明为抽象类的原因: 不包含抽象方法,不想被实例化 包含抽象方法,子类有对抽象方法的不同实现 ...

  5. linux中安装robot环境

    https://www.cnblogs.com/lgqboke/p/8252488.html(文中验证robotframework命令应该为 robot --version) 可能遇到的问题: 1.p ...

  6. python基础（二）-- 列表、字典、集合、字符串操作

    4.列表: 基本操作: 索引 切片 追加 删除 长度 切片 循环 包含 import copy i=0 #persons=['dailaoban','xiekeng',['age',100,50],' ...

  7. 看看这5个最容易犯的Java错误，你犯了没？

    人非圣贤,孰能无过.都说Java语言是一门简单的编程语言,基于C++演化而来,剔除了很多C++中的复杂特性,但这并不能保证Java程序员不会犯错.那么对于广大的Java程序员来说,它们最容易犯的几个错 ...

  8. LeetCode 103. 二叉树的锯齿形层次遍历(Binary Tree Zigzag Level Order Traversal)

    103. 二叉树的锯齿形层次遍历 103. Binary Tree Zigzag Level Order Traversal 题目描述 给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再 ...

  9. dubbo学习之路-SPI机制

    dubbo学习之路-SPI机制 1.SPI 1.1Java SPI 原理 SPI是service provider interface简称.在java JDK中 内置的一种服务提供发现机制.它解决在一 ...

  10. Qt 5.12 LTS 部署

    1. 拷贝release生成的exe到一个独立的目录deploy 2. windeployqt.exe A_Toolkit.exe 3. 将qt\qt5.12.5\tool\mingw730_64\b ...