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. manacher算法专题

    一.模板 算法解析:http://www.felix021.com/blog/read.php?2040 *主要用来解决一个字符串中最长回文串的长度,在O(n)时间内,线性复杂度下,求出以每个字符串为 ...

  2. 电子线路 PCB 中大电流 接口 和 布线问题;

    问题1:电流 大小 和 PCB 中 布线线宽的 关系,电源和信号 稳定性? 问题2:大电流中 接口问题,如microUSB 充电接口中,2A等 快充时接口 会 发热,如果 接口的 布线 太细和 不妥善 ...

  3. 网络第二节——AFNworking

    /** 要使用常规的AFN网络访问 AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; ...

  4. 【bzoj1708】[USACO2007 Oct]Money奶牛的硬币

    题目描述 在创立了她们自己的政权之后,奶牛们决定推广新的货币系统.在强烈的叛逆心理的驱使下,她们准备使用奇怪的面值.在传统的货币系统中,硬币的面值通常是1,5,10,20或25,50,以及100单位的 ...

  5. VSTO PowerPoint 代码删除Shape后再恢复出现无法再次获取的问题

    做PowerPoint的VSTO插件项目,遇到个很奇怪的问题,当代码执行删除某些Shape时,没问题,但是操作Undo也就是恢复后,无法再次获取到之前删除的对象,这种情况只在Office2007中出现 ...

  6. C++ vector容器find查询函数

    vector< ); //查找1 if ( result == L.end( ) ) //没找到 cout << "No" << endl; else ...

  7. Dijkstra 算法

    all the nodes should be carectorized into three groups: (visited, front, unknown) we should pay spec ...

  8. RecyclerView各种报错

    昨天有人提到RecyclerView,于是我就照着官方的文档研究了下使用方法,结果发现示例代码有问题真是醉. 自己修改后编译是没有问题的但是运行的时候总是报错,大意就是提示找不到RecyclerVie ...

  9. BOM 浏览器对象模型

    总结自JavaSript高级编程

  10. UOJ#213——【UNR #1】争夺圣杯

    1.题意:给一个序列,枚举长度x,然后在这个序列中所有长度为x的区间,我们求出这些区间的最大值之和并取模,最后将所有的异或起来就好啦 2.分析:听说好多人写的 ,特来写一发 的算法骗访问量 话说这个东 ...