[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 ...
随机推荐
- poj3186 poj3267
两道很不错的dp 3186很神似回文词,合并石子之类的问题: 一开始不知道怎么在dp方程中体现权值天数,很来才想起来 对于一段区间[i,j],里面的东西必然是要卖完的 又因为只能从两头开始卖,所以 d ...
- IDE模式下安装Windows 7强行改回ACHI后不断重启的解决方法
问题描述:用U盘启动进PE装的Win7,由于PE认不出硬盘,只好进BIOS设置硬盘模式为IDE才安装上.结果安装完系统后,在BIOS中强行修改硬盘模式为ACHI模式后,Win7开机不断重启,进不了系统 ...
- Spring中使用quartz插件实现定时任务
第一步:导入架包 *spring3.2.3版本的架包将spring的各个功能模块给分开了,我们必须将Spring必须依赖的包导入上去 第二步:编写配置文件 <?xml version=" ...
- 【转】photoshop CS2安装激活破解教程
原文网址:http://www.16xx8.com/photoshop/jiaocheng/109348_all.html photoshop CS2安装教程:(本页介绍如何安装CS2软件,如果你安装 ...
- jquery图片轮播-插件
更新内容: 1. 页面结构和css样式必定类似下边放置 2. 点击左右按钮,实现左右滑动. 3. 这一般用于多个图片轮播使用,简化并优化代码. 若因不同需求,均可自行将插件scrollimgplus. ...
- Loader for loading embedded assemblies z
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Ref ...
- POJ 3630- Phone List（Trie）
题意:给一组串,是否存在一个串是另一个的前缀. 分析:val[N]保存树节点上是否组成一个串 #include <map> #include <set> #include &l ...
- Python 连接mysql
下面我们使用MySQLdb 实现连接mysql 数据库并进行操作. #!/usr/bin/env python # -*-coding:UTF-8-*- import MySQLdb def conn ...
- 类内const static(static const)成员变量初始化问题
在查找const相关资料的过程中,又遇到了另外一个问题,就是C++类中const static(或者static const)成员变量应当如何初始化的问题. 查阅了许多资料,发现VC环境下,只允许co ...
- Nginx负载均衡SFTP
1.CentOS安装SFTP,参考 2.Nginx-1.8.1 下载 ,Nginx_TCP插件 下载 3.安装Nginx [root@localhost nginx-1.8.1]# yum -y in ...