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

Install:

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

Create files:

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

Webpack.config.js:

  1. module.exports = {
  2.     entry: './main.js',
  3.     output: {
  4.         path: './',
  5.         filename: "index.js"
  6.     },
  7.     devServer: {
  8.         inline: true,
  9.         port:
  10.     },
  11.     module: {
  12.         loaders: [
  13.             {
  14.                 test: /\.jsx?$/,
  15.                 exclude: /(node_modules|bower_components)/,
  16.                 loader: 'babel',
  17.                 query: {
  18.                     presets: ['es2015', 'react']
  19.                 }
  20.             }
  21.         ]
  22.     }
  23. };

index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Setup</title>
  6. </head>
  7. <body>
  8. <div id="app"></div>
  9. <script src="index.js"></script>
  10. </body>
  11. </html>

App.js:

  1. import React from 'react';
  2.  
  3. export default class App extends React.Component {
  4.     render() {
  5.         return (
  6.             <span>Hello React</span>
  7.         )
  8.     }
  9. }

main.js:

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3.  
  4. import App from './App';
  5.  
  6. ReactDOM.render(<App />, document.getElementById('app'));

Run:

  1. 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. bzoj列表2

    之前发过一次了,这里的题较水,没什么好讲的 bzoj1088 直接穷举前两位即可,话说程序员的扫雷是白玩的? bzoj1083 裸的最小生成树(最小生成树=最小瓶颈树),SCOI大丈夫(话说网上二分是 ...

  2. input之placeholder与行高的问题。

    我们实现一个输入框的视觉的时候为了保持其各种各样的兼容性: 1.鼠标要跟文字一样高度. 2.文字要居中对齐. 3.还要有placeholder 第一个目标,当实现一个高度为40像素的高度输入框时,为了 ...

  3. JQuery安全分析

    JQuery安全分析: JQuery的风险均来源于对输入的数据没有进行有效性检验.客户端的Javascript需要检验:来源于服务器的数据.来源于当前页面的用户输入,服务器端需要检验来源于用户端的数据 ...

  4. textview的上下滑动效果

    1.xml文件中 <TextView    …    android:scrollbars="vertical"  ../> 2.java文件中 textview.se ...

  5. JDK版本1.6和6.0到底指什么

    Both version numbers (1.6.0 and 6) are used to identify this release of the Java Platform. Version 6 ...

  6. Java [leetcode 21]Merge Two Sorted Lists

    题目描述: Merge two sorted linked lists and return it as a new list. The new list should be made by spli ...

  7. spring的三种注入方式

    接口注入(不推荐) 构造器注入(死的应用) getter,setter方式注入(比较常用) Type1 接口注入 我们常常借助接口来将调用者与实现者分离.如: public class ClassA  ...

  8. linux 学习之 rpm

    目前最常见的两种软件安装方式: 1.dpkg 2.rpm 1.dpkg 最早是由Debian Linux社群开发出来的,通过dpkg,Debian提供的软件就可以简单的安装,同时还能提供安装后的软件信 ...

  9. 【译】 AWK教程指南 8处理多行数据

    awk 每次从数据文件中只读取一行数据进行处理.awk是依照其内置变量 RS(Record Separator) 的定义将文件中的数据分隔成一行一行的Record.RS 的默认值是 "\n& ...

  10. 如何制作网页小动画？——gif or png

    一.场景与动画 为了拉动网站氛围,或者吸引用户浏览焦点,需要使用一些小动画.这种动画不是(gif)单纯的重复,而是需要需要一些控制和交互,比如在动画完成后打开一个对话框.动画有几个基本要素(时间控制, ...