React开发实践(1)起步

153 阅读1分钟

1、起步

  • 包含 这些内容

image.png

image.png

2、React 介绍

image.png

image.png

3、文件结构

  • 使用 npx create-react-app my-app-todoList

生成 react 项目

  • 文件结构 需要注意几件事情

      1、旋转的图片是 logo.svg 做的, svg 常规是数字集合
      2、网页标题左边的小图片 来自于 favicon.ico
      3、PWA
      4、manifest.json 用于生成桌面快捷方式小图标的设置 
    

image.png

  • 删除不需要的东西 保留 最简洁部分

image.png

4、React 组件

image.png

  • 此处有一点 ES6 结构赋值的操作,将对象中的东西取出来 image.png

  • ReactDOM.render作用 image.png

image.png

  • 关于页面是否引入 react的问题 ? 为啥需要 import react ?

image.png

  • 还有一个 render 中 写的 部分也是 jsx 语法

5、JSX 基础复习

1、js 当中写 html标签和 css 
2、组件大写字母开头
3、{xxxx} 这个里面可写逻辑 
4、{xxx ? xx : x} 这种三木运算符比较常用

* 补充

  • JSX 写注释的两种方式

image.png

  • jsx 中 写 css 使用 className 代替 class

  • 如果想 写的 <h1>xxx</h1> 不显示 h1 直接显示 xxx 怎么操作 ?

image.png

image.png

  • jsx 中的 label部分

当点击 label 时, 光标聚焦到 input 框上 怎么操作 ?

  • 注意在 react中 label 上的 for 更改成了 htmlFor

image.png

实现效果

image.png

  • 本节完

撒花 🎉🎉🎉

更多项目请访问 github github.com/huanhunmao

gitee 项目地址 gitee.com/huanhunmao/…