1-2 JSX语法

1、JSX的使用和原理

JSX的使用：

JSX作用：写react页面结构，类似于HTML

JSX的三个规则：

• 必须有一个根节点
• 所有标签必须要闭合
• 标签属性名称是驼峰命名法

JSX的原理：

2、写JSX推荐的VSCode配置

js文件中启用emmet语法支持:

安装两个插件：

安装完Prettier - Code formatter插件需要配置，如图：

3、JSX中{}的应用

// 列表渲染

// 1、数组的map方法

// 2、列表项要添加key的属性，key值要唯一

// 条件渲染

// 1、逻辑与&&  一个内容，渲染 or 不渲染

// 2、三元运算符  两个内容 要么渲染A，要么渲染B

// 样式处理

// 1、className + 样式文件  推荐使用

// 2、行内样式 style  了解

/*

分类菜单数组

*/

const categories = [

  { id: 1, name: "推荐" },

  { id: 2, name: "一人套餐" },

  { id: 3, name: "西贝凉菜" },

  { id: 4, name: "西贝热菜" },

  { id: 5, name: "杂粮主食" },

];

const selectedId = 3;

root.render(

  <div>

    <ul className="list">

      {categories.map((item, index) => {

        return (

          <li

            key={item.id}

            className={

              item.id == selectedId ? "list-item selected" : "list-item"

            }

          >

            {/* {index === 0 && "图标"} */}

            {index === 0 ? "图标" : null}

            {item.name}

          </li>

        );

      })}

    </ul>

  </div>

);