我要分享的是用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. Java语法基础学习DayThree

    一.流程控制语句补充 1.switch语句 格式: switch(表达式) { case 值1: 语句体1; break; case 值2: 语句体2; break; ... default: 语句体 ...

  2. Vuejs2.0学习（Render函数,createElement，vm.$slots）

    直接来到进阶部分, Render函数 直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲 ...

  3. centos服务器删除/usr目录怎么办

    凉拌 两种方法: 第一:重装系统,因为你的大部分命令使用不了了,如果你的服务器还有应用程序在跑,那你的服务也会有问题,因为一些服务的lib包也会放在此目录下,貌似需要重新装才可以 第二:利用ios镜像 ...

  4. python自定义异常抛出接受多个数值

    在使用Python的时候,有时候想自己自定义异常错误,同时抛出多个参数,比如对数据库查找一条数据,如果没有找到,返回 {"errCode":"-1", &quo ...

  5. linux列出目录下所有目录

    我的一个目录下有很多文件,但是我想列出该目录下所有的目录,并且删除 列出目录下所有的目录,常用的方法是ll配合管道命令,比如 ll | grep "^d" 通过对ll命令的输出,抓 ...

  6. 百练6376-二维数组右上左下遍历-2015正式C题

    C:二维数组右上左下遍历 总时间限制:  1000ms 内存限制:  65536kB 描述 给定一个row行col列的整数数组array,要求从array[0][0]元素开始,按从左上到右下的对角线顺 ...

  7. C#字符串string以及相关内置函数

    C#字符串string函数 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享. ...

  8. Unity 3D中ToLua-UGUI使用说明、导入Unity流程、制作登陆界面

    ToLua制作登录界面 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 请支持大神开发者:骏擎CP,蒙哥等奔 ...

  9. BZOJ4426 :最大生产率（贪心+决策单调性DP）

    题意:给出N个人,现在让你分P组,每组的工作效率是最小结束时间-最大开始时间,要求每一组的效率的正数,求最大效率和.N<1000 思路: 把包含至少一个其他的分到A组:否则到B组. A组的要么单 ...

  10. day01计算机组成与操作系统

    1.什么是编程语言编程语言是程序员与计算机之间的沟通介质 2.什么是编程编程的过程就是程序员通过某种语言将命令给到计算机并让计算机表达出来 修改后:编程就是程序员按照某种语法规则将自己想让计算机做的事 ...