react基础知识一

react脚手架的使用步骤

index.js:
// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'

// 2 创建rect元素
const title = React.createElement('h1',null,'Hello React!!!');

// 3 渲染react元素
ReactDOM.render(title,document.getElementById('root'));

创建rect元素的方法

方法1：使用React.createElement

const title = React.createElement('h1',null,'Hello React!!!');

方法2：使用JSX

  const title = <h1>Hello JSX<span>这是span</span></h1>

JSX的基本使用

函数组件

类组件

事件绑定

事件对象

JSX的列表渲染

• 如果要渲染一组数据，应该使用数组的map()方法
• 注意：渲染列表时应该添加key属性，key属性的值要保证唯一
• 原则：map()遍历谁，就给谁添加key属性
• 注意：尽量避免使用索引号作为key
  

JSX的样式处理

1. 行内样式 - style
2. 类名 - className（推荐）
   

state的基本使用

setState()修改状态

事件绑定this指向

1.使用class的实例方法（推荐）
2.箭头函数
3.bind

操作文本的值

1.input文本框（this.state.value）
2.富文本框（this.state.value）
3.下拉框（this.state.value）
4.复选框（this.state.checked）

// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'
import "./index.css"

// 2 创建rect元素

// 方法1：使用React.createElement
// const title = React.createElement('h1',null,'Hello React!!!');

// 方法2：使用JSX
  // const title = <h1>Hello JSX<span>这是span</span></h1>
  // const name ="Hello JSX"
  // const sayHi = () => 'Hi!'
  // const dv = <div>我是div</div>
  // const title = (
  //  <div>
  //     <p>{name}<span className="title">这是span</span></p>
  //     <p>{sayHi()}</p>
  //     {dv}

  //  </div>
  // )

  // 类组件
class APP extends React.Component{
  state = {
    comments: [
      {id: 1, name:"z", content: "ddf"},
      {id: 2, name:"x", content: "dfgg"},
      {id: 3, name:"c", content: "ghhr"},
    ],
    // 评论人
    userName:'',
    // 评论内容
    userContent:''
  };
  renderList(){
    const {comments} = this.state
    if(comments.length == 0 ){
      return (<div className="no-comment"> 暂无评论，快去评论吧~ </div>)
    }
    return (<ul>
       {
        comments.map(item => (
           <li key={item.id}>
             <h3>评论人：{item.name}</h3>
             <p>评论内容：{item.content}</p>
           </li>
       ))}
     </ul>)


    // return this.state.comments.length == 0 
    //  ? (<div className="no-comment"> 暂无评论，快去评论吧~ </div>)
    //  :(<ul>
    //     {
    //      this.state.comments.map(item => (
    //         <li key={item.id}>
    //           <h3>评论人：{item.name}</h3>
    //           <p>评论内容：{item.content}</p>
    //         </li>
    //     ))}
    //   </ul>)
  }
  handleForm = (e) => {
    console.log( e.target.name);
    console.log( e.target.value);
    const {name,value} = e.target;
    this.setState({
      [name]: value
    })
  }
  addComments = () => {
    const {comments,userName,userContent} = this.state;

    // 非空校验
    if( userName.trim() === '' || userContent.trim() === '' ){
      alert('请输入评论人或评论内容')
      return
    }

    // 将评论信息添加到state中
    const newComments = [{
      id: Math.random(),
      name: userName,
      content: userContent
    },...comments]

    // console.log(newComments);
    // 文本框的值如何清空？ 要清空文本框只需要将其对应的state清空即可
    this.setState({
      comments: newComments,
      userName:" ",
      userContent:" "
    })
  }

  render(){
    const { userName, userContent} = this.state;
    return (
      <div className="app">
        <div>
          <input className="user" type="text" placeholder="请输入评论人" 
          value={userName} 
          name="userName" 
          onChange={this.handleForm}
          />
          <br />
          <textarea className="content" cols="20" row="10" placeholder="请输入评论内容" 
          value={userContent} 
          name="userContent" 
          onChange={this.handleForm}
          />
          <br />
          <button className="btn" onClick={this.addComments}>发表评论</button>
        </div>

        {this.renderList()}
        {
        // this.state.comments.length == 0 
        // ? (<div className="no-comment"> 暂无评论，快去评论吧~ </div>)
        // :(<ul>
        //     {
        //       this.state.comments.map(item => (
        //         <li key={item.id}>
        //           <h3>评论人：{item.name}</h3>
        //           <p>评论内容：{item.content}</p>
        //         </li>
        //     ))}
        //   </ul>)
       }
        
      </div>
    )
  }
}


// 3 渲染react元素
ReactDOM.render(<APP />,document.getElementById('root'));