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

1

React

Import styled from 'styled-components'; Import sfc from 'jsx-sfc.macro'; Import logo from './logo.svg'; Const App = sfc({ Component({ styles: { Wrapper }, ...props }) { return ( <Wrapper> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.jscode> and save to reload. p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer"> 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;.

#Javascript UI Libraries #JS Library #JavaScript Framework 775 social mentions

2

Create React App

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

#Developer Tools #Javascript UI Libraries #JS Library 116 social mentions