React随手笔记(码字ing)

前端小白板砖中
176 阅读5分钟

React 是什么？

  • React 是一个用于构建用户界面的 JAVASCRIPT 库。
  1. 声明式设计 −React采用声明范式，可以轻松描述应用。
  2. 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
  3. 灵活 −React可以与已知的库或框架很好地配合。
  4. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
  5. 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
  6. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

如何创建React新项目

  1. 安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org
  2. 安装react构建器 cnpm install -g create-react-app
  3. 创建项目create-react-app my-test
  4. 切换到创建的项目cd my-test
  5. 启动项目npm start

介绍React项目里的文件

  • 首先项目文件最外层有node_moudle依赖文件，有public文件，有src文件，package.json配置文件。
  • public文件中有index.html，这个文件仅有一个id为root的div，

React库代码部分解析

  • React几乎所有的内容都是有组件组成，这些组件可以是类组件，也可以是简单组件
  • 先创建一个app组件
class App extends React.Component{
    render(){
        //render方法是类组件中唯一需要的方法，用于呈现DOM节点
        return(
        //在return中我们放置jsx代码，编写react必须用jsx
        <div className="App"></div>
        //此处编写的是js不是html，所以类型用className而不是class。
        )
    }
}
ReactDOM.render(<APP />, document.getElementById('root'))
//最后使用ReactDOM.render方法将App组件渲染到rootHTML中的div

  • jsx的简单介绍

    • jsx代表JavaScript XML
     //jsx分配给变量的样子
 const heading = <h1 className = "header"> Hello World </h1>
 //jsx编译成js的样子
 const heading = React.creatElement('h1',{className:'header'},"Hello World")
    • jsx更接近于JavaScript，而不是HTML，因此在编写时要注意一些关键字的区别
      • jsx中className代替class添加类，class是js中保留的关键字
      • jsx中属性和方法为onClick，而js中为onclick
      • 自闭和标签必须以斜杠结尾，例如<img />
      • 如果想在jsx中使用js包括变量、函数、属性，则需要用{}包住，例如const name = 'hello world'; const heading = <h1>{name}</h1>

类组件和简单组件的区别

  • 类组件必须有render，通过以下实例帮助你理解类组件和简单组件
//下面咱们创建一个表格类组件，在src下创建一个Table.js文件
import React,{Component} from 'react'
class Table extends Component {
    render(
      return {
          <table>
              <thead>
                  <tr>
                      <th>Name</th>
                      <th>Color</th>
                  <tr>
              </thead>
              <tbody>
                  <tr>
                      <td>Mac</td>
                      <td>red</td>
                  </tr>
                  <tr>
                      <td>Charlie</td>
                      <td>black</td>
                  </tr><tr>
                      <td>Dee</td>
                      <td>yellow</td>
                  </tr>
              </tbody>
          </table>
      }
    )
}
export default Table
  • 第一次改造这个类表格
import React,{Component} from 'react'
//声明两个简单组件
const TableHead = ()=>{
  return (
      <thead>
         <tr>
              <th>Name<th>
              <th>Color<th>
          </tr>
      </thead>
  )
}
const TableBody = ()=>{
  return(
      <tbody>
          <tr>
              <td>Mac</td>
              <td>red</td>
          </tr>
          <tr>
              <td>Charlie</td>
              <td>black</td>
          </tr>
          <tr>
              <td>Dee</td>
              <td>yellow</td>
          </tr>
      </tbody>
  )
}
//声明Table类组件
 class Table extends Component {
     render(){
         return(
         //注意如果return的内容包含在一行内，()则可以省略
              <table>
                  <TableHead />
                  <TableBody />
              </table>
         )
     }    
 }
 //组件可以嵌套在其他组件中，并且简单和类组件可以混合使用。
 export default Table

组件间的参数传递

props传参

  • 第二次改造类表格组件
