React基础篇之项目搭建

技术

发布日期: 2023-08-29

创建项目

使用 create-react-app 创建项目
my-app为项目名

npx create-react-app my-app

运行

yarn start

如果想看到项目的全部依赖和配置，可以使用eject命令，但要注意改命令不可逆，且使用前需提交项目所有代码(可以先用git status看一下有没有未提交代码，有的话git add 之后再git commit一下)

yarn eject

JSX

要点

JSX不是模版引擎语言(例如nunjucks)
声明式方式创建UI，处理UI逻辑
遵循javascript语法，无学习门槛

JSX规则

在JSX中嵌入表达式，用{}包裹
大写开头作为定义组件
JSX标签可以有特定属性和子元素
JSX只能有一个根元素

className

JSX中定义类名要用className,而不是用class

render() {
  return (
    <div className="row mb-3">
      <div className="col-6 themed-grid-col">{product.name}</div>
      <div className="col-1 themed-grid-col">¥{product.price}</div>
      <div className="col-2 themed-grid-col">{this.manageCount()}</div>
    </div>
  )
}

JSX只能有一个根元素

JSX只能有一个根元素，这点与vue2的template一样
==以下写法是错误的，因为最外层有两个div==

function App() {
  return (
    <div className="container">
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
    </div>
    <div className="container">
      <ListItem />
      <ListItem />
      <ListItem />
      <ListItem />
    </div>
  );
}

==正确写法如下,在最外层再套一个div==

function App () {
  return (
    <div>
      <div className='container'>
        <ListItem />
        <ListItem />
        <ListItem />
        <ListItem />
      </div>
      <div className='container'>
        <ListItem />
        <ListItem />
        <ListItem />
        <ListItem />
      </div>
    </div>
  )
}

Fragments

使用上面的方法将两个div套入一个div中虽然能符合JSX只能有一个根元素的规则，但生成的结构中最外层的div依旧存在，如果最外层的div不需要做操作的话可以使用Fragments标签包裹子元素,这样里面的元素就会直接挂在根元素下

function App () {
  return (
    <React.Fragment>
      <div className='container'>
        <ListItem />
        <ListItem />
        <ListItem />
        <ListItem />
      </div>
      <div className='container'>
        <ListItem />
        <ListItem />
        <ListItem />
        <ListItem />
      </div>
    </React.Fragment>
  )
}

当然这个写法略微繁琐了一点，可以使用两个<>来简写，效果是一样的

function App () {
  return (
    <>
      <div className='container'>
        <ListItem />
        <ListItem />
        <ListItem />
        <ListItem />
      </div>
      <div className='container'>
        <ListItem />
        <ListItem />
        <ListItem />
        <ListItem />
      </div>
    </>
  )
}