也是好久没有更新了，今天更新一下关于 react的一些基本操作
什么是react
React是用于构建用户界面的JavaScript库， [1]起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源
产生背景
React的早期原型被称为“FaxJS”，它是由Facebook工程师Jordan Walke开发，因为他深受XHP的影响，XHP是一个简单的PHP HTML组件框架。React于2011年首次亮相，首次用于Facebook的Newsfeed。第二年在Instagram中使用。2013年5月，React在美国JSConf开源
发展历程
React项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的Web App解决方案。衍生的React Native项目，希望用写Web App的方式去写Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次UI ，就能同时运行在服务器、浏览器和手机。
为什么要学习react
react 目前在gethub上 访问量已经非常高，是目前最火的两个 矿建之一，采用 jsx语法 更加适合前端开发，且react是一个出现很多年的语言，语法趋于成熟，是推荐前端开发者学习的一个框架
以下为使用教程
1 脚手架的安装
运行一下命令进行react 脚手架的安装 在cmd中运行
npm install -g create-react-app2 安装编辑代码的工具vscode 这边建议在官网进行安装
以下是官网地址
3 创建react脚手架
同刚刚以下命令创建脚手架
create-react-app app其中 后面的 app是项目名称 在cmd中运行 出现以下结构 代表成功
react分为 函数组件和类组件 以下均为类组件用法
4 基本结构的定义
import React, { Component } from 'react'export default class App extends Component {render() {return (<div></div>)}
}
5 数据的定义
react用 state来进行数据的定义 运用 {} 来进行数据的渲染
import React, { Component } from 'react'export default class App extends Component {state = {text: 'Hello React'}render() {return (<div>{this.state.name}</div>)}
}
6 事件的绑定
react对事件进行了封装 是将原生事件的 on后面的首字母进行大写
<div onClick={()=>{console.log(1);}}>{this.state.name}</div>7 运行
打开终端 运用 npm run start 来启动 react项目
运行后·点击触发事件 如果控制台
成功打印就代表成功
7 修改数据
react 使用this.setState来进行 数据的修改
import React, { Component } from 'react'export default class App extends Component {state = {text: 'Hello React'}aa=()=>{this.setState({text:'Hello World'})}render() {return (<div onClick={()=>{this.aa()}}>{this.state.text}</div>)}
}
如果可以将页面中的 hello React 修改为Hello Word 那么就代表你成功了
下期就来一个 todolist的案例
https://code.visualstudio.com/Download
资料部分来自 https://baike.baidu.com/item/react/18077599
代码部分参考 react 中文文档 快速入门 – React 中文文档 (docschina.org)
