我要分享的是用react搭建一个简单的hello world, 一个小demo, 大神请略过

首先看一下目录结构

创建一个目录, 用于存放demo

  1. mkdir reactHello
  2. cd reactHello

初始化一个package.json文件

  1. npm init

会让你输入一些参数, 一直回车就可以

安装必要的依赖包

  1. {
  2.   "name": "test",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1",
  8.     "start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
  9.     "start:dev": "webpack-dev-server --progress --colors --host localhost --port 3001 --inline --hot",
  10.     "start:prod": "webpack && node server.js"
  11.   },
  12.   "author": "",
  13.   "license": "ISC",
  14.   "dependencies": {
  15.     "babel-core": "^6.25.0",
  16.     "babel-loader": "^7.1.1",
  17.     "babel-preset-es2015": "^6.24.1",
  18.     "babel-preset-react": "^6.24.1",
  19.     "react": "^15.6.1",
  20.     "react-dom": "^15.6.1",
  21.     "webpack": "^3.1.0",
  22.     "webpack-dev-middleware": "^1.11.0",
  23.     "webpack-dev-server": "^2.5.1"
  24.   },
  25.   "devDependencies": {
  26.     "babel-core": "^6.25.0",
  27.     "babel-loader": "^7.1.1",
  28.     "babel-preset-es2015": "^6.24.1",
  29.     "babel-preset-react": "^6.24.1",
  30.     "react": "^15.6.1",
  31.     "react-dom": "^15.6.1",
  32.     "webpack": "^3.1.0",
  33.     "webpack-dev-server": "^2.5.1"
  34.   },
  35.   "babel": {
  36.     "presets": [
  37.       "es2015",
  38.       "react"
  39.     ]
  40.   }
  41. }

这个是安装好的, 你可以直接把这段代码拷贝到你的package.json文件中, 让后执行 npm install 就把所有的依赖都安装好了

创建一个dev文件夹,在下面创建 index.jsx文件

  1. import React, {Component} from 'react';
  2. import ReactDom from 'react-dom';
  3.  
  4. class HelloWorld extends Component {
  5.     constructor(props) {
  6.         super(props);
  7.     }
  8.     render() {
  9.         return (
  10.             <div>Hello World</div>
  11.         );
  12.     }
  13. }
  14.  
  15. ReactDom.render(
  16.     <HelloWorld />,
  17.     document.getElementById('container')
  18. );

在根目录下创建 index.html文件, 作为项目的入口

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>React</title>
  6. </head>
  7. <body>
  8.     <div id="container"></div>
  9. </body>
  10. <script type="text/javascript" src="output/index.js"></script>
  11. </html>

配置webpack选项, 用于启动和打包项目 创建webpack.config.js

  1. // 引入模块
  2. var webpack = require('webpack');
  3. var path = require('path');
  4.  
  5. // 解析目录地址
  6. var DEV = path.resolve(__dirname, 'dev'); // dev目录
  7. var OUTPUT = path.resolve(__dirname, 'output'); // output目录
  8.  
  9. // 配置
  10. var config = {
  11.     entry: {
  12.         index: [DEV + '/index.jsx'] // 入口配置，支持 string|object|array，具体参考 https://doc.webpack-china.org/configuration/
  13.     },
  14.     output: {
  15.         // webpack 如何输出结果的相关选项
  16.  
  17.         path: OUTPUT,
  18.         // 所有输出文件的目标路径
  19.         // 必须是绝对路径（使用 Node.js 的 path 模块）
  20.  
  21.         filename: '[name].js',
  22.  
  23.         chunkFilename: (new Date()).getTime() + '[id].chunk.js',
  24.         // 「入口分块(entry chunk)」的文件名模板
  25.  
  26.         publicPath: '/output/'
  27.         // 输出解析文件的目录，url 相对于 HTML 页面
  28.     },
  29.     module: {
  30.  
  31.         // 加载器
  32.         loaders: [
  33.             {
  34.                 include: DEV,
  35.                 loader: 'babel-loader'
  36.             }
  37.         ]
  38.     },
  39.  
  40.     // 插件
  41.     plugins: [new webpack.HotModuleReplacementPlugin()]
  42. };
  43.  
  44. module.exports = config;

创建server.js文件, 用于启动项目的服务器

  1. var webpack = require('webpack');
  2. var webpackDevMiddleware = require("webpack-dev-middleware");
  3. var webpackDevServer = require('webpack-dev-server');
  4. var config = require("./webpack.config.js");
  5.  
  6. // 在入口文件数组中添加两个选项
  7. // webpack-dev-server/client?http://localhost:3001
  8. // webpack/hot/dev-server
  9. config
  10.   .entry
  11.   .index
  12.   .unshift('webpack-dev-server/client?http://localhost:3001', 'webpack/hot/dev-server');
  13.  
  14.   // 合并一个 devServer到配置文件
  15. Object.assign(config, {
  16.   devServer: {
  17.     hot: true,
  18.     inline: true
  19.   }
  20. })
  21.  
  22. // 编译
  23. var compiler = webpack(config);
  24.  
  25. // 初始化一个webpack-dev-server
  26. new webpackDevServer(compiler, {
  27.     publicPath: config.output.publicPath,
  28.     historyApiFallback: false,
  29.     stats: {
  30.       colors: true
  31.     }
  32.   }).listen(3001, 'localhost', function (error) {
  33.   if (error) {
  34.     console.error(error);
  35.   }
  36. });

