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. plsql if

    set serveroutput on accept num prompt '请输入一个数字'; declare pnum number := &num; begin then dbms_ou ...

  2. 取消Windows server 2008关机提示备注的方法

    打开“开始”-“运行”,在“打开”一栏中输入“gpedit.msc”命令打开组策略编辑器,依次展开“计算机配置”→“管理模板”→“系统”,双击右侧窗口出现的“显示‘关闭事件跟踪程序’”,将“未配置”改 ...

  3. Android中的数据结构

    数据结构在Android中也有着大量的运用,这里采用数据结构与源代码分析相结合,来认识Android的数据结构 线性表 线性表可分为顺序存储结构和链式存储结构 顺序存储结构-ArrayList 通过对 ...

  4. mysql 按照计算值排序

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

  5. sql server版本特性简介、版本介绍简介

    1.SQL Server 版本简介 1.1.sql server的版本信息 年    代 版    本 大版本号 1993年 SQL Server for Windows NT 4.21 1994年 ...

  6. MAC 添加Jmeter环境变量

    vim ./bash_profile JMETER_HOME=/Users/finup/apache-jmeter-5.1.1 CLASSPATH=$JAVA_HOME/lib/tools.jar:$ ...

  7. go 缓冲IO

    package main import ( "bufio" "fmt" "os" "strings" ) func ma ...

  8. HA 高可用集群概述及其原理解析

    HA 高可用集群概述及其原理解析 1. 概述 1)所谓HA(High Available),即高可用(7*24小时不中断服务). 2)实现高可用最关键的策略是消除单点故障.HA严格来说应该分成各个组件 ...

  9. ABP 基于DDD的.NET开发框架 学习（六）创建新动态Api

    我们想要这个服务暴露成一个Web API控制器,以方便客户端调用.ASP.NET Boilerplate能够自动且动态地为这个应用服务创建Web API 控制器,只需要一行配置代码即可完成. Dyna ...

  10. 空间数据索引RTree（R树）完全解析及Java实现

    第一部分 空间数据的背景介绍 空间数据的建模 基于实体的模型(基于对象)Entity-based models (or object based) 常用的空间数据查询方式 空间数据获取的方法 R树 简 ...