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. shell基础编程

    首先要注意的是,Ubuntu里的shell的sh和bash命令是有区别的 如下所示,Ubuntu下的sh指向的dash程序,而bash是dash的增强版,一些bash上能执行的程序在dash上不行 如 ...

  2. js函数参数理解

    eg: function setName(obj){ obj.name = "Nicholas"; obj = new Object(); obj.name = "Gre ...

  3. SpringBoot学习笔记(14)----应用监控-HTTP方式

    SpringBoot提供了三种应用监控的方式 通过HTTP(最简单方便) 通过JMX 通过远程shell 这里就是用最简单的方式来使用SpringBoot的应用监控 首先引入依赖,pom文件如下 &l ...

  4. GET,POST请求

    get请求 post请求

  5. 当relative遇上z-index,阻断事件捕获

    今天在调试前端页面的时候,发现addflowrank这个元素的click事件不能触发了.下图是它的元素结构. 用开发者工具试图定位这个元素,看看它到底怎么了.发现:无论我怎么用光标定位这个元素都定位不 ...

  6. IIFE 萌新学习笔记

    立即执行函数表达式(IIFE) IIFE:Immediately-Invoked Function Expression(立即执行函数表达式) 一 常用写法: //经常使用的写法(function() ...

  7. POJ 3261 Milk Patterns(后缀数组+单调队列)

    题意 找出出现k次的可重叠的最长子串的长度 题解 用后缀数组. 然后求出heigth数组. 跑单调队列就行了.找出每k个数中最小的数的最大值.就是个滑动窗口啊 (不知道为什么有人写二分,其实写啥都差不 ...

  8. k8s使用ceph存储

    目录 ceph配置 k8s 配置 通过静态pv,pvc使用ceph 测试多pod挂载静态pv数据不一致问题 StoragaClass 方式 ceph 常用命令 k8s 常用命令 k8s各类端口及IP说 ...

  9. NIO框架之MINA源代码解析(一):背景

     "你们的agent占了好多系统的port.把我们的非常多业务系统都给整死了,给我们造成了非常大的损失.要求你们的相关领导下周过来道歉"   --   来自我们的一个客户.   ...

  10. Flex 远程视频监控观看端新版

    第一个版本号仅仅做了预览这一块 http://blog.csdn.net/songanling/article/details/38306037,后面老板看了认为色调太暗.看得不舒服,然后就開始又一次 ...