[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 ...
随机推荐
- POJ1182
这题需要注意就是 并查集中 相对位置 注意与绝对距离区别 #include<cstdio> #define maxn 50005 int ans,i,a,b,p,fa,fb,n,k; in ...
- mysql 读取硬盘数据
innodb 的最小管理单位是页 innodb的最小申请单位是区,一个区 1M,内含64个页,每个页16K ,即 64*16K=1M, 考虑到硬盘局部性,每次读取4个区,即读4M的数据加载至内存 线性 ...
- vfp 操作excel
VFP全面控制EXCEL 收藏 VFP和Excel都可以用来进行处理数据库表格,如果巧妙地将二者的优点结合起来,将会大大方便我们的工作.比如我们可以利用VFP进行处理数据,而利用Excel的预览打印功 ...
- UVa 400 (水题) Unix ls
题意: 有n个文件名,排序后按列优先左对齐输出.设最长的文件名的长度为M,则最后一列长度为M,其他列长度为M+2. 分析: 这道题很简单,但要把代码写的精炼,还是要好好考虑一下的.lrj的代码中有两个 ...
- I.MX6 driver goto 使用
/************************************************************************** * I.MX6 driver goto 使用 * ...
- shell编程——if语句 if -z -n -f -eq -ne -lt
if 条件then Commandelse Commandfi 别忘了这个结尾 If语句忘了结尾fitest.sh: line 14: sy ...
- JQuery focus()
跳转到登陆页面时可以使用focus方法 <input name="login_account"id="login_account"class=" ...
- jQuery修改操作css属性实现方法
在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了,下面我来给各位同学详细介绍介绍. css()方法在使用上具有多样性,我们先来了解css()方法基本知识. css() ...
- Android uiautomator实例使用
转载自:http://blog.csdn.net/huiguixian/article/details/22398193 Android测试工具中,Monkey Runner只要简单几个指令即可,但他 ...
- EDM
今天,夏令营需要发推广EDM. 之前的edm都是文字版, 今天摸索了一下,简单写了些码, 效果还不错. 演示:http://baike.baidu.com/cms/s/bkcampus/summerc ...