Learn React & Webpack by building the Hacker News front page

from https://github.com/theJian/build-a-hn-front-page

1.安装nodejs

2.安装webpack

npm i webpack -g

3.安装webpack-dev-server

npm i webpack-dev-server -g

4.安装依赖

4.1安装React

npm i react react-dom --save

4.2安装Jquery

npm i jquery --save

4.3安装Babel的loader

npm i babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev

4.4安装资源引入loader

npm install url-loader file-loader --save-dev
npm install css-loader style-loader --save-dev

5.webpack配置文件

5.1项目工程下创建webpack.config.js,配置代码如下:

var path = require('path')

module.exports = {
entry: path.resolve(__dirname, 'app/app.js'),
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015','react']
}
},
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192'
},
{
test: /\.css$/,
loader: 'style!css'
}
]
}
}

React News Site 新闻站的更多相关文章

  1. vue2.0 仿手机新闻站(一)项目开发流程

    vue仿手机新闻站: 1.拿到静态页面,直接用vue边布局,边写 2.假数据 没有用任何UI组件,切图完成 做项目基本流程: 1.规划组件结构 Nav.vue Header.vue Home.vue ...

  2. 用react开发一个新闻列表网站(PC和移动端)

    最近在学习react,试着做了一个新闻类的网站,结合ant design框架, 并且可以同时在PC和移动端运行: 主要包含登录和注册组件.头部和脚部组件.新闻块类组件.详情页组件.评论和收藏组件等: ...

  3. 使用React重构百度新闻webapp前端

    http://wangfupeng.coding.me/share/2016/08/06/restruct-bdnews-webapp-by-react.html

  4. vue2.0 仿手机新闻站(七)过滤器、动画效果

    1.全局过滤器 (1)normalTime.js  自定义 将 时间戳 转换成 日期格式 过滤器 /** * 将 时间戳 转换成 日期格式 */ export const normalTime = ( ...

  5. vue2.0 仿手机新闻站(六)详情页制作

    1.结构 2.配置详情页路由 router.config.js /** * 配置 路由 */ // 导入组件 import Home from './components/Home.vue' impo ...

  6. vue2.0 仿手机新闻站(五)全局的 loading 组件

    1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...

  7. vue2.0 仿手机新闻站(四)axios

    1.axios的配置 main.js import Vue from 'vue' import App from './App.vue' // 引入 路由 import VueRouter from ...

  8. vue2.0 仿手机新闻站(三)通过 vuex 进行状态管理

    1.创建 store 结构 2.main.js  引入 vuex 3. App.vue  组件使用 vuex <template> <div id="app"&g ...

  9. vue2.0 仿手机新闻站(二)项目结构搭建 及 路由配置

    1.项目结构 $ vue init webpack-simple news $ npm install vuex vue-router axios style-loader css-loader -D ...

随机推荐

  1. Maven Super POM

    Maven super POM defines some properties. Three ways to find it ${M2_HOME}/lib/maven-model-builder-3. ...

  2. 【ZOJ 3929】Deque and Balls(普通dp)

    题意:给出一个序列,按照顺序一个一个放入双端队列(可以放在头部也可以放在尾部),一个队列的美丽指数就是数列中a[i]>a[i+1]的个数,求美丽指数的期望*2^n的值. 解题思路:方便起见,我们 ...

  3. 调试D2JS

    D2JS 最终加载运行于 nashorn 上,目前能调试 nashorn js 的 IDE 只有一款:NetBeans.eclipse 没有计划,神器号称支持 nashorn,对于简单类型可以观察,对 ...

  4. 关于es5的一些新方法

    1.数组方法(1)isArray在之前我们判断数组类型的数据都是用instanceof来判断的,es5新增了对数组的判断,即Array.isArray()(2)every和some这两个方法一般用于对 ...

  5. GSM07.10协议中串口复用使用的校验算法

    ] = { 0x00, 0x91, 0xE3, 0x72, 0x07, 0x96, 0xE4, 0x75, 0x0E, 0x9F, 0xED, 0x7C, 0x09, 0x98, 0xEA, 0x7B ...

  6. 反编译apk

    一.反编译Apk得到Java源代码 首先要下载两个工具:dex2jar和JD-GUI 前者是将apk中的classes.dex转化成Jar文件,而JD-GUI是一个反编译工具,可以直接查看Jar包的源 ...

  7. 创建table并实现ID自增长

    ① create table p_user( id               number(10) not null primary key, name             varchar2(3 ...

  8. 微信小程序常见错误及基本排除方法

    也接触了不少人解决问题的过程里,有一些比较难以排查的可能性列举在这,方便大家看一下:   也欢迎大家把自己常用的排除方法列举在这,一起互相学习探讨!1:ES6:使用es6可能导致安卓端真机调试时很多问 ...

  9. highcharts

    preparation Highcharts Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对个人用 ...

  10. vi编辑器使用

    显示行号 set nu 取消行号 set nonu 定位到某一行 gg 定位到首行 G 定位到最后一行 在VI编辑器中切换调用外部shell命令 :!ifconfig   在编辑过程中,看ip地址 插 ...