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环境,是相对于集成软件包而言的.所以你是不 ...
随机推荐
- windows 7下安装Apache 2.2
一. 软件下载 软件版本:apache_2.2.25-win32-x86-no_ssl.msi 二. 软件安装 双击安装,一路Next下去,直到安装完成. 三. 配置 在安装结束之后,在右下角的状态栏 ...
- Day3下
少女[问题描述]你是能看到第一题的 friends呢.—— hja少女在图上开车, 她们希望把每条边分配给与其相连的点中一个并且每个点最多被分配一条边,问可能的方案数.[输入格式]第一行两个整数
- Python异常处理及元类
一.异常处理 异常是错误发生的信号,一旦程序出错就会产生一个异常,如果该异常没有被应用程序处理,那么该异常就会跑出来,程序的执行也随之终止,也就是说异常就是一个事件,该事件会在程序执行过程中发生,影响 ...
- Stimulsoft Reports送2年免费升级与技术支持
慧都十年大促,与著名报表控件商Stimulsoft联合推出独家活动,即日起12月31日前,购买指定授权的Stimulsoft Reports除了获得本身1年的免费升级外,还加送2年免费升级与技术支持, ...
- Ubuntu 14.04 软件源服务器集合
http://wiki.ubuntu.com.cn/Template:14.04source 服务器列表 可将 http://cn.archive.ubuntu.com/ubuntu/ 替换为下列任意 ...
- MySQL报错:Packets larger than max_allowed_packet are not all
MySQL根据配置文件会限制Server接受的数据包大小.有时候大的插入和更新会受 max_allowed_packet 参数限制,导致写入或者更新失败. 修改方法: 1.修改配置文件my.ini m ...
- QT学习之QScript
QT中有解析Json的一个类叫QScript.貌似还有一个QJson,但听说解析的方便性不如QScript,具体没有深入探究,这里仅简单记录一下QScript的使用. 首先,主要使用到的类有QScri ...
- bzoj2568 比特集合
Description 比特集合是一种抽象数据类型(Abstract Data Type) ,其包含一个集合S,并支持如下几种操作: INS M : 将元素 M 插入到集合S中: DEL M : 将集 ...
- codeforces 600E Lomsat gelral
题面:codeforces600E 学习一下$dsu \ on \ tree$.. 这个东西可以处理很多无修改子树问题,复杂度通常为$O(nlogn)$. 主要操作是:我们先把整棵树链剖一下,然后每次 ...
- C. Tanya and Toys_模拟
C. Tanya and Toys time limit per test 1 second memory limit per test 256 megabytes input standard in ...