vytautaspro

Simple React Snippets Snippets Snippet Renders imr Import React imrc Import React / Component impt Import PropTypes impc Import React / PureComponent cc Class Component ccc Class Component With Constructor sfc Stateless Function Component cdm componentDidMount cwm componentWillMount cwrp componentWillReceiveProps gds getDerivedStateFromProps scu shouldComponentUpdate cwu componentWillUpdate cdu componentDidUpdate cwu componentWillUpdate cdc componentDidCatch gsbu getSnapshotBeforeUpdate ss setState ssf Functional setState ren render rprop Render Prop hoc Higher Order Component Full Expansions imr - Import React import React from 'react'; imrc - Import React, Component import React, { Component } from 'react'; impt - Import PropTypes import PropTypes from 'prop-types'; impc - Import PureComponent import React, { PureComponent } from 'react'; cc - Class Component class | extends Component { state = { | }, ...

Setinguose VS Code Format On Save Respects editor.formatOnSave setting. failas konfiguracijos: prettierrc printWidth: 80 proseWrap: always singleQuote: true semi: true bracketSpacing: true parser: babylon trailingComma: none overrides: - files:   - '*.ts'   - '*.tsx'   options:     parser: typescript - files: '*.md'   options:     parser: markdown - files: '*.json'   options:     parser: json     printWidth: 80 - files: '*.css'   options:     parser: css

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version. If you haven't installed ESLint either locally or globally do so by running  npm install eslint  in the workspace folder for a local install or  npm install -g eslint  for a global install. On new folders you might also need to create a  .eslintrc  configuration file. You can do this by either using the VS Code command  Create ESLint configuration  or by running the  eslint  command in a terminal. If you have installed ESLint globally (see above) then run  eslint --init  in a terminal. If you have installed ESLint locally then run  .\node_modules\.bin\eslint --init  under Windows and  ./node_modules/.bin/eslint --init  under Linux and Mac. ir   .eslintrc arba .eslint:  { "extends" : "react-app" }

https://mdbootstrap.com 1.  create-react-app yourappnamehere 2.  cd yourappnamehere 3. Add  mdbreact  as a dependency to the package.json (the  #react-upgrade  one) 4.  yarn  /  npm  shall install all the dependencies. Note, that  mdbreact  itself includes Bootstrap ( 4.0.0-beta.2 ) as its dependency. Once all of it is out of the way, 5. time to modify your  App.js  file. To utilize full power of  MBD React  there, you need to import components you would like to use, for example import {Button, NavbarBrand, Navbar, NavbarNav, NavItem} from 'mdbreact'; and secondly, you need proper CSS files. As MDB partially builds upon Bootstrap, it's safest to include both: import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; import '../node_modules/mdbreact/docs/css/mdb.min.css'; As you can see, there is no jQuery involved. The warning popping out during  npm install  /  yarn stems ...

https://github.com/fisshy/react-scroll Install: $ npm install react - scroll Naudojimas: import React from 'react'; import { Link, Element, animateScroll as scroller } from 'react-scroll' class App extends React.Component {   scrollTo() {     scroller.scrollTo('scroll-to-element', {       duration: 800,       delay: 0,       smooth: 'easeInOutQuart'     })   }   render() {     return (       <div>           <nav className="navbar navbar-default navbar-fixed-top">             <div className="container-fluid">               <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">                 <ul className="nav navbar-nav">               ...

 axios.post (`putGUzsakytosProceduros`, { data }).   catch(error => {     this.setState({autoAction: false});   })       . then (res => {     ....       })  }

import React from 'react'; import "./Ticker.css"; export default class Ticker extends React.Component { updateExchangeRatio = () => { console.log(this.state.valcur); return fetch("https://min-api.cryptocompare.com/data/price?fsym="+this.state.valcur[0]+"&tsyms=USD").then(r => r.json()).then(res => {this.setState({value:  res.USD})}); } constructor(props){ super(props); this.state = { value: 0, valcur:this.props.pair.toUpperCase().split("_") } } componentDidMount(){ this.updateExchangeRatio(); this.interval = setInterval(this.updateExchangeRatio, 30000); } componentWillUnmount(){ clearInterval(this.interval); } render(){ const { pair } = this.props; return ( <div className="ticker"> <p>{pair.toUpperCase().replace('_', ' to ')}</p> <p>{this.state.value}</p> </div> ) } }