我要分享的是用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的更多相关文章

  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. 去掉HTML标记 .

    ///   <summary>     ///   去除HTML标记     ///   </summary>     ///   <param   name=" ...

  2. 团队作业8——敏捷冲刺博客合集（Beta阶段）

    第一篇(冲刺前安排):https://www.cnblogs.com/Aragaki-Yui/p/9057951.html 第二篇(冲刺第一天):https://www.cnblogs.com/Ara ...

  3. ubantu查看进程操作

    可以使用ps命令.它能显示当前运行中进程的相关信息,包括进程的PID.Linux和UNIX都支持ps命令,显示所有运行中进程的相关信息. ps命令能提供一份当前进程的快照.如果想状态可以自动刷新,可以 ...

  4. python map 常见用法

    python map 常见用法2017年02月01日 19:32:41 淇怪君 阅读数:548版权声明:欢迎转载,转载请注明出处 https://blog.csdn.net/Tifficial/art ...

  5. 爬虫系列3：scrapy技术进阶（xpath、rules、shell等）

    本文主要介绍与scrapy应用紧密相关的关键技术,不求很深入,但求能够提取要点.内容包括: 1.xpath选择器:选择页面中想要的内容 2.rules规则:定义爬虫要爬取的域 3.scrapy she ...

  6. sqlite的数据类型

    参考sqlite官方文档:https://www.sqlite.org/datatype3.html 绝大多数的SQL数据库采用静态的.严格的数据类型,数据库中的值由数据表的列类型定义决定. 然而,s ...

  7. Ｍicrosoft Project 常用快捷键

    任务升级 : ALT  +  SHIFT + 向左键 任务降级: ALT  +  SHIFT + 向右键 滚动到表头(第一个任务):Ctrl + HOME 滚动到表尾(最后一个任务):Ctrl + E ...

  8. git之自学

  9. HttpClient官方sample代码的深入分析(连接池)

    前言   之前一直使用apache的httpclient(4.5.x), 进行http的交互处理. 而httpclient实例则使用了http连接池, 而一旦涉及到连接池, 那会不会在使用上有些隐藏很 ...

  10. 九度OJ1036-空缺数字计算-暴力破解

    题目1036:Old Bill 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3748 解决:2053 题目描述: Among grandfather's papers a bill wa ...