[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 ...
随机推荐
- 创业实战go语言制作网站(转)
简单介绍一下之前的整个职业生涯,挺典型的,工程师 –> 资深工程师 –> 架构师 –> 项目经理 –> 部门经理,可以说,产品研发过程中的所有角色我都走了一遍,任职的公司也越来 ...
- Java [leetcode 27]Remove Element
题目描述: Given an array and a value, remove all instances of that value in place and return the new len ...
- [转]javascript console 函数详解 js开发调试的利器
javascript console 函数详解 js开发调试的利器 分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
- [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.3.7
For every matrix $A$, the matrix $$\bex \sex{\ba{cc} I&A\\ 0&I \ea} \eex$$ is invertible and ...
- Oracle学习网址
Oracle Error Search: http://www.ora-error.com/ Oracle Database Error Message - Oracle Documentation: ...
- Oracle函数：求两个数的最大公约数
CREATE OR REPLACE FUNCTION GETGYS(NUM1 NUMBER, NUM2 NUMBER) RETURN NUMBER IS RESULTNUM NUMBER; NUM3 ...
- Objective-C Runtime 运行时之三：方法与消息
基础数据类型 SEL SEL又叫选择器,是表示一个方法的selector的指针,其定义如下: typedef struct objc_selector *SEL; objc_selector结构体的详 ...
- VS2010 error C2664: “CWnd::MessageBoxW”: 不能将参数 1 从“const char [3]”转换为“LPCTSTR”
VS2010 (VC2010)建立工程时默认的字符集是Unicode,所以在代码中使用MessageBox时需要输入Unicode,用TEXT()这个宏输入参数,否则会报错: 代码:Message ...
- oracle表数据误删还原
首先,找到数据删除前的一个时间点. select timestamp_to_scn(to_timestamp('2013-10-12 8:30:00', 'YYYY-MM-DD HH24:MI:SS' ...
- hdu 2212
1.简单的思维问题 各个位上阶乘的和 要和这个数相匹配 这样才能得到正确的解.各个位上阶乘的和 是最大是9*9!这样来求解.999999999 9个9 最大的各个位上的阶乘的和为3265920=9 ...