用react编写一个hello world
我要分享的是用react搭建一个简单的hello world, 一个小demo, 大神请略过
首先看一下目录结构
创建一个目录, 用于存放demo
mkdir reactHello
cd reactHello
初始化一个package.json文件
npm init
会让你输入一些参数, 一直回车就可以
安装必要的依赖包
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:dev": "webpack-dev-server --progress --colors --host localhost --port 3001 --inline --hot",
"start:prod": "webpack && node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.1.0",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.5.1"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}
这个是安装好的, 你可以直接把这段代码拷贝到你的package.json文件中, 让后执行 npm install 就把所有的依赖都安装好了
创建一个dev文件夹,在下面创建 index.jsx文件
import React, {Component} from 'react';
import ReactDom from 'react-dom';
class HelloWorld extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>Hello World</div>
);
}
}
ReactDom.render(
<HelloWorld />,
document.getElementById('container')
);
在根目录下创建 index.html文件, 作为项目的入口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React</title>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript" src="output/index.js"></script>
</html>
配置webpack选项, 用于启动和打包项目 创建webpack.config.js
// 引入模块
var webpack = require('webpack');
var path = require('path'); // 解析目录地址
var DEV = path.resolve(__dirname, 'dev'); // dev目录
var OUTPUT = path.resolve(__dirname, 'output'); // output目录 // 配置
var config = {
entry: {
index: [DEV + '/index.jsx'] // 入口配置，支持 string|object|array，具体参考 https://doc.webpack-china.org/configuration/
},
output: {
// webpack 如何输出结果的相关选项 path: OUTPUT,
// 所有输出文件的目标路径
// 必须是绝对路径（使用 Node.js 的 path 模块） filename: '[name].js', chunkFilename: (new Date()).getTime() + '[id].chunk.js',
// 「入口分块(entry chunk)」的文件名模板 publicPath: '/output/'
// 输出解析文件的目录，url 相对于 HTML 页面
},
module: { // 加载器
loaders: [
{
include: DEV,
loader: 'babel-loader'
}
]
}, // 插件
plugins: [new webpack.HotModuleReplacementPlugin()]
}; module.exports = config;
创建server.js文件, 用于启动项目的服务器
var webpack = require('webpack');
var webpackDevMiddleware = require("webpack-dev-middleware");
var webpackDevServer = require('webpack-dev-server');
var config = require("./webpack.config.js");
// 在入口文件数组中添加两个选项
// webpack-dev-server/client?http://localhost:3001
// webpack/hot/dev-server
config
.entry
.index
.unshift('webpack-dev-server/client?http://localhost:3001', 'webpack/hot/dev-server');
// 合并一个 devServer到配置文件
Object.assign(config, {
devServer: {
hot: true,
inline: true
}
})
// 编译
var compiler = webpack(config);
// 初始化一个webpack-dev-server
new webpackDevServer(compiler, {
publicPath: config.output.publicPath,
historyApiFallback: false,
stats: {
colors: true
}
}).listen(3001, 'localhost', function (error) {
if (error) {
console.error(error);
}
});
启动项目, 执行命令
npm run start
项目运行在 http://localhost:3001
用react编写一个hello world的更多相关文章
- 用react编写一个可以编辑的表格
这只一个雏形,但是可以用了.难点是如何点击每行后面的编辑按钮,让当前行的格子都变成input. import {Component} from 'react' const Action = props ...
- 用 React 编写移动应用 React Native
转载:用 React 编写移动应用 React Native ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App.而且React ...
- 尝鲜.net core2.1 ——编写一个global tool
本文内容参考微软工程师Nate McMaster的博文.NET Core 2.1 Global Tools 用过npm开发都知道,npm包都可以以全局的方式安装,例如安装一个http-server服务 ...
- 使用JavaScript和React编写原生移动应用
使用JavaScript和React编写原生移动应用 React Native使你只使用JavaScript也能编写原生移动应用. 它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的 ...
- 编写一个通用的Makefile文件
1.1在这之前,我们需要了解程序的编译过程 a.预处理:检查语法错误,展开宏,包含头文件等 b.编译:*.c-->*.S c.汇编:*.S-->*.o d.链接:.o +库文件=*.exe ...
- CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL
CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL +BIT祝威+悄悄在此留下版了个权的信息说: 开始 本文用step by step的方式,讲述如何使 ...
- .NET Core RC2发布在即，我们试着用记事本编写一个ASP.NET Core RC2 MVC程序
在.NET Core 1.0.0 RC2即将正式发布之际,我也应应景,针对RC2 Preview版本编写一个史上最简单的MVC应用.由于VS 2015目前尚不支持,VS Code的智能感知尚欠火候,所 ...
- 网络爬虫：使用Scrapy框架编写一个抓取书籍信息的爬虫服务
上周学习了BeautifulSoup的基础知识并用它完成了一个网络爬虫( 使用Beautiful Soup编写一个爬虫 系列随笔汇总 ), BeautifulSoup是一个非常流行的Python网 ...
- 作业二：个人编程项目——编写一个能自动生成小学四则运算题目的程序
1. 编写一个能自动生成小学四则运算题目的程序.(10分) 基本要求: 除了整数以外,还能支持真分数的四则运算. 对实现的功能进行描述,并且对实现结果要求截图. 本题发一篇随笔,内容包括: 题 ...
随机推荐
- 2017年3月1日09:45:39 css选择器，session数据取不到
昨天碰到了一个问题,通过输入指定的url进行登录在服务端将url存在session中但是登陆之后因为页面提交的登录请求是ajax请求,在后端提取session时获取不当之前存的url,老司机说不是同一 ...
- urlencode urldecode
1.urlencode()函数原理就是首先把中文字符转换为十六进制,然后 在每个字符前面加一个标识符%. urldecode()函数与urlencode()函 数原理相反,用于解码已编码的 URL 字 ...
- CRM工具简介
pacemaker是高可用集群中的CRM(Cluster Resource Manager)资源管理层,他是一个服务,可以作为一个单独的服务启动,不过在如果使用corosync1.4中,我们可以设置c ...
- Centos7修改profile文件后导致vi command not find
Centos7修改profile文件后导致vi command not find,原因是profile文件没有配置正确,系统就无法找到精确命令了.解决方法: 1.在命令行中输入:export PATH ...
- PAT 乙级 1066. 图像过滤(15)
图像过滤是把图像中不重要的像素都染成背景色,使得重要部分被凸显出来.现给定一幅黑白图像,要求你将灰度值位于某指定区间内的所有像素颜色都用一种指定的颜色替换. 输入格式: 输入在第一行给出一幅图像的分辨 ...
- httpd: config error '*.php:/usr/bin/php-cgi' in '/etc/httpd.conf'
/********************************************************************************* * httpd: config e ...
- Python之路，第十一篇：Python入门与基础11
python3 函数2 全局变量:一直存在 局部变量:函数执行时存在,执行完毕后销毁: lambda 表达式(又称匿名函数表达式) 作用: 创建一个匿名(无名)函数对象, 同 def 类似但不提供函 ...
- skflow 分类与回归接口API 简单测试
skflow也即是 tf.contrib.learn, 是 TensorFlow 官方提供的另外一个对 TensorFlow 的高层封装,通过这个封装,用户可以和使用 sklearn 类似的方法使用 ...
- 在城市后面加上省，市，区 以及将MySQL入库脚本封装成class
在城市后面加省,市,区时,使用过滤器和for循环,if判断 一起使用. 自定义一个过滤器 def my_detail(val): ...
- 2016 ACM-ICPC EC-Final
题目链接:Uva传送门 CFGym传送门 UVALive7897 Number Theory Problem (找规律签到) 思路: 8的幂次都是可以的,因为an-1一定能分解成a-1乘上一个多项式. ...