I made a vscode plugin that can write each part of React component in multiple split editors on the same screen

• React

  1,700 222,406 9.9 JavaScript

  The library for web and native user interfaces.

  

import styled from 'styled-components'; import sfc from 'jsx-sfc.macro'; import logo from './logo.svg'; const App = sfc({ Component({ styles: { Wrapper }, ...props }) { return (

Edit src/App.jscode> and save to reload. p> Learn React a> header> Wrapper> ); }, styles: () => { return { Wrapper: styled.div` text-align: center; .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; } } .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; } .App-link { color: #61dafb; } @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ` }; } }); export default App;

• volar

  32 4,244 9.9 TypeScript

  Discontinued ⚡ Explore high-performance tooling for Vue [Moved to: https://github.com/vuejs/language-tools]

  

What is Split Editors? This is a feature of a new vscode plugin for Vue called Volar, you can install Volar and experience it in Vue projects. Here is a Volar demo:

• SurveyJS

  surveyjs.io featured

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• jsx-sfc

  6 55 4.0 TypeScript

  A SFC like React function component API for managing CSS-in-JS and static members.

View on GitHub

• twin.macro

  57 7,809 5.9 TypeScript

  🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.

Live Demo is here (CSS in JS use twin.macro, can experience Typings/Hot reloading/Dev tools by Codesandbox).

• create-react-app

  576 101,923 1.5 JavaScript

  Set up a modern web app by running one command.

  

Step 1: Create a sample project using create-react-app:

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project