클래스 및 함수 구성 요소에 대한 React 치트 시트

내 반응 튜토리얼 비디오 세트 =>

새로운 React 프로젝트를 시작하기 위한 명령어

프로덕션 수준 앱용 CRAnpx create-react-app projectname

몇 가지 대안:

CRA의 슬림형 버전npx create-react-basic projectname
Parcel을 번들러로 사용하여 반응npx merced-spinup react projectname
Webpack을 번들러로 사용하여 반응npx merced-spinup reactwebp projectname
번들러로 롤업을 사용하여 반응npx merced-spinup reactrollup projectname
라우터 설정으로 반응npx merced-spinup reactrouter projectname
Redux 설정으로 반응npx merced-spinup reactredux projectname
useReducer 설정으로 반응npx merced-spinup reactreducer projectname
Typescript로 반응npx merced-spinup reactts projectname
스크립트 태그로 반응npx merced-spinup reacthtml projectname
Express-React-Views를 사용한 Expressnpx merced-spinup expressreact projectname
Express-React-Views를 사용하는 Express/Mongonpx create-ervmongo-app projectname

** 아래의 모든 코드에 대해 적절한 가져오기가 암시되어 있으므로 필요한 것을 가져오는 것을 잊지 마십시오. **

구성 요소 작성

클래스 구성 요소

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <h1>Hello World</h1>
  }
}

기능 구성 요소

const MyComponent = (props) => <h1>Hello World</h1>

//////////////////////////////////////////

const MyComponent = function(props){
  return <h1>Hello World</h1>
}

////////////////////////////////////////////

function MyComponent(props){
  return <h1> Hello World <h1>
}

소품 사용하기

클래스 구성 요소

;<MyComponent myProp="Hello World" />

/////////////////////////////////////////////

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <h1>{this.props.myProp}</h1>
  }
}

기능 구성 요소

;<MyComponent myProp="Hello World" />

/////////////////////////////////////////////

const MyComponent = props => <h1>{props.myProp}</h1>

상태 사용

클래스 구성 요소

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    }
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button
          onClick={event => this.setState({ count: this.state.count + 1 })}
        >
          Click Me
        </button>
      </div>
    )
  }
}

기능 구성 요소

;<MyComponent myProp="Hello World" />

/////////////////////////////////////////////

const MyComponent = props => {
  const [count, setCount] = React.useState(0)

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={event => setCount(count + 1)}>Click Me</button>
    </div>
  )
}

수명 주기

클래스 구성 요소

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <h1>{this.props.myProp}</h1>
  }

  componentDidMount() {
    console.log("I happen when the component first mounts")
  }

  componentDidUpdate() {
    console.log("I happen when the component updates")
  }

  componentWillUnmount() {
    console.log("I happen before the component is removed")
  }
}

기능 구성 요소

const MyComponent = props => {
  React.useEffect(() => {
    console.log(
      "I happen when the component first mounts or when any value in the dependency array changes"
    )

    return () => console.log("I run when the component is removed")
  }, [dependency1, dependency2])

  return <h1> Hello World </h1>
}

양식 처리

클래스 구성 요소

class MyComponent extends React.Component {
  constructor(props) {
    super(props)

    this.state({
      textfield: ""
    })

    this.handleChange.bind(this)
    this.handleSubmit.bind(this)
  }

  handleChange(event){
    this.setState({[current.target.name]: current.target.value})
  }

  handleSubmit(event){
    console.log("lets take a look at the form data in our state")
    console.log(this.state)
  }

  render() {
    return (<form onSubmit={this.handleSubmit}>
    <input type="text" name="textfield" value={this.state.textfield} onChange={this.handleChange}>
    <input type="submit" value="submit">
    </form>)
  }

}

기능 구성 요소

const MyComponent = props => {

  const [formData, setFormData] = React.useState({
    textfield: ""
  })

  const handleChange = (event) => {
    setState({[current.target.name]: current.target.value})
  }

  const handleSubmit = (event) => {
    console.log("lets take a look at the form data in our state")
    console.log(formData)
  }

  return (<form onSubmit={handleSubmit}>
    <input type="text" name="textfield" value={this.state.textfield} onChange={handleChange}>
    <input type="submit" value="submit">
    </form>)
}

JSX의 규칙

하나의 상위 요소만 해결 방법은 조각을 사용하는 것입니다.

return <><h1>Hello</h1><h2>world</h2></>

요소에 클래스를 추가하려면 클래스가 아닌 className을 사용하십시오

.
<h1 className="heading">Hello World</h1>

이벤트 이름은 camelCase입니다.

<button onClick={eventHandler}>Click Me</button>

열린 태그가 없으므로 일반적으로 닫을 필요가 없는 태그도 닫아야 합니다.

<img/> <input/> <MyComponent/>

구성 요소에 의해 래핑된 모든 항목은 props.children이 액세스하는 소품이 됩니다.

<Component> <h1> I am now accessed via props.children </h1> </Component>

인라인 스타일은 속성이 키인 객체를 값이 있는 카멜케이스로 전달하여 달성됩니다.

<h1 style={{color: "red", display: "flex", backgroundColor: "white"}}>Hello</h1>

React 함수 구성 요소 후크

여기에서 내 후크 기사를 읽으십시오. https://tuts.alexmercedcoder.com/reacthooks/