React_练习Demo01

Demo演示

Demo地址

github.com/nickyyoung2…

Demo涉及知识点

JSX语法

在 JS语法 中嵌入 描述UI界面、框架的 HTML结构。类似于template模版定义，不同的是，此语法仅 React项目 支持，并且使用的这种扩展语法，其 声明定义 仍采用 JS语法

function App() {
  return (
    <div>
      <h2>Hello World</h2>
    </div>
  );
}

export default App;

组件components

• 组件本质是一个个分离方法；组件的使用就是一个个方法模块的导入导出 ConceptItems.js

  import "./ConceptItems.css";
  const ConceptItems = (_item) => {
    return (
      <li className="concept">
        <img src={_item.img} alt={_item.title} />
        <h2>{_item.title}</h2>
        <p>{_item.description}</p>
      </li>
    );
  };
  export default ConceptItems;
  

  App.js

  import ConceptItems from "./components/CardContents/ConceptItems";
  
  const concepts = [
    {
      title: "组件",
      image: componentsImage,
      description:
        "组件允许您将UI拆分为独立的、可重用的部分，并单独考虑每个部分。组件可以通过props接收数据，并且可以使用JSX呈现动态输出.",
    },
     //...
  ];
  
  function App() {
    return (
      <div>
        <FlexBox className="concepts">
          <ConceptItems
            img={concepts[0].image}
            title={concepts[0].title}
            description={concepts[0].description}
          />
          <!-->...<-->
        </FlexBox>
      </div>
    );
  }
  

• 可复用: 不用重复相同逻辑的代码
• 专一性: 每个function只针对一个业务逻辑

属性值props

- 用于组件之间传递数据；如上方的`ConceptItems`组件方法接收的`_item`是由模版语法中定义的各种属性值整合的对象