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. Dbf文件操作

    package cn.com.szhtkj.util; import java.io.File; import java.io.IOException; import java.lang.reflec ...

  2. 洛谷 P1983 车站分级 拓扑排序

    Code: #include<cstdio> #include<queue> #include<algorithm> #include<cstring> ...

  3. [USACO10NOV]奶牛的图片Cow Photographs 树状数组 递推

    Code: #include<cstdio> #include<algorithm> #include<string> #include<cstring> ...

  4. 全国所有省市县地理坐标Json格式

    https://www.cnblogs.com/yzbubble/p/7707129.html

  5. Url 简单讲解

    eg: http://sb.test.com/login?name=liming&password=twotigers 协议 http https ftp 域名 sb.test.com 则是域 ...

  6. ES6学习笔记(二十)Module 的加载实现

    上一章介绍了模块的语法,本章介绍如何在浏览器和 Node 之中加载 ES6 模块,以及实际开发中经常遇到的一些问题(比如循环加载). 1.浏览器加载 传统方法 HTML 网页中,浏览器通过<sc ...

  7. malloc 和free例程

    #include <stdio.h>#include <stdlib.h>int main(){int a;scanf("%d",&a);int * ...

  8. mac pro配置php开发环境

    mac pro自带php和apache,所以我们只要配置下就好了 // 启动Apache服务 sudo apachectl start // 重启Apache服务 sudo apachectl res ...

  9. STM32为什么必须先配置时钟

    首先,任何外设都需要时钟,51单片机,stm32,430等等,因为寄存器是由D触发器组成的,往触发器里面写东西,前提条件是有时钟输入. 51单片机不需要配置时钟,是因为一个时钟开了之后所有的功能都可以 ...

  10. maven的setting设置

    maven的setting设置,settings.xml文件,多写了几个仓库的地址: <?xml version="1.0" encoding="UTF-8&quo ...