In this lesson we'll setup a simple build process for converting our ES6 React components into ES5 using Babel and Webpack

Install:

npm i --save react react-dom
npm i -D babel-loader babel-core babel-preset-es2015 babel-preset-react
npm i -g babel webpack webpack-dev-server

Create files:

touch App.js main.js webpack.config.js

Webpack.config.js:

module.exports = {

    entry: './main.js',

    output: {

        path: './',

        filename: "index.js"

    },

    devServer: {

        inline: true,

        port:

    },

    module: {

        loaders: [

            {

                test: /\.jsx?$/,

                exclude: /(node_modules|bower_components)/,

                loader: 'babel',

                query: {

                    presets: ['es2015', 'react']

                }

            }

        ]

    }

};

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Setup</title>

</head>

<body>

<div id="app"></div>

<script src="index.js"></script>

</body>

</html>

App.js:

import React from 'react';

export default class App extends React.Component {

    render() {

        return (

            <span>Hello React</span>

        )

    }

}

main.js:

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('app'));

Run:

webpack-dev-server

[React Fundamentals] Development Environment Setup的更多相关文章

  1. [Flux] 1. Development Environment Setup

    Install packages: { "name": "reactflux", "version": "1.0.0", ...

  2. Azure Sphere Development Environment Setup

    1. Visual Studio 目前,Visual Studio 2017/2019支持Azure Sphere开发,后续,微软会加入Visual Studio Code的支持.以Visual St ...

  3. Setup iOS Development Environment.

    Setup iOS Development Environment Install XCode and check-out source code from SVN XCode Please find ...

  4. The Google Test and Development Environment （持续更新）

    最近Google Testing Blog上开始连载The Google Test and Development Environment(Google的测试和开发环境),因为blogspot被墙,我 ...

  5. Programming in Go (Golang) – Setting up a Mac OS X Development Environment

    http://www.distilnetworks.com/setup-go-golang-ide-for-mac-os-x/#.V1Byrf50yM8 Programming in Go (Gola ...

  6. How to set up Dynamics CRM 2011 development environment

    Recently I have been starting to learn Microsoft Dynamics CRM 2011 about implement plugin and workfl ...

  7. Struts 2 - Environment Setup

    Our first task is to get a minimal Struts 2 application running. This chapter will guide you on how ...

  8. Create A .NET Core Development Environment Using Visual Studio Code

    https://www.c-sharpcorner.com/article/create-a-net-core-development-environment-using-visual-studio- ...

  9. Install Qualcomm Development Environment

    安裝 Android Development Environment http://www.cnblogs.com/youchihwang/p/6645880.html 除了上述還得安裝, sudo ...

随机推荐

  1. entity framework 查询

    1.简单查询: SQL: SELECT * FROM [Clients] WHERE Type=1 AND Deleted=0 ORDER BY ID EF: //Func形式 var clients ...

  2. 使用BusyBox制作嵌入式Linux根文件系统

    STEP 1:构建目录结构  创建根文件系统目录,主要包括以下目录/dev  /etc /lib  /usr  /var /proc /tmp /home /root /mnt /bin  /sbin ...

  3. data guard折腾记一

    终于有空闲的机器腾出来了,生产环境上的一套Oracle环境终于可以鸟枪换炮了,生产环境有Data Guard,为了减少停机时间,而且避免重新构建Data Guard的麻烦(其实也不麻烦,就是浪费时间) ...

  4. 精简版、GHOST版win7，arduino驱动安装失败的解决方法分享

    arduino组件安装驱动不成功,总是提示系统找不到指定文件. 原因是因为精简版缺少了两个关键的系统文件,导致无法安装.mdmcpq.inf  和 usbser.sys 解决方案详见帖子http:// ...

  5. Javascript 知识点简介

    如何在HTML中引入JS? 所有重定向的HTML标签内都可以嵌入javascript代码. 浮点数不要用 == 来进行判断 var num=0;    for(var i=0;i<10;i++) ...

  6. The type or namespace name '****' could not be found (are you missing a using directive or an assembly reference

    错误的提升内容:

  7. lightoj 1014

    判断到根号n即可,另外使用dfs输出,不需要另开数组再排序. #include<cmath> #include<cstdio> int P, L, len, cnt; void ...

  8. Action 操作

    当鼠标移动到图片文件夹的时候,将有一些button显示 当鼠标移开这个文件夹,那些button隐藏了起来 display属性的变化 1.可以使用Js改变属性来操作 暂未验证,待时间. 2.可以使用Ac ...

  9. SSDT Hook结构

    目录 SSDT Hook效果图 SSDT简介 SSDT结构 SSDT HOOK原理 Hook前准备 如何获得SSDT中函数的地址呢 SSDT Hook流程 SSDT Hook实现进程保护 Ring3与 ...

  10. CCF 认证

    题意:字符串替换 string+map的应用 #include<iostream> #include<stdio.h> #include<stdlib.h> #in ...