1.动态开发语言 java python
2.静态开发语言 c++,c#,typeScript

typeScript 的优势
优点:效率高,丰富的接口提示,更少的错误,编译期间就能发现大部分错误
缺点:增加学习成本,短期内增加了一些开发成本

数据类型:7种原始类型Boolean,Null,Undefined,Number,BigInt,String,Symbol  和  Object


React 是什么 ???
1.声明式的写法
2.组件化
3.一次学习,随处编写


进入React的世界
官方脚手架工具  create-react-app
1.首先有npm 和 node
2.npm install create-react-app -g
3.create-react-app my-project  //创建项目
4. npm start   //运行项目
5. npm install bootstrap --save  //安装bootstrap样式  import 'bootstrap/dist/css/bootstrap.min.css'


第一个组件总结
1.Render 方法
2.ReactDOM.render方法
3.这神奇的html是什么


这神奇的HTML是什么?
1.JavaScript 的语法扩展
2.可以使用花括号{ }内嵌入任何JavaScript表达式
3.JSX属性

这奇怪的HTML被编译成什么?(通过babel自动转化)
1.它是一种语法糖-React.createElement()
2.ReactElement对象


props 是外部传入的,不可改变的
state 是内部的,可修改它的值  this.setState()


生命周期
1.组件初始化  constructor -> render -> componentDidMount
2.组件更新 New props ,setState(),forceUpdate()  -> render -> componentDidUpdate
3.组件卸载  componentWillUnmount


创建react+ts项目
npm install -g typescript
npx create-react-app mycomponent --template typescript
安装sass
npm uninstall node-sass
npm install node-sass@4.14.1
安装className
npm install classnames --save
npm install @types/classnames --save
执行npx jest jest.test.js --watch 测试

或react的测试语句
执行npm run test src/components/Button/button.test.ts 测试

断言插件jest dom的github地址:github.com/testing-library/jest-dom#tobeinthedocument

运行测试:npm run test src/components/Button/button.test.tsx


 

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