我要分享的是用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. Docker(2)：快速入门及常用命令

    什么是Docker? Docker 是世界领先的软件容器平台.开发人员利用 Docker 可以消除协作编码时“在我的机器上可正常工作”的问题.运维人员利用 Docker 可以在隔离容器中并行运行和管理 ...

  2. VS2012里面使用EF框架的增删改查和分页的方法

    public class BaseRepository<T> where T : class    {        //实例化EF框架        DataModelContainer ...

  3. 【python】pandas display选项

    import pandas as pd 1.pd.set_option('expand_frame_repr', False) True就是可以换行显示.设置成False的时候不允许换行 2.pd.s ...

  4. ios读取plist文件:

    @property (nonatomic,strong) NSArray *imageData;//定义一个数组 //懒加载数据 -(NSArray *)imageDate { if(_imageDa ...

  5. winform datatable 或datagridview中添加列

    DataGridViewCheckBoxColumn dg = new DataGridViewCheckBoxColumn(); dg.HeaderText = "选择"; dg ...

  6. golang flag简单用法

    package main import ( "flag" "strings" "os" "fmt" ) var ARGS ...

  7. FZU 2272 Frog 第八届福建省赛 （鸡兔同笼水题）

    Problem Description Therearex frogs and y chicken in a garden. Kim found there are n heads and m leg ...

  8. 性能测试-9.Controller功能介绍

    Controller功能介绍 设计场景 配置场景 场景监控 一.设计场景 二.配置场景 规划场景(场景名.调度方式.运行方式.Initialize方式.Start Vusers方式.Duration方 ...

  9. CentOS中yum安装ffmpeg

    1.升级系统 sudo yum install epel-release -y sudo yum update -y sudo shutdown -r now 2.安装Nux Dextop Yum 源 ...

  10. Android驱动中的remap_pfn_range()校验漏洞（CVE-2013-2596）

    简单介绍 当然类似函数还有io_remap_pfn_range(). remap_pfn_range() 为用户态提供了一种手段访问内核地址空间.它通过新页表,将一块内核物理内存映射到用户态进程空间. ...