天道酬勤,学无止境

React testing library: Test attribute / prop

I'm writing a React app using TypeScript. I use material-ui for my components and react-testing-library for my unit tests.

I'm writing a wrapper for material-ui's Grid component so that I always have an item.

import Grid from "@material-ui/core/Grid";
import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
import React, { PureComponent } from "react";
import styles from "./styles";

export interface OwnProps {
  className?: string;
}

export interface Props extends WithStyles<typeof styles>, OwnProps {}

export interface DefaultProps {
  className: string;
}

export class GridItem extends PureComponent<Props & DefaultProps> {
  static defaultProps: DefaultProps = {
    className: ""
  };

  render() {
    const { classes, children, className, ...rest } = this.props;
    return (
      <Grid
        data-testid="grid-item"
        item={true}
        {...rest}
        className={classes.grid + " " + className}
      >
        {children}
      </Grid>
    );
  }
}

export default withStyles(styles)(GridItem);

I want to write a unit test that checks if item={true}. I tried to use the helper library jest-dom's toHaveAttribute like this:

import "jest-dom/extend-expect";
import React from "react";
import { cleanup, render } from "react-testing-library";
import GridItem, { OwnProps } from "./GridItem";
afterEach(cleanup);

const createTestProps = (props?: object): OwnProps => ({
  ...props
});

describe("Parallax", () => {
  const props = createTestProps();
  const { getByTestId } = render(<GridItem {...props} />);
  describe("rendering", () => {
    test("it renders the image", () => {
      expect(getByTestId("grid-item")).toHaveAttribute("item", "true");
    });
  });
});

But this test fails with:

● GridItem › rendering › it renders the image

    expect(element).toHaveAttribute("item", "true") // element.getAttribute("item") === "true"

    Expected the element to have attribute:
      item="true"
    Received:
      null

      14 |   describe("rendering", () => {
      15 |     test("it renders the image", () => {
    > 16 |       expect(getByTestId("grid-item")).toHaveAttribute("item", "true");
         |                                        ^
      17 |     });
      18 |   });
      19 | });

      at Object.toHaveAttribute (src/components/Grid/GridItem/GridItem.test.tsx:16:40)

Test Suites: 1 failed, 3 passed, 4 total
Tests:       1 failed, 3 passed, 4 total
Snapshots:   0 total
Time:        1.762s, estimated 2s
Ran all test suites related to changed files.

How can I test if an element has a certain attribute?

评论

jest-dom toHaveAttribute assertion asserts item attribute while the test tries to test item prop.

item prop won't necessarily result in item attribute, and since it's non-standard attribute it most probably won't.

react-testing-library propagates functional testing and asserts resulting DOM, this requires to be aware of how components work. As can be seen here, item props results in adding a class to grid element.

All units but tested one should be mocked in unit tests, e.g.:

...
import GridItem, { OwnProps } from "./GridItem";

jest.mock("@material-ui/core/Grid", () => ({
  default: props => <div data-testid="grid-item" className={props.item && item}/>
}));

Then it could be asserted as:

  expect(getByTestId("grid-item")).toHaveClass("item");

If someone is still having this issue I solved it this way:

it('Check if it is a materialUI Grid item', () => {
    //Rendering the component in a constant.
    const { container } = render(<YourComponent />); 
    //Accessing the grid wrapper. In this case by the attribute you provided.
    const grid = container.querySelector('[data-testid="grid-item"]'); 
    //What we are expecting the grid to have.  
    expect(grid).toHaveClass('MuiGrid-item');
})

