React学习打卡Day1

1.react特性
1）既不是mvc，也不是mvvm结构
2）采用声明范式
3）虚拟dom
4）配合现有库和框架
5）JSX ，js的语法拓展，jsx=js+xml
6）复用，组件化
7）单向响应数据流

2.安装react
1）npm install -g create-react-app
2）create-react-app myapp
3）npm start 失败时，清除npmmodules和package-lock，再下载

3.编写第一个react应用程序
1）import React from 'react'，必须引入，其中包含JSX的语法
2）import ReactDOM from 'react-dom'，把React组件渲染到页面上去，注意不是从react中引入
3）ReactDOM.render(内容,选择器)，将内容加入对应选择器的页面中，不加引号表示html命令

4.JSX原理
JSX—使用react构建组件,bable进行编译—>JavaScript对象—reactDOM.render()—>DOM元素—>插入页面

5.Component组件使用
1）在base文件夹下创建js组件，使用class关键字，必须继承Component，必须使用render关键字，使用export导出，return后不能有兄弟标签，只能有一个大标签，如果要换行必须加（）
2）在index.js中使用import导入，用</>调用，代码如下

//组件文件下的代码
import React from 'react';
class App extends React.Component{render(){return <div>hello react Component</div>//return后只能加一个大标签，不能有兄弟标签）}
}
export default App;//index.js文件中的代码
import React from 'react'
import ReactDOM from 'react-dom'
import App from './01-base/01-class组件'ReactDOM.render(<App></App>,document.getElementById("root"));

6.函数式组件及其样式
1）function App(){这里同Component组件使用方式}
2）不需要继承Component属性
3）在div中加style属性时，必须在大括号内写对象
4）css中的属性连接符‘-’换成驼峰式写法
5）注意两个关键字：class写成className，laber中的for写成htmlFor
6）React推荐使用行内样式，因为React觉得每一个组件都是一个独立的整体，利于复用

import React, { PureComponent } from 'react'export default class App extends PureComponent {render() {var myname = "shown";var obj ={backgroundColor:"yellow",//遵循驼峰式写法，将‘-’省略fontSize:"30px"}return (<div>{10+20}-{myname}{10>20?'aaa':'bbb'}<div style={obj}>11111</div><div style={{background:"red"}}>11111</div><div className="active" id='myapp'>333333</div><label htmlFor='username'>用户名</label><input style={{outline:'none'}} type='text' id='username'></input></div>)}
}

React学习打卡Day1相关推荐

python+大数据学习打卡day1
[大数据从0-1打卡-day1] 1.简单了解一些关于大数据的概念数据:数据就是对客观事件进行记录并可以鉴别的符号.他不仅仅是指数字,还可以是有一定意义的字母.文字.符号.语音.文字.图画.视频或者 ...
英语学习打卡day1
2023.1.19 重点单词 1.speculation n.推测,投机 speculate v. speculative adj. spectate v.看 spectator inspect 检查 ...
C语言学习打卡day1——身高单位换算
编译软件:Xcode 将英尺英寸转化为米 printf("请输入身高,""如输入\"5 7 \"表示5英尺7英寸"); double foo ...
react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
2019 年 React 学习路线图
作者 | javinpaul 译者 | 无明之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发 ...
坚持学习打卡的人，将来会变成什么样？
坚持打卡的人,将来会变成怎么样?让我们拭目以待.我组织了一个打卡活动,希望大家踊跃参加. 有一个励志故事: 在中国的最东边生长着一种竹子,名叫"毛竹".那里的农民到处播种,每天精心 ...
React 学习第二天 2018-07-21
React 学习第二天我这个React 学习存在以下毛病 1.不报错, 2.不能自动热加载,不能自动刷新 3.不能修改props 属性的值,但是这个却能够修改. 1.Vue 和React的关于 k ...
React 学习第一天-2018-07-21
React 学习第一天 1.Dom 和虚拟Dom Dom 是浏览器中实际存在的,虚拟Dom是框架中的,是利用JS代码来模拟DOM. 虚拟Dom 是实现页面的实时更新. Dom树,一个网页的呈现过程, ...

React学习打卡Day1

React学习打卡Day1相关推荐

最新文章

热门文章