[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 ...
随机推荐
- mysql MVCC
InnoDB多版本(MVCC)实现简要分析 MVCC实现-MySQL Innodb MVCC实现 MVCC浅析 mysql的mvcc(多版本并发控制) mysql innodb mvcc 读一致性(R ...
- poj1823,3667
又来练线段树了…… poj1823题意很简单(明显的数据结构题),区间修改和统计最长连续空区间: 有了poj3468的基础,区间修改不是什么问题了,重点是求最长连续空区间:(弱弱的我纠结了好久) 在每 ...
- centos nginx 多端口配置过程记录
1. 编辑 /usr/local/nginx/vhosts/ 在此目录下增加一文件,如;ci.ainux.com,或复制一个文件 修改其中的端口和目录,更改log_format 名称 重启nginx ...
- Hibernate4.x之映射文件
POJO类和数据库的映射文件*.hbm.xml POJO类和关系数据库之间的映射可以用一个XML文档来定义 通过POJO类的数据库映射文件,Hibernate可以理解持久化类和数据库表之间的对应关系, ...
- Ext入门学习系列（二）弹出窗体
第二章 弹出窗体 上节学习了Ext的环境搭建和最基本的一个操作——弹出对话框,作为一个引子,本节讲述如何弹出一个新窗体,从实例讲解Ext的基本运行原理. 一.Ext的窗体长什么样? 先来看看几个效果, ...
- CXF之二（CXF发布webService）
Apache CXF提供了用于方便地构建和开发WebService的可靠基础架构.它允许创建高性能和可扩展的服务,可以部署在Tomcat和基于spring的轻量级容器中,也可以部署在更高级的服务器上, ...
- Hadoop文件系统常用命令
1.查看指定目录下内容 hadoop dfs –ls [文件目录] eg: hadoop dfs –ls /user/wangkai.pt 2.打开某个已存在文件 hadoop dfs –cat [f ...
- Spark系列(四)整体架构分析
架构流程图 说明 Driver端流程说明(Standalone模式) 使用spark-submit提交Spark应用程序Application. 通过反射的方式创建和构造一个DriverActor进 ...
- 【Hadoop代码笔记】目录
整理09年时候做的Hadoop的代码笔记. 开始. [Hadoop代码笔记]Hadoop作业提交之客户端作业提交 [Hadoop代码笔记]通过JobClient对Jobtracker的调用看详细了解H ...
- Android下NFC的简单使用
现在很多手机已经配备了NFC(Near Field Communication 近场通信)的功能,我就为此专门研究过,可以到本文末尾下载源代码. Android官方资料:http://develope ...