Bu React Hile Sayfası v16+’nın Tümünü İçerir – JSManifest

Bu React Hile Sayfası v16+'nın Tümünü İçerir – JSManifest

Bazen React kullanarak hızlı bir arayüz oluşturmak otuz dakika sürebilir. Ancak bazen, muhtemelen birçok nedenden etkilenerek saatler de sürebilir.

Yöntemlerin, özelliklerin veya sağladıkları işlevlerin adlarını sık sık unutursanız, yalnızca bir google araması için kod düzenleyicinizden ayrılmak zorunda kalmak can sıkıcı olabilir. Ancak birkaç harf yazıp istediğiniz cevapları almak gerçekten bu kadar zor mu? Kesinlikle hayır. Ancak bu bir kereden fazla olursa, kod düzenleyicinizden artık ayrılmak zorunda kalmamak için elinizde bir kopya sayfası edinmenin zamanı gelmiş olabilir. Yanınızda bir kopya kağıdı bulundurmak, uzun vadede kesinlikle size zaman kazandıracak!

İşte kullanabileceğiniz bir hile sayfası:

Beni hile sayfasına getir

Hile sayfasına bakarken şunları yapabileceğinizi aklınızda bulundurun:

  1. Hile sayfasını indirilebilir bir PDF veya PNG olarak oluşturun veya sayfaya yer işareti koyabilir ve daha sonra geri dönebilirsiniz.

  2. Sütunların nasıl sıralandığını beğenmediyseniz, kopya sayfasını kaydetmeden önce onları sürükleyip yeniden sıralayabilirsiniz.

  3. Hile sayfasında oluşturmak için seçim kutusundaki kod sözdizimi temalarından herhangi birini seçebilirsiniz (seçebileceğiniz yaklaşık 25 tema vardır):

kutuyu seç

Devam edeceğim ve birinin ihtiyacı olursa bunu halka açık bir depoya koyacağım. Ayrıca buna dün başladım, bu yüzden henüz mükemmel bir hile sayfası olmayabilir.

Ayrıca amacım tüm bunları tek bir sayfaya sığdırmaktı ama çok fazla bilgi vardı. Herhangi birinin hangi parçaların değiştirileceği/çıkarılacağı konusunda herhangi bir önerisi varsa, bana bildirmekten çekinmeyin.

Ve her şeyi yeniden yapmak zorunda kalmamanız için tarayıcınızı kapattıktan sonra da değişiklikler devam edecek.

Şu ana kadar kopya kağıdında bulunanların tam listesi (hile sayfasını zaman içinde güncellemeye devam edeceğim):

Parça


const App = () => (
  <>
    <MyComponent />
  </>
)


const App = () => (
  <React.Fragment key="abc123">
    <MyComponent />
  </React.Fragment>
)

İade Türleri

const App = () => 'a basic string' 
const App = () => 1234567890 
const App = () => true 
const App = () => null 
const App = () => <div /> 
const App = () => <MyComponent /> 
const App = () => [
  
  'a basic string',
  1234567890,
  true,
  null,
  <div />,
  <MyComponent />,
]

Hata Sınırı (React v16.0)

class MyErrorBoundary extends React.Component {
  state = { hasError: false }
  componentDidCatch(error, info) {...}
  render() {
    if (this.state.hasError) return <SomeErrorUI />
    return this.props.children
  }
}

const App = () => (
  <MyErrorBoundary>
    <Main />
  </MyErrorBoundary>
)

Statik Yöntemler



class MyComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {...}
  state = {...}
}


class MyComponent extends React.Component {
  static getSnapshotBeforeUpdate(prevProps, prevState) {...}
}


import SomeContext from '../SomeContext'
class MyCompmonent extends React.Component {
  static contextType = SomeContext
  componentDidMount() { console.log(this.context) }
}


class MyComponent extends React.Component {
  state getDerivedStateFromError() {...}
  state = { error: null }
  componentDidCatch(error, info) {...}
}

Bileşen Devletler


