React环境搭建(非脚手架)

逆战班

一、建立一个项目的目录

在目录命令行中 npm init -y会在目录中产生一个文件package.json

二、安装React,react.development.js

npm i react --save (或yarn add react)
会在目录中有一个node_modules目录,
找到react目录,
找到这个目录下的umd目录,拷贝umd目录下react.development.js到自己的js目录下

三、react-dom.development.js

npm i react-dom --save(或 yarn add react-dom)
在node_modules目录下找到react-dom目录,在这个目录下找到umd目录,
在react-dom/umd目录下找到react-dom.development.js文件拷贝到自己的js目录下

四、babel.js

npm i babel-standalone --save(或yarn add babel-standalone)
在node_modules目录下找到babel-standalone目录
拷贝这个目录下的babel.js 到自己的js目录下

五、引入顺序

a)react.development.js
b)react-dom.development.js
c) babel.js

六、注意

script的type属性指定为 text/babel

七、成果图展示

原文地址:https://www.cnblogs.com/godvvv/p/12358473.html

时间: 2024-10-07 11:43:31

React环境搭建(非脚手架)的相关文章

webpack+babel+ES6+react环境搭建

webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app目录 用来存放项目源文件 mkdir dist // 创建dist目录 用来存放打包好的文件 touch .gitignore //创建.gitignore 用来添加git 忽略的文件 touch webpack.config.js //创建webpack的配置文件 cd app //进入到app目

最小白的webpack+react环境搭建

本文也同步发表在我的公众号"我的天空" 从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的webpack+react环境. 最近在玩webpack+react+移动端,那么第一步自然是搭建相关的环境,本来网上的教程很不错,只是前端相关的东西发展太过迅猛,只相隔了半年有些东西的版本就不对了,有些配置.命令等照着之前的教程做就可能会掉到坑里去,别问我怎么知道的,我刚刚从坑里爬出来,因此赶紧写篇文章来记录一下,也算是让自己再巩固一下. 本篇完全是从零开始,用最少的配置.最少的代

webpack+react环境搭建,不必要再使用create-react-app来创建,随意配置更方便

首先是配置文件package.json,里边包括所用到的babel以及关于react的一些依赖包. { "name": "service", "version": "0.1.0", "private": true, "dependencies": { "@antv/g6": "^1.2.1", "@babel/core": &q

react环境搭建

react.js有类似于vue-cli的脚手架 ---- create-react-app 以下是采用了淘宝国内镜像资源去下载的react脚手架图 安装完脚手架后,还必须初始化react应用在cmd键入: create-react-app my-app 到这里,react的脚手架工作已经准备完毕,使用npm start启动react应用 react脚手架启动项目完毕 原文地址:https://www.cnblogs.com/xiyangcai/p/8463545.html

React学习笔记-1-什么是react,react环境搭建以及第一个react实例

什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似.react是Facebook官方推出的一个javascript的库,现在已经有了非常多的库和框架Facebook为什么还要开发一款新的框架呢?原因就是 Facebook遇到了一些新的问题.Facebook需要解决的问题是构建数据不断变化的大型应用.大型应用是什么意思?数据不断变化带来什么问题呢? 

Koa2学习(一)环境搭建

Koa2学习(一)环境搭建 koa2脚手架 koa2服务安装 koa2-generator目录结构 什么是 Koa2 koa 是由 Express 原班人马打造的,致力于成为一个更小.更富有表现力.更健壮的 Web 框架. 使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套, 并极大地提升错误处理的效率.koa 不在内核方法中绑定任何中间件, 它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手. 检查版本 在node版本大于v7

【REACT NATIVE 跨平台应用开发】环境搭建问题记录&&XCODE7模拟器上COMMAND+R失效的几种替换方法

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2147.html React Native 这里不多介绍,其实就是个跨平台开发原生应用的开源引擎. 更详细的介绍,大家可以搜索"facebook react native" 或 "taobao react native" 附上 React Native 官方网站:http://react

逻辑性最强的React Native环境搭建与调试

React Native(以下简称RN),已经“火”了好一段时间了,网上的资料相对也很丰富,只是一直迟迟没有发布1.0,不过出身豪门(Facebook)的RN和国内顶级互联网公司对于RN的实践与应用,就足矣证明其实力! 本文分为以下几个部分: 一.环境搭建: 二.APP调试与运行: 三.扩展知识: ------------------------------------------------------------------------------------分割线-------------

客户端高性能组件化框架React简介、特点、环境搭建及常用语法

明天就是春节了 预祝大家新春快乐 [ ]~( ̄▽ ̄)~* 天天饭局搞得我是身心疲惫= = 所以更新比较慢 今天想跟大家分享的就是这个大名鼎鼎的React框架 简介 React是这两年非常流行的框架 并不难,还是挺容易上手的 起源于Facebook内部项目(一个广告系统) 传统页面从服务器获取数据,显示到浏览器上,用户输入数据传入服务器 但随着数据量增大,越来越难以维护了 Facebook觉得MVC不能满足他们的扩展需求了(巨大的代码库和庞大的组织) 每当需要添加一项新的功能或特性时,系统复杂度就