【React学习笔记】jsx & create-react-app脚手架

CDN引用

//开发环境 16是版本号
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
//生产环境
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

React和ReactDom

React只用来生成虚拟Dom，ReactDom用来将虚拟Dom转换成真实Dom元素。

//三个参数：
// type -- 类型（组件名|标签名）
// props -- 属性值 （null||{}）
// children -- 子节点，包括文本节点(多选参数)
const el = React.createElement("div", { id: "test" }, "hello world");
const root = document.querySelector("#root");
//三个参数：
// vDOM -- 虚拟DOM
// container -- 挂载节点（容器，即要挂载到的节点）
// callback -- 回调函数(可选参数)
ReactDOM.render(el, root, function() {
    console.log("成功！");
});

JSX

定义

jsx的简单使用

需要引入babel.js

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

同时设置type为"text/babel"

<script src="youjs.js" type="text/babel"></script>

const header = <h1>hello，world</h1>
ReactDOM.render(
  header,
  document.querySelector("#root"),
  ()=>{
    console.log("构建完成")
  }
);

JSX中的插值表达式

const name = "xiaoming"
const element = <h1>hello,{name}</h1>

{name}即为插值表达式，jsx用花括号来解析js表达式，括号里只能是表达式，不能是语句！！！

表达式直白来说是会有返回值的代码，如变量、运算符、函数调用，而语句如if、while等不会产生返回值。

表达式的返回值必须是ReactElement

• React构建的虚拟DOM(狭义上的ReactElement)

• string|number

• boolean|null|undefined|Symbol

• 数组->最常用的列表方法map

• 注释->{/* something */}

• 函数

不同数据类型在插值的表现

• 基础类型

1. string、number返回原始值
2. undefined、null、boolean、Symbol输出是会被忽略

• 复杂类型

1. Array，去掉逗号后直接输出,如{[1,2,3,4]}输出的是 1234
2. Object,如果是ReactElement返回，如果是普通对象（包括函数）不能作为内容输出

注意事项

1. jsx中class需要写为className,style值接收一个对象
2. jsx大小写敏感,标签名小写，组件名首字母大写
3. jsx的所有标签都需要闭合
4. jsx必须有一个顶层，且只有一个顶层父级
5. jsx列表输出时必须添加key值

其他

1. React17之后，如果模块中只用到了JSX,没有使用React其他方法则组件不再需要引入React
2. <Fragment></Fragment>在React17之后可简写为<></>

create-react-app

使用

//下载
npm i -g create-react-app
//创建项目
npx create-react-app myapp

组件

具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码的复用，且不用担心冲突问题。

类式组件

• 组件类必须继承 React.Component
• 组件类必须有 render 方法

函数式组件

• 函数的名称就是组件的名称
• 函数的返回值就是组件要渲染的内容

props和state

state 的主要作用是用于组件保存、控制、修改自己的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state

props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改

state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state

事件

默认情况下，事件处理函数的this值时undefined！！！

解决方案：箭头函数 或 bind

插件

vscode-styled-jsx: jsx语法高亮

ES7 React/Redux/GraphQL/React-Native snippets：提供各种简写