React News Site 新闻站
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 新闻站的更多相关文章
- vue2.0 仿手机新闻站(一)项目开发流程
vue仿手机新闻站: 1.拿到静态页面,直接用vue边布局,边写 2.假数据 没有用任何UI组件,切图完成 做项目基本流程: 1.规划组件结构 Nav.vue Header.vue Home.vue ...
- 用react开发一个新闻列表网站(PC和移动端)
最近在学习react,试着做了一个新闻类的网站,结合ant design框架, 并且可以同时在PC和移动端运行: 主要包含登录和注册组件.头部和脚部组件.新闻块类组件.详情页组件.评论和收藏组件等: ...
- 使用React重构百度新闻webapp前端
http://wangfupeng.coding.me/share/2016/08/06/restruct-bdnews-webapp-by-react.html
- vue2.0 仿手机新闻站(七)过滤器、动画效果
1.全局过滤器 (1)normalTime.js 自定义 将 时间戳 转换成 日期格式 过滤器 /** * 将 时间戳 转换成 日期格式 */ export const normalTime = ( ...
- vue2.0 仿手机新闻站(六)详情页制作
1.结构 2.配置详情页路由 router.config.js /** * 配置 路由 */ // 导入组件 import Home from './components/Home.vue' impo ...
- vue2.0 仿手机新闻站(五)全局的 loading 组件
1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...
- vue2.0 仿手机新闻站(四)axios
1.axios的配置 main.js import Vue from 'vue' import App from './App.vue' // 引入 路由 import VueRouter from ...
- vue2.0 仿手机新闻站(三)通过 vuex 进行状态管理
1.创建 store 结构 2.main.js 引入 vuex 3. App.vue 组件使用 vuex <template> <div id="app"&g ...
- vue2.0 仿手机新闻站(二)项目结构搭建 及 路由配置
1.项目结构 $ vue init webpack-simple news $ npm install vuex vue-router axios style-loader css-loader -D ...
随机推荐
- manacher算法专题
一.模板 算法解析:http://www.felix021.com/blog/read.php?2040 *主要用来解决一个字符串中最长回文串的长度,在O(n)时间内,线性复杂度下,求出以每个字符串为 ...
- 电子线路 PCB 中大电流 接口 和 布线问题;
问题1:电流 大小 和 PCB 中 布线线宽的 关系,电源和信号 稳定性? 问题2:大电流中 接口问题,如microUSB 充电接口中,2A等 快充时接口 会 发热,如果 接口的 布线 太细和 不妥善 ...
- 网络第二节——AFNworking
/** 要使用常规的AFN网络访问 AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationManager manager]; ...
- 【bzoj1708】[USACO2007 Oct]Money奶牛的硬币
题目描述 在创立了她们自己的政权之后,奶牛们决定推广新的货币系统.在强烈的叛逆心理的驱使下,她们准备使用奇怪的面值.在传统的货币系统中,硬币的面值通常是1,5,10,20或25,50,以及100单位的 ...
- VSTO PowerPoint 代码删除Shape后再恢复出现无法再次获取的问题
做PowerPoint的VSTO插件项目,遇到个很奇怪的问题,当代码执行删除某些Shape时,没问题,但是操作Undo也就是恢复后,无法再次获取到之前删除的对象,这种情况只在Office2007中出现 ...
- C++ vector容器find查询函数
vector< ); //查找1 if ( result == L.end( ) ) //没找到 cout << "No" << endl; else ...
- Dijkstra 算法
all the nodes should be carectorized into three groups: (visited, front, unknown) we should pay spec ...
- RecyclerView各种报错
昨天有人提到RecyclerView,于是我就照着官方的文档研究了下使用方法,结果发现示例代码有问题真是醉. 自己修改后编译是没有问题的但是运行的时候总是报错,大意就是提示找不到RecyclerVie ...
- BOM 浏览器对象模型
总结自JavaSript高级编程
- UOJ#213——【UNR #1】争夺圣杯
1.题意:给一个序列,枚举长度x,然后在这个序列中所有长度为x的区间,我们求出这些区间的最大值之和并取模,最后将所有的异或起来就好啦 2.分析:听说好多人写的 ,特来写一发 的算法骗访问量 话说这个东 ...