[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 ...
随机推荐
- xUTils框架的学习（二）
这章讲的是框架的DbUtils模块的学习 三 xUtils框架的DButils模块 最开始接触这个框架就是从数据库模块开始的.当时的需求是需要记录用户的登录数据,保存在本地以便进行离线登录.首先想到的 ...
- js判断checkbox是否已选
代码: <h2>Default</h2> @using (Html.BeginForm()) { <ul> <li>@Html.CheckBox(&qu ...
- Entity Framework中查看生成的SQL语句
Entity Framework 4.0 中是这样的,高版本的跟这个有些差异,不太一样,貌似已经到7了 using (Entities entities = new Entities()) { var ...
- MySQL中间层 Atlas
Atlas是由 Qihoo 360, Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0.8.2版本的基础上,修改了大量bu ...
- Channel 详解
java.nio.channels.FileChannel封装了一个文件通道和一个FileChannel对象,这个FileChannel对象提供了读写文件的连接. 1.接口 2.通道操作 a.所有通道 ...
- POJ 3419 Difference Is Beautiful（RMQ变形）
题意:N个数,M个询问,每个询问为一个区间,求区间最长连续子序列,要求每个数都不同(perfect sequence,简称PS). 题解:很容易求出以每个数为结尾的ps,也就是求区间的最大值.有一个不 ...
- Web缓存基础：术语、HTTP报头和缓存策略
简介 对于您的站点的访问者来说,智能化的内容缓存是提高用户体验最有效的方式之一.缓存,或者对之前的请求的临时存储,是HTTP协议实现中最核心的内容分发策略之一.分发路径中的组件均可以缓存内容来加速后续 ...
- Spark的部署方式
1.Spark的应用程序部署 2.Spark的集群部署
- Excel里的单元格提行
最近老板发了个表,遇到了个小知识点,收藏以后有用!拿来学学 如下,是属于单元格.怎么提行? 直接,空格或space,都无法解决!...... 解决办法:Alt + Enter 成功! 参考: http ...
- C++为QLabel增加单击事件
原文来源: http://www.cnblogs.com/findumars/p/4058379.html 原理: 其实就是改写了一个函数:mouseReleaseEvent,当在QLabel放开鼠标 ...