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手动搭建解析的更多相关文章

  1. 手动搭建的react环境中,关于图片引入的问题

    react手动搭建的环境,require引进来图片不显示,网页src显示[object module] 解决方案 (1)import引进图片 import anli from './img/anli. ...

  2. React 系列文章(1): npm 手动搭建React 运行实例 (新手必看)

    摘 要 刚接触React 开发, 在摸索中构建react 运行环境,总会遇到各种坑:本文,将用最短时间解决webpack+react 环境搭建问题. 1.如果你还没有React基础 看这里. 2.如果 ...

  3. React项目搭建与部署

    React项目搭建与部署 一,介绍与需求 1.1,介绍 1.1.1,React简介 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React ...

  4. 新人学PHP,认为手动搭建环境而苦恼吗?这篇文章告诉你多简单!

    本教程适用于初学PHP,想了解手动搭建PHP环境的童鞋. 一键环境和高手勿喷. 本教程以下列版本软件为例: 所需软件目录 我在这里的目录结构是(个人习惯) 安装与配置 apache 双击安装Apach ...

  5. SSM框架手动搭建

    SSM框架手动搭建 创建web项目 IDEA创建Maven项目 [File]-->[new]-->[project..] 将项目变为web项目 [File]-->[Project S ...

  6. ASP.NET Web API 2系列(一):初识Web API及手动搭建基本框架

    1.导言 随着Web技术的发展,现在各种框架,前端的,后端的,数不胜数.全栈工程师的压力越来越大. PC端,pad端,移动端App(安卓/IOS)的发展,使得前后端一体的开发模式十分笨重.因此,前后端 ...

  7. vue新手入门之使用vue框架搭建用户登录注册案例,手动搭建webpack+Vue项目(附源码,图文详解,亲测有效)

    前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...

  8. WindowsServer2012 R2 64位中文标准版(IIS8.5)下手动搭建PHP环境详细图文教程(二)安装IIS8.5

    //来源:http://www.imaoye.com/Technology/WindowsServer2012R264IIS85.html 阿里云服务器ECS Windows Server 2012 ...

  9. Linux手动搭建LAMP环境

    当你看到标题里的“手动搭建”,你是不是会想,难不成还有“自动搭建”?当然......不是,这里的“手动搭建”是指按部就班的搭建Apache.MySQL.PHP环境,是相对于集成软件包而言的.所以你是不 ...

随机推荐

  1. [转]jQuery插件写法总结以及面向对象方式写法

    本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...

  2. (转)IBM AIX系统硬件信息查看命令(shell脚本)

    IBM AIX系统硬件信息查看命令(shell脚本) 原文:http://blog.itpub.net/22085031/viewspace-1054015/ 查看IBM AIX系统的主机型号.序列号 ...

  3. (转)Linux命令之md5sum

    Linux命令之md5sum  原文:https://www.cnblogs.com/zhuxiaohou110908/p/5786893.html 1. 背景 在网络传输.设备之间转存.复制大文件等 ...

  4. struts2的java.lang.NoSuchMethodException异常处理

    1. 你有没有试试看 其它的方法能不能用,要是都是这种情况的话,可能是你的Action类没有继承structs里面的DispatchAction或者其它的类.还有你注意下方法的参数列表,类型顺序要正确 ...

  5. compile with -fPIC

    在新公司工作第四天,依然要编译FFmpeg,不同的是难度大了,以前遇到什么参数编译不过的,就去掉,因为不是专业做视频的,但是新公司绕不过了. 编译FFmpeg动态库的时候发现链接某些静态库的时候会报错 ...

  6. ajax多次请求的一个效果思路

    首先页面加载时候显示遮罩层 jQuery(function() { show_dialog(); //tianxie(); }); 定义一个全局数组,用于存放问题id var qar = []; 循环 ...

  7. c# 的默认访问修饰符(转)

    c# 的访问修饰符是private 还是 internal? 准确的说,不能一概而论. 类(class)或结构(struct)如果不是在其它类或结构中的话,它的访问类型要不就是internal, 要不 ...

  8. Spring Boot集成Hibernate Validator

    废话不多说,直接开始集成环境. 一.环境集成 在项目中hibernate-Validator包在spring-boot-starter-web包里面有,不需要重复引用 .(整个Demo都是用PostM ...

  9. 实现Callable的对象中,用@Autowired注入别的对象失败

    场景是这样: 我需要在一个实现类A中写一个拿到返回值的多线程,于是用的Callable,在这个实现类A外我又写了一个专门实现Callable的实现类B,在B中用spring注解@Autowired注入 ...

  10. WebView加载页面,带链接的Img在页面第一次加载时无法显示的问题

    在做一个App的过程中,用到WebView来显示几个页面.在这个过程中发现有些页面的显示出现了异常:页面中的Img链接在页面第一次加载时无法正常显示图片,退出页面再次进入后可正常显示.开始以为是Web ...