react

也是好久没有更新了，今天更新一下关于 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-app

   2 安装编辑代码的工具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)