网站不备案可以做百度竞价吗,中国建筑集团有限公司电话,深圳公司网站建设公司,温州住房与城乡建设部网站目录 React-day01 入门知识React介绍官网React开发环境初始化 SPA脚手架初始化项目#xff08;方便#xff0c;稳定#xff09;*通过webpack进行初始化配置镜像地址开发工具配置元素渲染组件及组件状态函数定义组件(无状态)类定义组件(有状态)*组合组件Props属性*State状态*… 目录 React-day01 入门知识React介绍官网React开发环境初始化 SPA脚手架初始化项目方便稳定*通过webpack进行初始化配置镜像地址开发工具配置元素渲染组件及组件状态函数定义组件(无状态)类定义组件(有状态)*组合组件Props属性*State状态*组件生命周期事件处理定义组件事件属性初始化器语法*参数传递*计数器游戏style样式(JSX写法) React-day01 入门知识 React介绍 Facebook脸书- Instagram照片墙 。 于2013年5月开源 帮助开发者简洁、直观地构建高性能的UI界面 高效模拟Doument Object Model减少DOM交互 (速度快)灵活可以与已知的库配合使用声明式 帮助开发者直观的创建UI组件化把相似的代码通过封装成组件进行复用官网 官方网站 https://reactjs.org/ 中文网站 https://doc.react-china.org/ React开发环境初始化 SPA react React开发必备库react-domweb开发时使用的库用于虚拟DOM移动开发使用ReactNative脚手架初始化项目方便稳定* 执行初始化命令 #保证Node版本6
npm install -g create-react-app
create-react-app my-appcd my-app
npm start
## 如果npm版本5.2.0可以使用npx进行初始化
npx create-react-app my-appcd my-app
npm startnpm和yarn命令对比通过webpack进行初始化 步骤文档 配置镜像地址 查看当前镜像配置 npm config list npm config get registry设置当前镜像地址 npm config set registry https://registry.npm.taobao.org/ npm config set disturl https://npm.taobao.org/dist开发工具配置 添加JavaScript语法支持安装开发插件 JavaScriptnpm, markdown, Node.js, Reactjs元素渲染 元素是构成React应用的最小单位 import React from react;
import ReactDOM from react-dom;const element (divh1HaHa!/h1h2Hello Itheima element/h2/div
);// ReactDOM进行元素渲染
ReactDOM.render(element,document.getElementById(root)
);React对JSX语法转换 const element ( div classNameeleClass HaHa! /div
); 转换js后 const element React.createElement(div,{ className: eleClass },HaHa!
);组件及组件状态 组件可以将界面分割成独立的、可复用的组成部分。只需要专注于构建每个单独的部分。比如按钮对话框列表输入框都是组件。 组件可以接受参数props,可以返回一个在页面上展示的React元素函数定义组件(无状态) 无状态组件一般用于简单的页面展示 // 用函数定义了名为Hello组件
function Hello(props) {return h1Hello {props.name} !/h1;
}// react进行元素渲染
ReactDOM.render(Hello nameitheima props/,document.getElementById(root)
); 类定义组件(有状态)* class 必须要ES6支持 有状态组件可以维护自己的状态State信息完成更加复杂的显示逻辑 // 用类定义 名为Hello组件
class Hello extends React.Component {render(){return h1Hello {this.props.name} !/h1;}
}// react进行元素渲染
ReactDOM.render(Hello nameitheima class/,document.getElementById(root)
); 以上两种组件效果在React相同 类定义组件名称必须是大写 建议在return元素时用小括号()包裹 组合组件 组件之间可以相互引用通常把App作为根组件 // 用类定义 名为Hello组件
class Hello extends React.Component {render() {return h1Hello {this.props.name} !/h1;}
}
// 根组件
function App(props) {return (divdivh2团队名称: {props.team}/h2p成员个数: {props.count}/pp成立时间: {props.date.toLocaleString()}/p/divHello name悟空 /Hello name八戒 /Hello name沙僧 /Hello name三藏 //div);
}
// react进行元素渲染
ReactDOM.render(App team西天取经团 count{4} date{new Date()}/,document.getElementById(root)
); 注意组件的返回值只能有一个根元素所以用一个div包裹所有Hello元素在google插件市场搜索安装React查看DOM结构Props属性* props有两种输入方式 引号 输入字符串值大括号{} 输入JavaScript表达式大括号外不要再添加引号。props的值不可修改属性只读强行修改报错类定义组件中使用props需要在前边加 this.State状态* 自动更新的时钟 class Clock extends Component {render(){return (divh1当前时间:/h1h3current: {new Date().toLocaleString()}/h3/div);}
}setInterval(() {ReactDOM.render(Clock /,document.getElementById(root));
}, 1000); 应用一般执行一次ReactDOM.reader() 渲染 在组件内部进行更新 每个时钟内部都维护一个独立的date信息 在组件内部使用局部state状态属性 class Clock extends Component {constructor(props) {super(props);// state定义:在constructor构造函数进行state状态的初始化this.state {title: 时钟标题,date: new Date()};setInterval(() {this.tick();}, 1000);}tick(){// 更新date, 数据驱动, 必须通过setState函数修改数据并更新uithis.setState({date: new Date()})}render(){return (divh1{this.state.title}/h1h3current: {this.state.date.toLocaleString()}/h3/div);}
}ReactDOM.render(Clock /,document.getElementById(root)
);state特性 state 一般在构造函数初始化。this.state{...}state可以修改必须通过this.setState({...})更新并渲染组件调用setState更新状态时React最自动将最新的state合并到当前state中。组件生命周期 生命周期常用的函数 componentDidMount组件已挂载 进行一些初始化操作 componentWillUnmount 组件将要卸载进行回收操作清理任务 事件处理 定义组件事件 class App extends Component {handleClick(e){console.log(handleClick!)console.log(this);}render(){return (divbutton onClick{() this.handleClick()}按钮:{{() this.handleClick()}}/button/div);}
} 属性初始化器语法* // 属性初始化器语法 (Property initializer syntax)
handleClick () {console.log(handleClick!)console.log(this);
} 参数传递* class App extends Component {handleClick(e, str, date){ // 参数要和调用者传入的一一对应console.log(this)console.log(e)console.log(str, date)}render(){return (button onClick{(e)this.handleClick(e, 参数 , new Date())}按钮1:{箭头函数}/button);}
} 参数要和调用者传入的一一对应 计数器游戏 import React, { Component } from react;
import ReactDOM from react-dom;// 类定义组件的写法
class App extends Component {constructor(props) {super(props);// 绑定this到事件函数this.countPlus this.countPlus.bind(this);this.state { count: 0,timeSurplus: 10};}// 组件已挂载, 开启周期任务componentDidMount() {this.timerId setInterval(() {this.setState((preState) ({timeSurplus: preState.timeSurplus - 1}))// 在合适的时候, 结束周期函数if(this.state.timeSurplus 0){clearInterval(this.timerId)}}, 1000);}countPlus(){// 更新当前count数字.console.log(this)// 如果时间到了, 返回if (this.state.timeSurplus 0){return;}// 更新数据会自动触发UI的重新render// this.setState({// count: this.state.count 1// })// 通过之前state状态更新现在的状态this.setState((preState) ({count: preState.count 1}))}render() {return (divh1{this.props.title}/h1h2{this.state.timeSurplus 0 ? (时间到, 总数 this.state.count) : (剩余时间: this.state.timeSurplus)}/h2button onClick{this.countPlus}计数: {this.state.count}/button/div);}
}ReactDOM.render(App title计数器, 试试你的手速!/,document.getElementById(root)
); style样式(JSX写法) 直接写在style属性中 button style{{width: 200, height: 200}}我是按钮/button通关变量声明样式并引用 const btnStyle { width: 200, height: 200 };
...
button style{btnStyle} onClick{this.handleClick}我是按钮/button 转载于:https://www.cnblogs.com/xiaocongcong888/p/9436171.html