class MyComponent extends React.Component {
  state = { loaded: false }
  componentDidMount = () => this.setState({ loaded: true })
  render() {
    if (!this.state.loaded) return null
    return <div {...this.props} />
  }
}


const MyComponent = (props) => {
  
  const [loaded, setLoaded] = React.useState(false)
  
  const [state, dispatch] = React.useReducer(reducer, initialState)
  if (!loaded) return null
  React.useEffect(() => void setLoaded(true))
  return <div {...props} />

Oluşturma Bileşenleri


const Card = (props) => <div {...props} />

const App = ({ items = [] }) => {
  const renderCard = (props) => <Card {...props} />
  return items.map(renderCard)
  
}

const App = (props) => <Card {...props} />

class App extends React.Component {
  render() {
    return <Card {...this.props} />
  }
}

const MyComp = ({ component: Component }) => <Component />
const App = () => <MyComp component={Card} />

Varsayılan Sahne


const MyComponent = (props) => <div {...props} />
MyComponent.defaultProps = { fruit: 'apple' }


class MyComponent extends React.Component {
  static defaultProps = { fruit: 'apple' }
  render() {
    return <div {...this.props} />
  }
}

Diğer React İhracatları


const WeatherContext = React.createContext({ day: 3 })
const App = ({ children }) => {
  const [weather, setWeather] = React.useState(null)
  const [error, setError] = React.useState(null)
  React.useEffect(() => {
    api.getWeather(...)
      .then(setWeather)
      .catch(setError)
  }, [])
  const contextValue = { weather, error }
  return (
    <WeatherContext.Provider value={contextValue}>
      {children}
    </WeatherContext.Provider>
  )
}
const SomeChild = () => {
  const { weather } = React.useContext(WeatherContext)
  console.log(weather)
  return null
}


const App = () => {
  const ref = React.createRef()
  React.useEffect(() => { console.log(ref.current) }, [])
  return <div ref={ref} />
}


const Remote = React.forwardRef((props, ref) => (
  <div ref={ref} {...props} />
))
const App = () => {
  const ref = React.createRef()
  return <Remote ref={ref} />
}


const App = () => {...}
const propsAreEqual = (props, nextProps) => {
  return props.id === nextProps.id
} 
export default React.memo(App, propsAreEqual)

içe aktarılıyor


const App = (props) => <div {...props} />
export default App
import App from './App'


export const App = (props) => <div {...props} />
import { App } from './App'

İşaretçi Olayları (React v16.4)

onPointerUp           onPointerDown
onPointerMove         onPointerCancel
onGotPointerCapture   onLostPointerCapture
onPointerEnter        onPointerLeave
onPointerOver         onPointerOut

const App = () => {
  const onPointerDown = (e) => console.log(e.pointerId)
  return <div onPointerDown={onPointerDown} />
}

Tepki Gerilimi/Tembel (React v16.6)



const MyComponent = React.lazy(() => import('./MyComponent))
const App = () => <MyComponent />



import LoadingSpinner from '../LoadingSpinner'
const App = () => (
  <React.Suspense fallback={<LoadingSpinner />}>
    <MyComponent />
  </React.Suspense>
)

React Profiler (React v16.9)

const App = () => (
  <React.StrictMode>
    <div>
      <MyComponent />
      <OtherComponent />
    </div>
  </React.StrictMode>
)

Senkron / Asenkron act Test Yardımcı Programı (React v16.9)

import { act } from 'react-dom/test-utils'
import MyComponent from './MyComponent'
const container = document.createElement('div')


it('renders and adds new item to array', () => {
  act(() => {
    ReactDOM.render(<MyComponent />, container)
  })
  const btn = container.querySelector('button')
  expect(btn.textContent).toBe('one item')
  act(() => {
    button.dispatchEvent(new MouseEvent('click', { bubbles: true }))
  })
  expect(btn.textContent).toBe('two items')
})


it('does stuff', async () => {
  await act(async () => {
    
  })
})

Beni hile sayfasına getir

Çözüm

Ve bu yazının sonu burada bitiyor! Umarım bunu faydalı bulmuşsunuzdur ve gelecekte daha fazlasını arayacaksınız!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.