[React Fundamentals] Development Environment Setup
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的更多相关文章
- [Flux] 1. Development Environment Setup
Install packages: { "name": "reactflux", "version": "1.0.0", ...
- Azure Sphere Development Environment Setup
1. Visual Studio 目前,Visual Studio 2017/2019支持Azure Sphere开发,后续,微软会加入Visual Studio Code的支持.以Visual St ...
- Setup iOS Development Environment.
Setup iOS Development Environment Install XCode and check-out source code from SVN XCode Please find ...
- The Google Test and Development Environment （持续更新）
最近Google Testing Blog上开始连载The Google Test and Development Environment(Google的测试和开发环境),因为blogspot被墙,我 ...
- 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 ...
- 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 ...
- Struts 2 - Environment Setup
Our first task is to get a minimal Struts 2 application running. This chapter will guide you on how ...
- 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- ...
- Install Qualcomm Development Environment
安裝 Android Development Environment http://www.cnblogs.com/youchihwang/p/6645880.html 除了上述還得安裝, sudo ...
随机推荐
- POJ 2318 (叉积) TOYS
题意: 有一个长方形,里面从左到右有n条线段,将矩形分成n+1个格子,编号从左到右为0~n. 端点分别在矩形的上下两条边上,这n条线段互不相交. 现在已知m个点,统计每个格子中点的个数. 分析: 用叉 ...
- hdu4177:Super Mario
主席树+离散化.给一段区间.多次询问[l,r]中有多少个数小于k.啊主席树用指针版写出来优美多了QAQ... #include<cstdio> #include<cstring> ...
- 流行的MySql版本
简介 MySQL是历史上最受欢迎的免费开源程序之一.它是成千上万个网站的数据库骨干,并且可以将它(和Linux)作为过去10年里Internet呈指数级增长的一个有力证明. 那么,如果MySQL真的这 ...
- 【转】读取android根目录下的文件或文件夹
原文网址:http://my.oschina.net/Ccx371161810/blog/287823 读取android根目录下的文件或文件夹 SDK的操作 读取android根目录下的文件或文件夹 ...
- EF Code First 学习笔记:约定配置
要更改EF中的默认配置有两个方法,一个是用Data Annotations(在命名空间System.ComponentModel.DataAnnotations;),直接作用于类的属性上面;还有一个就 ...
- 【转】经典SQL语句大全
原博客地址:http://www.cnblogs.com/yubinfeng/archive/2010/11/02/1867386.html (超级纳闷为啥没有转载的功能) 一.基础 1.说明:创建数 ...
- 查询Table name, Column name, 拼接执行sql文本, 游标, 存储过程, 临时表
018_Proc_UpdateTranslations.sql: SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO if (exists (select ...
- puppet学习：文件夹权限的问题
之前Zabbix自动部署的文件夹结构总觉得别扭,今天下午抽空调整了下.调整完后,依然是例行的测试. 在客户端执行puppet agent -t时,报错如下: Failed to generate ad ...
- North America Qualifier (2015)
https://icpc.baylor.edu/regionals/finder/north-america-qualifier-2015 一个人打.... B 概率问题公式见代码 #include ...
- Android 网络权限配置
Android开发应用程序时,如果应用程序需要访问网络权限,需要在 AndroidManifest.xml 中加入以下代码 <uses-permission android:name=”andr ...