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 ...
随机推荐
- Alpha阶段项目总结
1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件是一款面向高校学生的简单快速的云笔记,不仅具有笔记的添加.修改.查看和删除功能,还有笔记公开功能,用户 ...
- C和指针 第十五章 输入输出缓冲
对于C,所有的I/O操作都只是简单的从程序移进或移出字节,这种字节流便成为流(stream),我们需要关心的只是创建正确的输出字节数据,以及正确的输入读取数据,特定的I/O设备细节都是对程序隐藏的. ...
- 错误:java.util.Map is an interface, and JAXB can't handle interfaces.
问题: 在整合spring+cxf时报错java.util.Map is an interface, and JAXB can't handle interfaces. 解决方法: 将服务端的serv ...
- 伪元素::after和::before
::after是一个CSS伪元素,使用::after,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西).虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示, ...
- 关于httpd服务的安装、配置
httpd是Apache超文本传输协议(HTTP)服务器的主程序.通常,httpd不应该被直接调用,而应该在linux系统中由 apachectl 调用.接下来我们将了解有关httpd服务的安装与配置 ...
- 常见端口 HTTP代码
端口号 系统保留了前0到1023端口作为常用的网络服务. 0-1023 公认端口 1024-49151 注册端口 49152-65535 动态或私有端口 1 TCPMUX 主要在SGI Irix机器 ...
- nginx负载均衡集群
nginx负载均衡集群 0.前言:nginx 负载均衡,属于网络7层模型中的应用层,说白了就是一个代理,要用 upstrem 模块实现,代理则用proxy模块 1.可以针对域名做转发,lvs只能针对 ...
- 转行进入IT前端,目标全栈
选择进入IT这个行业,未来充满着挑战,未来充满着机遇,互联网已经走入高速稳定的发展正轨了,前端大时代也已经到来了.前端之路怎么走,前端需要不停地学习新知识,跟紧时代的步伐,成为全栈工程师是前端的目标. ...
- LeetCode 205 Isomorphic Strings
Problem: Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if ...
- debian命令行删除postgresql数据库
创建数据库 $ createdb odoo-test 删除数据库 $ dropdb odoo-test