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. Alpha阶段项目总结

    1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件是一款面向高校学生的简单快速的云笔记,不仅具有笔记的添加.修改.查看和删除功能,还有笔记公开功能,用户 ...

  2. C和指针 第十五章 输入输出缓冲

    对于C,所有的I/O操作都只是简单的从程序移进或移出字节,这种字节流便成为流(stream),我们需要关心的只是创建正确的输出字节数据,以及正确的输入读取数据,特定的I/O设备细节都是对程序隐藏的. ...

  3. 错误: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 ...

  4. 伪元素::after和::before

    ::after是一个CSS伪元素,使用::after,你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西).虽然最终生成的东西并不是真正的DOM里的内容,但这些内容能像普通内容一样显示, ...

  5. 关于httpd服务的安装、配置

    httpd是Apache超文本传输协议(HTTP)服务器的主程序.通常,httpd不应该被直接调用,而应该在linux系统中由 apachectl 调用.接下来我们将了解有关httpd服务的安装与配置 ...

  6. 常见端口 HTTP代码

    端口号 系统保留了前0到1023端口作为常用的网络服务. 0-1023 公认端口 1024-49151 注册端口 49152-65535 动态或私有端口 1 TCPMUX 主要在SGI Irix机器 ...

  7. nginx负载均衡集群

    nginx负载均衡集群  0.前言:nginx 负载均衡,属于网络7层模型中的应用层,说白了就是一个代理,要用 upstrem 模块实现,代理则用proxy模块 1.可以针对域名做转发,lvs只能针对 ...

  8. 转行进入IT前端,目标全栈

    选择进入IT这个行业,未来充满着挑战,未来充满着机遇,互联网已经走入高速稳定的发展正轨了,前端大时代也已经到来了.前端之路怎么走,前端需要不停地学习新知识,跟紧时代的步伐,成为全栈工程师是前端的目标. ...

  9. LeetCode 205 Isomorphic Strings

    Problem: Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if ...

  10. debian命令行删除postgresql数据库

    创建数据库 $ createdb odoo-test 删除数据库 $ dropdb odoo-test