// Table.js组件
import React,{Component} from 'react'
//声明两个简单组件
const TableHead = ()=>{
  return (
      <thead>
         <tr>
              <th>Name</th>
              <th>Color</th>
              <th>Remove</th>
          </tr>
      </thead>
  )
}
const TableBody = (props)=>{
    const rows = props.aryData.map((row,index)=>{
        return (
            <tr key={index}>
                <td>{row.name}</td>
                <td>{row.job}</td>
                <td><button onClick = {props.removeData(index)}>删除</button>
            </tr>
            
        )
    })
    return <tbody>{rows}</tbody>
  
}
//声明Table类组件
 class Table extends Component {
     render(){
     const {aryData} = this.props
         return(
         //注意如果return的内容包含在一行内，()则可以省略
              <table>
                  <TableHead />
                  <TableBody aryData = {aryData} removeData = {removeData}/>
              </table>
         )
     }    
 }
 //组件可以嵌套在其他组件中，并且简单和类组件可以混合使用。
 export default Table
 
 // App.js组件
import React from 'react';
import './App.css';
import Table from './Table'

class App extends Component{
state = {
    ary = ary: [
      {
        name: 'Charlie',
        job: 'Janitor',
      },
      {
        name: 'Mac',
        job: 'Bouncer',
      },
      {
        name: 'Dee',
        job: 'Aspring actress',
      },
      {
        name: 'Dennis',
        job: 'Bartender',
      },
    ]
}
removeData = (index)=>{
    const {ary} = this.data;
    this.setState({
        ary:ary.filter((item,i)=>{
            return i !==index
        })
    })
}
render(){
    const {ary} = this.state 
    return (
    <div className="App">
      <div className="main">
        hello world
      </div>
      <div className="content">
        <Table aryData={ary} removeData={this.removeData}></Table>
      </div>
    </div>
    );
   }
  }
 }
}
export default App;

实现动态数据的绑定，购物车原理。

//创建一个Form.js组件
import React , {Component} from 'react'
class Form extends Component{
    addState = {
        job: '',
        name: ''
    }
    this.state = addState
    handleChange = (event)=>{
        let {name,value} = event.target
        this.setState({
            [name] = value
        })
    }
    submitForm = ()=>{
    this.props.handleSubmit(this.state)
    this.setState(addState)
    }
    render(){
        return(
            <form>
                <label htmlFor= 'name'>Name</label>
                <input type="text" name="name" value= {name} onChange = {this.handleChange} />
                <label htmlFor = 'job'>Job<label>
                <input type = 'text' name:'job' value = {job} onChange = {this.handleChange} />
                <input type = 'button' onClick = {this.submitForm} />
            </form>
        )
    }
}

//App.js
import React, { Component } from 'react';
import './App.css';
import Table from './Table'
import Form from './Form'

class App extends Component {
  state = {
    ary: [
    ]
  };

  removeData = (index) => {
    const { ary } = this.state
    this.setState({
      ary: ary.filter((item, i) => {
        return i !== index
      })
    })
  }
  handleSubmit = (obj) => {
    this.setState({
      ary: [...this.state.ary, obj]
    })
  }
  componentDidMount(){
      //放置请求
  }
  render() {
    const { ary } = this.state
    return (
      <div className="App">
        <div className="main">
          hello world
      </div>
        <div className="content">
          <Table aryData={ary} removeData={this.removeData}></Table>
          <Form handleSubmit={this.handleSubmit}></Form>
        </div>
      </div>
    );
  }
}
export default App;

//Table组件如上不变

部署react应用

  • 首先在package.json中配置部署的地址 "homepage":'https://taniarascia.github.io/react-tutorial',
  • 在scrpit中添加这两行
"script":{
    "predeploy":"npm run build",
    "deploy:"gh-page -d build"
}
  • npm i --save-dev gh-page
  • npm run build
  • npm run deploy

做一个简单的棋盘游戏

avatar
文章
阅读
粉丝