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

摘 要

刚接触React 开发, 在摸索中构建react 运行环境,总会遇到各种坑;本文,将用最短时间解决webpack+react 环境搭建问题.

1、如果你还没有React基础 看这里.

2、如果不知道webpack是啥?请 看这里.

3、如果你还没有装npm 看这里.

目 录

一、webpack+react 运行实例.
二、webpack 运行环境配置分析.
三、如何手动搭建一个webpack+react 运行环境.

一、webpack+react 运行实例

1、实例代码

源代码下载地址:https://github.com/xiangxiong/React/tree/blog-react/blogs

2、目录结构

│  index.html     # 输出文件
│  package.json   # 项目信息
│  webpack.config.js # webpack 打包配置
│
└─src
        bundle.js  # 打包输出文件
        index.js    # 入口文件

3、快速运行

1 npm install
2 npm run dev

二、webpack 运行环境配置分析

1、 Index.html  首页入口文件

将项目中全局的样式和打包压缩的文件引入到该页面,React会寻找root节点,将子模块渲染到首页

<html>
<head>
</head>
<body>
   <div id="root"></div>
   <script src="src/bundle.js"></script>
</body>
</html>

2. package.json 项目引用组件管理文件

此文件配置重点注意如下节点:main 指的是入口文件的Js,Scripts 指npm运行的命令, dependencies 配置项目依赖的组件.

{
  "name": "mall-admin",
  "version": "1.0.0",
  "description": "Hello React",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --hot --inline"
  },
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  },
  "author": "Shawn",
  "license": "ISC"
}

3.webpack.config.js

该文件为webpack 打包输出文件,entry 入口文件目录设置,output 为打包之后输出bundle.js, loaders 配置为文件加载配置.

var webpack = require(‘webpack‘);
var path = require(‘path‘);
module.exports = {
  context:path.join(__dirname), // 目录
  entry:"./src/index.js", // 入口文件
  module:{
    loaders:[ // 将ES6 转换为 ES5
      {
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: ‘babel-loader‘,
        query: {
          presets: [‘react‘, ‘es2015‘]
        }
      }
    ]
  },
  output:{ // 输出文件配置
    path:__dirname,
    filename:"./src/bundle.js" // 输出文件(打包压缩文件)
  }
};

三、三步搭建运行环境

  1. 搭建好文件结构目录, 编写index.js index.html 运行代码.
  2. 配置package.json 文件,运行npm install.
  3. 配置webpack.config.js 文件,运行 npm run dev.
时间: 2024-10-12 11:12:23

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

学编程新手必看文章

1.把C++当成一门新的语言学习(和C没啥关系!真的.): 2.看<Thinking In C++>,不要看<C++变成死相>: 3.看<The C++ Programming Language>和<Inside The C++ Object Model>,不要因为他们很难而我们自己是初学者所以就不看: 4.不要被VC.BCB.BC.MC.TC等词汇所迷惑--他们都是集成开发环境,而我们要学的是一门语言: 5.不要放过任何一个看上去很简单的小编程问题--他们

React系列文章:无状态组件生成真实DOM结点

在上一篇文章中,我们总结并模拟了JSX生成真实DOM结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({name}) { return <div>{`hello ${name}`}</div>; }; const App = <Greeting name="scott"/>; console.log(App); ReactDOM.render(App, docum

react新建页面步骤(新手必看)

react+antd新建页面步骤: 1.antd创键一个页面从routes开始 import React from 'react'; import { connect } from 'dva'; import UserPage from '../components/userPage' //这是链接组件的地方 function User({dispatch,location}){ const UserPageProps ={} return( <div> <UserPage {...Us

Windows手动搭建PHP运行环境

首先~可以先在目录里面创建一个wamp目录,我的创建在 E: 盘 1.0 下载Apache2.4,x64位.VC11组件[电脑多少位装多少位] apache下载地址:https://www.apachelounge.com/download/VC11/(网站左侧可以选择vc组件,然后有对应的版本)vc11(必须)下载地址:http://www.microsoft.com/zh-CN/download/details.aspx?id=30679(别问为什么是vc2012)下载后打开压缩包,直接把A

网络推广新手必看!如何以数据手法定义文章标题

每天我们都会刷手机看微博,有的看八卦,有的看视频,也有的在看新闻.新闻是可以使我们透过文字来了解社会时事动态的渠道.今天培训讲到了标题如何快速写好的方法,拟定标题的方法有很多,其中的以数据手法定义标题也是众多方法之一.讲师针对这块做了内容详解,我把在课堂上领悟到的要点记录下来,供给大家一起参考. 数据的内容及用在标题里特点   如果不了解数据这个概念不防多看一下新闻报道,新闻报道上写的标题都是包含了有时间.地点,事件起因.后果等信息,以最直接明了的方式进行拟定,这是新闻标题的特点.如果平时我们要

Webpack笔记(二)——搭建React开发环境

前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一下昨天发布的笔记:入门webpack笔记 一.初始化项目文件夹 在任意目录下,新建一个文件夹作为你的项目文件夹,命名随意.随后使用命令行工具,切换到该文件夹,键入npm init进行初始化(遇到的问题一直回车就好了),初始化完成之后可以看到生成了一个package.json文件. 随后在该项目文件夹

从 0 到 1 实现 React 系列 —— 组件和 state|props

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/...) 项目地址 组件即函数 在上一篇 JSX 和 Virtual DOM 中,解释了 JSX 渲染到界面的过程并实现了相应代码,代码调用如下所示: import React from 'react' import ReactDOM from 'react-dom' const element = ( <div className="titl

从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/...) 从 0 到 1 实现 React 系列 -- JSX 和 Virtual DOM 从 0 到 1 实现 React 系列 -- 组件和 state|props 从 0 到 1 实现 React 系列 -- 生命周期和 diff 算法 从 0 到 1 实现 React 系列 -- 优化 set

Net设计模式实例系列文章总结

1 什么是设计模式 设计模式是对在软件设计过程中重复出现的问题提出了一种比较好的解决方案.正如一位专家所说:设计模式是对程序设计人员经常遇到的设计问题的可再现的解决方案(The Smalltalk Companion).GOF设计模式通常被认为是其他设计模式的基础,随着业务复杂度的增大,会不断涌现新的设计模式,而这些新的设计模式一般会以GOF模式理论为参照. 2 为什么要学习设计模式 从个人职业规划来考虑.一位软件开发工程师随着编码量的增加,开发经验的增加,软件理论理解的加深,会不由自主地想一些