Create-React-App

3287 ワード
create react app Node export default npx React proptypes テキストリンク

Introduction


  • node.jsインストール

  • node-vを使用してインストールを検証する


  • npx


  • create-react-app
    npx create-react-app my-project

  • npm start

    • Tour of CRA


  • export default

  • 他のファイルでファイルのコンポーネントを使用できます.
    function Button({text}){
  return <button className={styles.btn}>{text}</button>;
}
Button.propTypes = {
  text: PropTypes.string.isRequired,
}
// App.js 에서 Button을 가져올 수 있게 함.
export default Button;

  • PropTypeの使用

  • 設定
    npm i prop-types

  • 使用
    import PropTypes from "prop-types";

function Button({text}){
  return <button>{text}</button>;
}

Button.propTypes = {
  text: PropTypes.string.isRequired,
}

export default Button;

  • 特定の構成部品に対するCSSファイルの作成

  • グローバルCSSスタイル
  • styles.css
    • を生成する
  • index.jsのスタイル.css
    • のインポート

  • Local CSS Style (==CSS module==)

  • Button.module.cssファイルの作成
    .btn {
  color: white;
  background-color: tomato;
}

  • cssを使用するコンポーネント.jsからインポート
    // styles: JavaScript 오브젝트
// create-react-app 이 CSS 코드를 JavaScript 오브젝트로 변환시켜줌.
import styles from './Button.module.css'

function Button({text}){
  return <button className={styles.btn}>{text}</button>;
}

    create-areact-appランダムクラスの作成
    • CSSアニメーションのプロパティ-2について
    JSXの特性