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. C#调用带结构体指针的C Dll的方法

    在C#中调用C(C++)类的DLL的时候,有时候C的接口函数包含很多参数,而且有的时候这些参数有可能是个结构体,而且有可能是结构体指针,那么在C#到底该如何安全的调用这样的DLL接口函数呢?本文将详细 ...

  2. Java基础学习总结(5)——多态

    一.面向对象最核心的机制--动态绑定,也叫多态 1.1.通过下面的例子理解动态绑定,即多态 package javastudy.summary; class Animal { /** * 声明一个私有 ...

  3. mysql索引的使用及优化方法

    数据库高级管理及优化 MySQL性能优化 优化MySQL数据库是数据库管理员和数据库开发人员的必备技能.优化MySQL,一方面是找出系统的瓶颈,提高MySQL数据库整体的性能:另一方面是合理设计结构和 ...

  4. 国庆 day 7 下午

    思路:见博客. #include<iostream> #include<cstdio> #include<cstring> #include<algorith ...

  5. Java的TreeMap,C++的lower_bound,合并间隔

    https://leetcode.com/problems/data-stream-as-disjoint-intervals/?tab=Description 这道题目是合并间隔的经典题目. htt ...

  6. SCN 时间戳的相互转换

    SQL> select * from v$version where rownum=1; BANNER --------------------------------------------- ...

  7. JavaScript(14)jQuery(JavaScript 库)

    JavaScript 框架(库) JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常非常困难也非常耗时.为了应对这些调整,很多的 JavaScript (helper) 库应运而 ...

  8. C++ Primer笔记13_运算符重载_总结

    总结: 1.不能重载的运算符: . 和 .* 和 ?: 和 ::  和 sizeof 和 typeid 2.重载运算符有两种基本选择: 类的成员函数或者友元函数, 建议规则例如以下: 运算符 建议使用 ...

  9. Web端本地存储

    1.需求背景:当用户在页面上添加一行一行的数据时,突然发现网络断掉了,页面上编辑的数据没法保存进数据库,所以需要一个本地端的临时保存功能,以便在网络通畅后重新加载出来! 2.解决方案: 结合网上搜刮, ...

  10. hdoj--1301--Jungle Roads(克鲁斯卡尔)

    Jungle Roads Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tot ...