react手动搭建解析
1.创建项目名<react-progect>
->项目文件下创建package.json文件
->项目下执行命令:
cnpm init
cnpm i webpack webpack-dev-server -D
->安装loader,生成mode_module文件
cnpm install babel-loader babel-core babel-preset-env -D
->进件index.html,static,src,dist,src下创建main.js,再 创建配置文件1.webpack.config.js
webpack.config.js文件:
module.export={
entry: './src/main.js', //入口文件
output:{ //output输出文件
path:_dirname,
filename:'dist/app.js'
}
}
2..index.html添加
<div id="root"></div>
->安装插件(主要是index.html不用手动引入script标签):
cnpm install html-webpack-plugin -D
->再次配置webpack.config.js文件
->.babelrc加
{
"presets":{
"env",
"react"
}
}
->src下的main.js文件加一个arelt("1")
->执行webpack-dev-server命令,到页面上查看即可发现弹出了1;
->如果想运行方便一点可前往packsge.json配置
"script":{
"dev":"webpack-dev-server --open"
}
->如果有报错版本不对的话,重新安一下node_moudel;
cnpm i webpack@3 webpack-dev-server@2 -D
->执行
cnpm i
cnpm run dev
->react如果要操作dom结构,需要安装react-dom
执行cnpm i react react-dom -S
cnpm run dev
->安装预设编译jsx语法
cnpm install babel-preset-react -D
->将webpack.config.js里面的loader修改
{test:/\.(js|jsx)$/,loader::'babel-loader',exclude:/node_moudels/}
-->main.js
import React from 'react'
import ReactDOM from 'react-dom'
react手动搭建解析的更多相关文章
- 手动搭建的react环境中,关于图片引入的问题
react手动搭建的环境,require引进来图片不显示,网页src显示[object module] 解决方案 (1)import引进图片 import anli from './img/anli. ...
- React 系列文章(1): npm 手动搭建React 运行实例 (新手必看)
摘 要 刚接触React 开发, 在摸索中构建react 运行环境,总会遇到各种坑:本文,将用最短时间解决webpack+react 环境搭建问题. 1.如果你还没有React基础 看这里. 2.如果 ...
- React项目搭建与部署
React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...
- 新人学PHP,认为手动搭建环境而苦恼吗?这篇文章告诉你多简单!
本教程适用于初学PHP,想了解手动搭建PHP环境的童鞋. 一键环境和高手勿喷. 本教程以下列版本软件为例: 所需软件目录 我在这里的目录结构是(个人习惯) 安装与配置 apache 双击安装Apach ...
- SSM框架手动搭建
SSM框架手动搭建 创建web项目 IDEA创建Maven项目 [File]-->[new]-->[project..] 将项目变为web项目 [File]-->[Project S ...
- ASP.NET Web API 2系列(一):初识Web API及手动搭建基本框架
1.导言 随着Web技术的发展,现在各种框架,前端的,后端的,数不胜数.全栈工程师的压力越来越大. PC端,pad端,移动端App(安卓/IOS)的发展,使得前后端一体的开发模式十分笨重.因此,前后端 ...
- vue新手入门之使用vue框架搭建用户登录注册案例,手动搭建webpack+Vue项目(附源码,图文详解,亲测有效)
前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...
- WindowsServer2012 R2 64位中文标准版(IIS8.5)下手动搭建PHP环境详细图文教程(二)安装IIS8.5
//来源:http://www.imaoye.com/Technology/WindowsServer2012R264IIS85.html 阿里云服务器ECS Windows Server 2012 ...
- Linux手动搭建LAMP环境
当你看到标题里的“手动搭建”,你是不是会想,难不成还有“自动搭建”?当然......不是,这里的“手动搭建”是指按部就班的搭建Apache.MySQL.PHP环境,是相对于集成软件包而言的.所以你是不 ...
随机推荐
- [转]jQuery插件写法总结以及面向对象方式写法
本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...
- (转)IBM AIX系统硬件信息查看命令(shell脚本)
IBM AIX系统硬件信息查看命令(shell脚本) 原文:http://blog.itpub.net/22085031/viewspace-1054015/ 查看IBM AIX系统的主机型号.序列号 ...
- (转)Linux命令之md5sum
Linux命令之md5sum 原文:https://www.cnblogs.com/zhuxiaohou110908/p/5786893.html 1. 背景 在网络传输.设备之间转存.复制大文件等 ...
- struts2的java.lang.NoSuchMethodException异常处理
1. 你有没有试试看 其它的方法能不能用,要是都是这种情况的话,可能是你的Action类没有继承structs里面的DispatchAction或者其它的类.还有你注意下方法的参数列表,类型顺序要正确 ...
- compile with -fPIC
在新公司工作第四天,依然要编译FFmpeg,不同的是难度大了,以前遇到什么参数编译不过的,就去掉,因为不是专业做视频的,但是新公司绕不过了. 编译FFmpeg动态库的时候发现链接某些静态库的时候会报错 ...
- ajax多次请求的一个效果思路
首先页面加载时候显示遮罩层 jQuery(function() { show_dialog(); //tianxie(); }); 定义一个全局数组,用于存放问题id var qar = []; 循环 ...
- c# 的默认访问修饰符(转)
c# 的访问修饰符是private 还是 internal? 准确的说,不能一概而论. 类(class)或结构(struct)如果不是在其它类或结构中的话,它的访问类型要不就是internal, 要不 ...
- Spring Boot集成Hibernate Validator
废话不多说,直接开始集成环境. 一.环境集成 在项目中hibernate-Validator包在spring-boot-starter-web包里面有,不需要重复引用 .(整个Demo都是用PostM ...
- 实现Callable的对象中,用@Autowired注入别的对象失败
场景是这样: 我需要在一个实现类A中写一个拿到返回值的多线程,于是用的Callable,在这个实现类A外我又写了一个专门实现Callable的实现类B,在B中用spring注解@Autowired注入 ...
- WebView加载页面,带链接的Img在页面第一次加载时无法显示的问题
在做一个App的过程中,用到WebView来显示几个页面.在这个过程中发现有些页面的显示出现了异常:页面中的Img链接在页面第一次加载时无法正常显示图片,退出页面再次进入后可正常显示.开始以为是Web ...