Notes:

  1. I noticed that in the code item it's been declared as a string and not as a boolean: item='true', which will trigger a warning when you run the test. item={true} is the correct way of declaring it. Actually in material UI when you write item inside a grid its of course by default true, in my opinion is not necessary.
  2. item is a class inside material UI Grid as the previous answer correctly suggested. So by that the correct class name should be refered in this case is 'MuiGrid-item'.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • React简介--尚硅谷react全家桶笔记总结
    学习使我快乐 🤣 React简介 官网 英文官网: https://reactjs.org/ 中文官网: https://react.docschina.org/ 介绍描述 用于动态构建用户界面的 JavaScript 库(只关注于视图) 由Facebook开源 React的特点 声明式编码 组件化编码 React Native 编写原生应用 高效(优秀的Diffing算法) React高效的原因 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。 DOM Diffing算法, 最小化页面重绘。 React的基本使用 效果 相关js库 react.js:React核心库。 react-dom.js:提供操作DOM的react扩展库。 babel.min.js:解析JSX语法代码转为JS代码的库。 创建虚拟DOM的两种方式 纯JS方式(一般不用) JSX方式 虚拟DOM与真实DOM React提供了一些API来创建一种 “特别” 的一般js对象 const VDOM = React.createElement('xx',{id:'xx'},'xx') 上面创建的就是一个简单的虚拟DOM对象 虚拟DOM对象最终都会被React转换为真实的DOM 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。 React JSX 效果
  • React:React入门及基本使用,JSX,state、props、refs、虚拟DOM,面向组件编程,组件生命周期,脚手架及应用,Ajax、router、UI组件库AntDesign、redux
    React全家桶(技术栈) 第1章:React入门 1.1. React的基本认识 1.1.1. 官网 1) 英文官网: https://reactjs.org/ 2) 中文官网: https://doc.react-china.org/ 1.1.2. 介绍描述 1) 用于构建用户界面的 JavaScript 库(只关注于View) 2) 由Facebook开源 1.1.3. React的特点 1) Declarative(声明式编码) 2) Component-Based(组件化编码) 3) Learn Once, Write Anywhere(支持客户端与服务器渲染) 4) 高效 5) 单向数据流 1.1.4. React高效的原因 1) 虚拟(virtual)DOM, 不总是直接操作DOM 2) DOM Diff算法, 最小化页面重绘 1.2. React的基本使用 注意: 此时只是测试语法使用, 并不是真实项目开发使用 1.2.1. 效果 1.2.2. 相关js库 1) react.js: React的核心库 2) react-dom.js: 提供操作DOM的react扩展库 3) babel.min.js: 解析JSX语法代码转为纯JS语法代码的库 1.2.3. 在页面中导入js <script type="text/javascript" src="../js
  • React 学习笔记(一):JSX;工厂函数组件、ES6类组件;三大属性(state、props、refs)
    学习视频源自:https://www.bilibili.com/video/BV1Et41137Sb?p=4 UP 主:Java基基 机构:尚硅谷 文章目录 一、相关浅析1.1 React1.2 babel 二、简单上手2.1 引入文件2.2 简单测试2.3 JS 语法和 JSX 语法比较2.4 在Google添加扩展程序:react developer tool2.5 运行性能 三、JSX 练习3.1 效果图3.2 代码3.3 感受 四、React 面向组件编程4.1 React 组件的基本定义和使用方式一、工厂函数组件(简单组件)方式二、ES6 类组件(复杂组件) 4.2 组件三大属性4.2.1 state(1)基础(2)小案例:交互 4.2.2 props4.2.2.1 基础4.2.2.2 小案例(一)4.2.2.3 小案例(二):指定属性值的类型和必要性4.2.2.4 小案例--补充:扩展运算符4.2.2.5 小案例--类组件方式--不知道对不对 4.2.3 refs4.2.3.1 小案例4.2.3.2 代码说明1:event.target.value4.2.3.3 代码说明2:通过 ref 获取DOM元素 4.2.4 state 和 props 的区别4.3 解决 this 问题的两种方法 一、相关浅析 1.1 React React:用于构建用户界面的
  • react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
    文章目录 前言一、helloworld二、React jsx2.1 jsx2.2 动态展示列表数据2.3 虚拟dom创建的两种方式2.4 代码实例2.5 步骤2.6 技术点 三、组件化、模块化3.1 组件3.2 组件化3.3 模块3.4 模块化 四、组件定义两种方式3.1 代码实例3.2 技术点 五、组件三个属性:state、props、refs3.1 component_state3.1.1 需求说明3.1.2 state3.1.2 代码实例3.1.3 步骤3.1.4 步骤、技术点 3.2 component_props3.2.1 需求说明3.2.2 props3.2.3 代码实例3.2.4 步骤、技术点3.2.5 问题:区别state和props 3.3 component_refs3.3.1 需求描述3.3.2 refs属性3.3.3 事件处理3.3.4 强烈注意 3.3.5 代码实例3.3.6 步骤、技术点 六、组件的组合6.1 需求描述6.2 代码实例6.3 技术点(==注意:数据在哪,操作方法就在哪==)6.4 React工具使用,查看三个属性6.5 功能界面的组件化编码流程(无比重要) 七、收集表单数据7.1 需求描述7.2 理解7.3 代码实例7.4 步骤、技术点 八、组件生命周期8.1 需求效果8.2 理解8.3 生命周期流程图8.4 生命周期详述8.5
  • React 目标 了解组件以及组件的封装
    React 目标 了解组件以及组件的封装 组件通信 children defaultProps React React.js 是一个帮助你构建页面 UI 的库。React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。 一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的,这时候组件的显示形态就会发生相应的改变。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。 React.js 不是一个框架,它只是一个库。它只提供 UI (view)层面的解决方案。在实际的项目当中,它并不能解决我们所有的问题,需要结合其它的库,例如 Redux、React-router 等来协助提供完整的解决方法。 模块化:从 代码 的角度,去分析问题,把我们编程时候的业务逻辑,分割到不同的模块中来进行开发,这样能够方便代码的重用; 组件化:从 UI 的角度,去分析问题,把一个页面,拆分为一些互不相干的小组件,随着我们项目的开发,我们手里的组件会越来越多,最后,我们如果要实现一个页面,可能直接把现有的组件拿过来进行拼接,就能快速得到一个完整的页面, 这样方便了UI元素的重用;组件是元素的集合体。 vue 组件化与 React组件化 1、Vue是如何实现组件化的:.vue 组件模板文件
  • React
    一、React简介 1.是什么? 发送请求获取数据处理数据(过滤整理格式等)操作DOM呈现页面 react是一个将数据渲染为HTML视图的开源JavaScript库。 2.为什么要学React? 1.原生JavaScript操作DOM繁琐、效率低( DOM-API操作UI)。 2.使用JavaScript直接操作DOM,浏览器会进行大量的重绘重排。 3.原生JavaScript没有组件化编码方案,代码复用率低。 3.React的特点 采用组件化模式、声明式编码,提高开发效率及组件复用率。在React Native中可以使用React语法进行移动端开发。使用虚拟DOM+优秀的Diffing算法,尽量减少与真实DOM的交互。 原生js实现数据变动 React实现: 二、React入门 1. HelloWord <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/react
  • 【React学习】JSX、生命周期、脚手架
    文章目录 1 React入门1.1 React基础认识1.2 React基本使用1.3 React JSX1.3.1 JSX1.3.2 虚拟DOM1.3.3 渲染虚拟 DOM(元素) 1.4 模块与组件、模块化与组件化的理解 2 React 面向组件编程2.1 自定义组件2.2 组件三大属性2.2.1 state2.2.2 props2.2.3 refs2.2.4 事件处理 2.3 功能界面的组件化编码流程2.4 收集表单数据2.5 组件生命周期2.5.1 生命周期流程图2.5.2 生命周期详述2.5.3 重要的勾子函数2.5.5 **新的生命周期** 2.6 虚拟 DOM 与 DOM Diff 算法 3 react 脚手架3.1 create-react-app3.2 创建项目并启动 参考 文章放置于:https://github.com/zgkaii/CS-Notes-Kz,欢迎批评指正! 1 React入门 1.1 React基础认识 React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库,由 Facebook 开源。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。 传统的Web UI开发的主要问题——DOM API关注太多细节,应用程序状态分散在各处f难以追踪和维护。 而React的特点:
  • How to test style for a React component attribute with Enzyme
    I am trying to test a style attribute for a React component. What is the best way to get style params in the test? At this moment, my best option is to test if the HTML includes the string, but I think there is a better option. Case: it('Should render large image when desktop', () => { const dummyUrl = 'http://dummyUrl'; const wrapper = shallow( <MockedStore initialState={{ app: fromJS({ browser: { desktop: true } }), }} > <LandingHero bigImage={dummyUrl} /> </MockedStore> ); }); The Component to test is: // @flow import React, { Component } from 'react'; import gc from 'styles/core.scss'
  • React —— 组件实例的三大核心属性 state,props,refs
    React —— 组件实例的三大核心属性 state,props,refs React —— 组件实例的三大核心属性 state,props,refs一、statestate 介绍state 初始化1.借助类的构造器对state进行初始化2.简写 正确地使用 state1. 不要直接修改 State2. State 的更新可能是异步的3. State 的更新会被合并,而不是覆盖 实例 二、propsprops 介绍props 基本使用1.在组件中通过属性传入2.利用扩展运算符的简写3.在组件类定义中通过 this.props 读出 props 限制1.引入prop-types2.在类的外部进行限制3.在类的内部进行限制 函数式组件使用props实例 三、refsrefs 介绍创建 ref 的三种方式1.字符串形式的ref2.回调函数形式的ref3.createRef的使用 总结1.勿过度使用 Refs2.回调ref中回调执行次数的问题 React —— 组件实例的三大核心属性 state,props,refs 组件实例的三大核心属性: state,props,refs 一、state state 介绍 state 初始化 1.借助类的构造器对state进行初始化 class Clock extends React.Component { constructor(props) {
  • React(学习笔记)
    React 一、React入门1.React是什么2.React的特点3.React基本使用4.创建虚拟DOM的两种方式5.虚拟DOM和真实DOM6.JSX语法规则7.组件与模块、组件化和模块化 二、React面向组件编程1.安装浏览器插件2.函数式组件3.类式组件4.组件实例的三大属性:state5.组件实例的三大属性:props6.组件实例的三大属性:refs7.react中的事件处理8.受控组件和非受控组件9.高阶函数--函数柯里化10.组件的生命周期11.DOM的diffing算法 三、React脚手架1.React脚手架的安装2.脚手架文件介绍3.一个简单的hello组件4.样式的模块化5.组件化编码流程6.todolist案例(1) 需求:(2)静态页面(还未使用脚手架)(3)实现 四、React Ajax1.说明2.常用的ajax请求库3.脚手架配置代理(1)前期准备(2)配置代理方法一(3)配置代理方法二 4.github搜索案例(1)需求(2)静态页面和服务器准备(3)实现(axios实现)(4)实现(消息订阅与发布——pubsub)(5)实现(fetch实现——扩展)(6)相关知识点 五、React路由1.对SPA应用的理解2.对路由的理解3.前端路由的理解4.路由的基本使用(1)静态资源(2)实现(3)相关知识点 5.路由组件和一般组件6
  • 如何在React组件上测试道具更新(How to test a prop update on React component)
    问题 什么是对React组件prop更新进行单元测试的正确方法。 这是我的测试装置; describe('updating the value', function(){ var component; beforeEach(function(){ component = TestUtils.renderIntoDocument(<MyComponent value={true} />); }); it('should update the state of the component when the value prop is changed', function(){ // Act component.props.value = false; component.forceUpdate(); // Assert expect(component.state.value).toBe(false); }); }); 这可以正常工作,并且测试通过了,但是显示了反应警告消息 'Warning: Dont set .props.value of the React component <exports />. Instead specify the correct value when initially creating the element or use React
  • React Hook测试指南
    在React为什么需要Hook中我们探讨了React为什么需要引入Hook这个属性,在React Hook实战指南中我们深入了解了各种Hook的详细用法以及会遇到的问题,在本篇文章中我将带大家了解一下如何通过为自定义hook编写单元测试来提高我们的代码质量,它会包含下面的内容: 什么是单元测试 单元测试的定义为什么需要编写单元测试单元测试需要注意什么 如何对自定义Hook进行单元测试 JestReact-hooks-testing-library例子 什么是单元测试 单元测试的定义 要理解单元测试,我们先来给测试下个定义。用最简单的话来说测试就是:我们给被测试对象一些输入(input),然后看看这个对象的输出结果(output)是不是符合我们的预期(match with expected result)。而在软件工程里面有很多不同类型的测试,例如单元测试(unit test),功能测试(functional test),性能测试(performance test)和集成测试(integration test)等。不同种类的测试的主要区别是被测试的对象和评判指标不一样。对于单元测试,被测试的对象是我们源代码的独立单元(individual unit),在面向过程编程语言(procedural programming)里面,单元就是我们封装的方法(function)
  • react中三大核心属性
    1.state的基本使用 <script type="text/babel"> // 1.创建组件 class Weather extends React.Component{ constructor(props) { super(props) this.state = { isHot: true, wind: '大风' } } render() { console.log(this) return <h1>今天天气很{this.state.isHot ? '炎热' : '凉爽'}</h1> } } // 2.渲染组件到页面 ReactDOM.render(<Weather />, document.getElementById('test')) </script> 2.状态state不可以直接更改,要借助一个内置的api去更改 <script type="text/babel"> // 1.创建组件 class Weather extends React.Component{ constructor(props) { super(props) this.state = { isHot: true, wind: '大风' } this.demo = this.demo.bind(this) } render() { console.log(this) return <h1
  • Vue?Vue和React深度
    我使用Vue和React已经很长一段时间了,两个框架上实践代码量都在10万行以上。不得不说都是都很不错的,帮助开发者减少很多工作量,某种框架是现代化Vue和React在两者之间的选择并不像选择苹果或香蕉一样简单,两者在工程实践上的差异让我们逐渐放弃了Vue。此处以不一样的角度对彼此进行深度对比。常见摇摆问题,观点首先,我重新谈谈常见对比项目,观点的看法,这些部分内容可以通过一些文章或者Vue官方对比文档查到,主要目的是帮助小白解决入门摇摆问题。如果你反对,欢迎评论区留言Battle,反正我不会回答你这类问题。Vue或React文档更丰富?两者都有丰富的文档(包括中文文档),Vue文档,React中文,所以不用担心你四级都过不了,看不懂文档,这都是有眼就行的事〜当然,如果你提前懂点javascript相关知识也是大大滴好,ES6语法更佳,可以在这里跟阮老师学习,免费的电子书。文档和持续进阶不是你在两个框架间做选择的原因。Vue的话需要记住各种指令,还有属性细节,免不了经常查文档。React相对简单,记住:“函数入口是props,出口是html”就行了。React学习门槛高?这个也不是你选择框架的原因,如果这个也可以作为原因的话,我觉得是因为你懒,给自己找了借口。据我自己学习,实践总结,两个框架都很简单,有手就行,有脑就会,不见得会React就比Vue牛逼很多。其中都提供了相应脚手架
  • react 自学01
    1,关于虚拟DOM: 1,本质是Object类型的对象(一般对象).2,虚拟DOM比较"轻",真实DOM比较"重",因为虚拟DOM是React内不再使用,无需真实DOM上那么多的属性.3,虚拟DOM最终会被React转化为真实DOM,呈现在页面上. 2.渲染虚拟DOM到页面上 注意jsx语法 1.定义虚拟DOM时,不要写字符串2.标签中混入js表达式要用{}.3.样式的类名指定不用class要用className,4.内联样式要用style={{key:value}},5.只有一个根标签.6.标签必须必和7.标签首字母 (1)若小写字母开头则将改标签转为html中同名标签.若html中无改标签对应的同名元素,则报错.(2)若大写字母开头.react就去渲染对应的组件,若组件没有定义,则报错. 3.函数式组件和类式组件 1.函数是组建就是一个function function MyComponent () { console.log(this) //此处的this是undefined 因为babel编译后开启了严格模式 return <h2> 我使用函数定义的组件(适用于[简单组件]的定义)</h2> } ReactDOM.render(<MyComponent />,document.getElementById('test')) /* 执行了ReactDOM.render(
  • React学习笔记(一):组件三大核心属性、组件的生命周期
    1、React入门 1)、hello react <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello_react</title> </head> <body> <!-- 准备好一个容器 --> <div id="test"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/react.development.js"></script> <!-- 引入react-dom,用于支持react操作DOM --> <script type="text/javascript" src="../js/react-dom.development.js"></script> <!-- 引入babel,用于将jsx转为js --> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> /* 此处一定要写babel */ //1.创建虚拟DOM const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号,因为不是字符串 */ //2.渲染虚拟DOM到页面
  • 为什么我们放弃了 Vue?Vue 和 React 深度对比
    我使用 Vue 和 React 已经很长一段时间了,两个框架上实践代码量都在 10 万行以上。不得不说两者都是很 nice 的,帮助开发者减少很多工作量,这类框架是现代化前端开发必备的。然而 Vue 和 React 两者之间的选择并不像选择苹果或香蕉一样简单,两者在工程实践上的差距让我们逐渐放弃了 Vue。本文以不一样的角度对两者进行深度对比。 常见摇摆问题、观点 首先,我简短谈谈常见对比项目、观点的看法,这些部分内容可以通过一些文章或者 Vue 官方对比文档查到,主要目的是帮助小白解决入门摇摆问题。我会根据长期实践经验直接下结论,如果你反对,欢迎评论区留言 battle,反正我不会回答你这类问题。 Vue 或 React 文档更丰富? 两者都有丰富的文档(包括中文文档),Vue 文档、React 中文,所以不用担心你四六级都过不了,看不懂文档,这都是有眼就行的事~当然,如果你提前懂点 javascript 相关知识也是大大滴好,ES6 语法更佳,可以在这里跟阮老师学习,免费的电子书。文档和持续进阶不是你在两个框架间做选择的原因。 Vue 的话需要记住各种指令,还有属性细节,免不了经常查文档。React 相对简单,记住:“函数入口是 props,出口是 html”就行了。 React 学习门槛高? 这个也不是你选择框架的原因,如果这个也可以作为原因的话,我觉得是因为你懒
  • React 基础知识 - 学习笔记
    1、React 安装 通过 npm 使用 React (1)安装全局包 $ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g (2)创建根目录 目录名 --> reactApp --> npm init 初始化 --> 生成 package.json: $ mkdir reactApp $ cd reactApp/ $ npm init name: (reactApp) youj-react-test version: (1.0.0) description: W3Cschool教程 react 测试 entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /Users/laolan/www/reactApp/package.json: { "name": "youj-react-test", "version": "1.0.0", "description": "W3Cschool教程 react 测试", "main": "index.js", "scripts": { "test": "echo \"Error
  • 如何有条件地向React组件添加属性?(How do I conditionally add attributes to React components?)
    问题 如果满足特定条件,是否有办法仅将属性添加到R​​eact组件? 我应该在渲染后基于Ajax调用将required和readOnly属性添加到表单元素中,但是由于readOnly =“ false”与完全省略该属性不同,因此我看不到如何解决此问题。 下面的示例应该解释我想要的内容,但是它不起作用(解析错误:意外的标识符)。 var React = require('React'); var MyOwnInput = React.createClass({ render: function () { return ( <div> <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/> </div> ); } }); module.exports = React.createClass({ getInitialState: function () { return { isRequired: false } }, componentDidMount: function () { this.setState({ isRequired: true }); }, render: function () { var isRequired = this
  • React基础一
    目录 react相关说明 react不能像Vue一样直接在浏览器运行React的快速构建工具通过CRA来构建项目 构建流程常见问题 react元素与组件 React元素函数式组件类组件辅助工具 组件的传参和接参组件的组合和嵌套 组件的组合组件的嵌套在子组件中显示父组件中子组件书写的内容 jsx原理【 了解 】组件中的DOM样式React的数据定义问题 属性状态 属性props验证jsx里面的注释属性vs状态 相同点不同点stateprops使用场景总结 状态提升状态组件 说明 React中使用的是 es6 模块化规范 (即import引入,exports default导出) React是不能直接在浏览器中运行的,我们必须借助工具才能运行React程序 因为React是jsx,它必须经过webpack编译为js才能运行 React的快速构建工具 脚手架作用:快速构建一个项目类型 CRA [ 大纲要求 - react官方推荐的 ]DvaUmi 通过CRA来构建项目 构建流程 安装CRA [ create-react-app ] 全局安装 yarn add create-react-app globalcnpm i create-react-app -g 临时使用 [ npx ] npx create-react-app 项目名称 安装需要等待一段时间,这个过程实际上会安装三个东西