[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 2506 Tiling（递推 大数）
题目:http://poj.org/problem?id=2506 题解:f[n]=f[n-2]*2+f[n-1],主要是大数的相加; 以前做过了的 #include<stdio.h> # ...
- 8.2/baltic神（水）题
summary:10 bzoj1334: Description N个政党要组成一个联合内阁,每个党都有自己的席位数. 现在希望你找出一种方案,你选中的党的席位数要大于总数的一半,并且联合内阁的席位数 ...
- UVA 11082 Matrix Decompressing 矩阵解压（最大流，经典）
题意: 知道矩阵的前i行之和,和前j列之和(任意i和j都可以).求这个矩阵.每个格子中的元素必须在1~20之间.矩阵大小上限20*20. 思路: 这么也想不到用网络流解决,这个模型很不错.假设这个矩阵 ...
- (十三)学习CSS之两个class连一起隔空格和逗号
1.时常见到css的这两种种写法: a.两个class隔空格连一起: .class1 .class2{......} b.两个class隔逗号连一起: .class1,.class2{......} ...
- ARM Linux系统的时钟机制
1. Linux下有两类时钟: 1.1 实时钟RTC 它由板上电池驱动的“Real Time Clock”也叫做RTC或者叫CMOS时钟,硬件时钟.当操作系统关机的时候,用这个来记录时间,但是对于运行 ...
- Swift数组的加法运算符用法：array1 += array2
var stringList1 = [String]() //创建String类型空数组 var stringList2 = ["1", "3", " ...
- fedora下的dropbox
- mexopencv问题：Invalid MEX file GLIBCXX_3.4.15 error
参考:http://blog.sina.com.cn/s/blog_74112f030101cmxt.html root@debian-yuliyang:/opt/matlab/sys/os/glnx ...
- 问题与对策：CSS的margin塌陷（collapse）
1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <html> 3: & ...
- leetcode@ [274/275] H-Index & H-Index II (Binary Search & Array)
https://leetcode.com/problems/h-index/ Given an array of citations (each citation is a non-negative ...