启动项目, 执行命令

  1. npm run start

项目运行在 http://localhost:3001

用react编写一个hello world的更多相关文章

  1. 用react编写一个可以编辑的表格

    这只一个雏形,但是可以用了.难点是如何点击每行后面的编辑按钮,让当前行的格子都变成input. import {Component} from 'react' const Action = props ...

  2. 用 React 编写移动应用 React Native

    转载:用 React 编写移动应用 React Native ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App.而且React ...

  3. 尝鲜.net core2.1 ——编写一个global tool

    本文内容参考微软工程师Nate McMaster的博文.NET Core 2.1 Global Tools 用过npm开发都知道,npm包都可以以全局的方式安装,例如安装一个http-server服务 ...

  4. 使用JavaScript和React编写原生移动应用

    使用JavaScript和React编写原生移动应用 React Native使你只使用JavaScript也能编写原生移动应用. 它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的 ...

  5. 编写一个通用的Makefile文件

    1.1在这之前,我们需要了解程序的编译过程 a.预处理:检查语法错误,展开宏,包含头文件等 b.编译:*.c-->*.S c.汇编:*.S-->*.o d.链接:.o +库文件=*.exe ...

  6. CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL

    CSharpGL(34)以从零编写一个KleinBottle渲染器为例学习如何使用CSharpGL +BIT祝威+悄悄在此留下版了个权的信息说: 开始 本文用step by step的方式,讲述如何使 ...

  7. .NET Core RC2发布在即，我们试着用记事本编写一个ASP.NET Core RC2 MVC程序

    在.NET Core 1.0.0 RC2即将正式发布之际,我也应应景,针对RC2 Preview版本编写一个史上最简单的MVC应用.由于VS 2015目前尚不支持,VS Code的智能感知尚欠火候,所 ...

  8. 网络爬虫：使用Scrapy框架编写一个抓取书籍信息的爬虫服务

      上周学习了BeautifulSoup的基础知识并用它完成了一个网络爬虫( 使用Beautiful Soup编写一个爬虫 系列随笔汇总 ), BeautifulSoup是一个非常流行的Python网 ...

  9. 作业二：个人编程项目——编写一个能自动生成小学四则运算题目的程序

    1. 编写一个能自动生成小学四则运算题目的程序.(10分)   基本要求: 除了整数以外,还能支持真分数的四则运算. 对实现的功能进行描述,并且对实现结果要求截图.   本题发一篇随笔,内容包括: 题 ...

随机推荐

  1. C语言获取系统时间的几种方式

    C语言获取系统时间的几种方式 2009-07-22 11:18:50|  分类: 编程学习 |字号 订阅     C语言中如何获取时间?精度如何? 1 使用time_t time( time_t * ...

  2. 安装ubuntu不能引导win7

    台式机安装了ubuntu导致进不了win7了,2系统在同一硬盘. win7引导需要bootmgr和boot文件夹中的文件,2个东东在winows引导分区根目录下. 我的笔记本安装windows系统分区 ...

  3. 牛客多校第四场 F Beautiful Garden

    链接:https://www.nowcoder.com/acm/contest/142/F来源:牛客网 题目描述 There's a beautiful garden whose size is n ...

  4. Java NIO：浅析I/O模型（转）

    原文链接:http://www.cnblogs.com/dolphin0520/p/3916526.html 以下是本文的目录大纲: 一.什么是同步?什么是异步? 二.什么是阻塞?什么是非阻塞? 三. ...

  5. layer 问题 汇总

    1.搭配iframe  子页面遮罩层 覆盖父页面 window.parent.layer.open({      // type: 1, //skin: 'layui-layer-rim', //加上 ...

  6. SparkStreaming实时日志分析--实时热搜词

    Overview 整个项目的整体架构如下: 关于SparkStreaming的部分: Flume传数据到SparkStreaming:为了简单使用的是push-based的方式.这种方式可能会丢失数据 ...

  7. L313 珊瑚裸鼠灭绝

    This week the Australian government declared the extinction of a tiny rodent called Bramble Cay melo ...

  8. TensorFlow函数：tf.zeros_like

    tf.zeros_like函数 tf.zeros_like( tensor, dtype=None, name=None, optimize=True ) 定义在:tensorflow/python/ ...

  9. MySQL：基础知识

    基础知识 一.软件的生命周期 软件定义 软件开发 软件使用与维护 二.数据(Data) 1.定义 描述客观事物特征或性质的某种符号,经过数字化处理存储在计算机 2.数据独立性 物理独立性:指用户的应用 ...

  10. http 请求头部解析

    作者:知乎用户链接:https://www.zhihu.com/question/42696895/answer/109035792来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...