Developing React with Poi is as easy as adding the babel-preset-react-appto a .babelrc and installing React. This lesson will walk you through that quick process and get your React app up-and-running.

Install:

npm i react react-dom babel-preset-react-app babel-plugin-react-require

.babelrc:

{
"presets": [
"react-app"
],
"plugins": [
"react-require"
]
}

index.js:

// import React from 'react'; // NO NEED because babel-plugin-react-require

import {render} from 'react-dom';

render(<h1>React</h1>, document.getElementById("app"))

Run:

poi

[Poi] Customize Babel to Build a React App with Poi的更多相关文章

  1. [Poi] Build a Vue App with Poi

    Poi uses the Vue babel presets by default, so there is no additional install required to get up-and- ...

  2. 使用create react app教程

    This project was bootstrapped with Create React App. Below you will find some information on how to ...

  3. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  4. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  5. Create React App

    Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 - create-react-app. create-react-app遵循约定优于配置(Coc)的原 ...

  6. [Parcel] Bundle a React App with Parcel

    Parcel comes in as the new cool kid in the bundlers world. Unlike other bundlers which take lots of ...

  7. [PReact] Reduce the Size of a React App in Two Lines with preact-compat

    Not every app is greenfield, and it would be a shame if existing React apps could not benefit from t ...

  8. 如何扩展 Create React App 的 Webpack 配置

    如何扩展 Create React App 的 Webpack 配置  原文地址https://zhaozhiming.github.io/blog/2018/01/08/create-react-a ...

  9. react系列笔记1 用npx npm命令创建react app

    react系列笔记1 用npx npm命令创建react app create-react-app my-app是开始构建新的 React 单页应用程序的最佳方式.它已经为你设置好了开发环境,以便您可 ...

随机推荐

  1. CSS3———linear-gradient() 线性渐变

    线性渐变linear-gradient() 遇到了这样的css样式 body { height: 100%; background-color: #ffffff; background-image: ...

  2. RocketMQ学习笔记(2)----Broker的集群四种方式

    RocketMQ推荐了几种Broker集群方式,这里的Slave不可写,但可读,类似于Mysql主备方式 1. 单个Master 这是一种风险比较大的集群方式,因为一旦Borker重启或宕机期间,将会 ...

  3. 存储Hyper-V虚拟机的硬盘空间不足时的处理

    存储Hyper-V虚拟机的硬盘空间严重不足时的处理   ==先导出虚拟机到空间足够的硬盘,再在空间足够的分区上导入虚拟机 方法如下: 导出虚拟机: 导出之前,我们先删除不需要的快照. 在Hyper-V ...

  4. 结构化数据、半结构化数据、非结构化数据——Hadoop处理非结构化数据

    刚开始接触Hadoop ,指南中说Hadoop处理非结构化数据,学习数据库的时候,老师总提结构化数据,就是一张二维表,那非结构化数据是什么呢?难道是文本那样的文件?经过上网搜索,感觉这个帖子不错 网址 ...

  5. git远程仓库变更

    查看自己的远程仓库 git remote -v 远程仓库变更 git remote remove origin //移出现有的远程仓库的地址 git remote add origin http:// ...

  6. 在yii2.0中封装一个生成验证码的控制器

    frontend目录下/封装的验证码类: <?php namespace frontend\controllers; use yii\base\Controller; class CapathC ...

  7. django-数据库的查询集

    1.curd(增删改查) 对于数据库,作为一名开发人员并不会感到陌生,那么数据库中的查询集是怎么一回事呢? 2.数据库的查询集 查询集这个概念存在django框架中,存在于ORM(object rel ...

  8. linux SVN服务器创建版本库

    1.安装svn服务 # yuminstall subversion 2.新建一个目录用于存储SVN所有文件    # mkdir /home/svn 3.在上面创建的文件夹中为项目 project_1 ...

  9. python基础8(装饰器)

    1.装饰器本质 装饰器的本质:一个闭包函数 装饰器的功能:在不修改原函数及其调用方式的情况下对原函数功能进行扩展 2.装饰器函数 假设要写一个输出函数执行时间的装饰器 def timer(func): ...

  10. HTTP——学习笔记(6)https

    HTTP+加密+认证+完整性保护=HTTPS HTTP是一种新协议吗?: 不是,HTTPS只是HTTP通信接口部分用SSL和TLS协议代替而已 HTTP中,身处应用层的HTTP直接和TCP通信.而在使 ...