当前位置:首页 > React学习笔记(一)

React学习笔记(一)

发布于 2018-06-12 阅读 859 次 React

安装

暂时是用npm安装着学习的,安装之前请保证你已经安装了nodejs,版本要求version >= 6,我的项目名称是react20180605,大家可以自行起名字。

  1. npm install -g create-react-app
  2. create-react-app react20180605
  3. cd react20180605
  4. npm start

安装完成react会自动生成目录结构。

简单认识文件目录结构


index.js就是入口文件了。

基础知识

react组件基本写法有两种,我用个是class形式,以后的笔记也将会用这种形式。
♦ 1.一个基本的组件。使用state而不是直接操作props

  1. class ComponentExample(props){
  2. //构造函数中必须先调用super(),也就是父级的构造函数
  3. constructor(props){
  4. super(props);
  5. this.state = props;
  6. this.state.data = {
  7. data1:123
  8. }
  9. }
  10. render(){
  11. //外层必须有一个父元素包裹
  12. return (
  13. <div>
  14. <span></span>
  15. ...
  16. </div>
  17. )
  18. }
  19. }

♦ 2.使用setSate将数据改变展示到视图。用法

  1. this.setSate({key:value});
  2. //向数组插入新元素
  3. this.setSate({values:...this.state.values, val});
  4. 也可以
  5. var newValue = this.state.values;
  6. newValue.push(val);
  7. this.setSate({values: newValue};

♦ 3.react循环列表使用的是map方法,列表需要有一个唯一的key属性,只在当前列表唯一即可。这个key可以是索引值。

  1. const listItems = this.state.todos.map(function(td, index){
  2. return <li key={index}>{td}</li>
  3. });

写一个最简单的todo例子

事件绑定的函数需要绑定this,例如:this.handleChange = this.handleChange.bind(this);

  1. import React, { Component } from 'react';
  2. class App extends Component {
  3. constructor(props){
  4. super(props);
  5. this.state = {
  6. todos: ['Clean the room','buy some tobacos','drink water'],
  7. td: ''
  8. };
  9. this.handleChange = this.handleChange.bind(this);
  10. this.addTodo = this.addTodo.bind(this);
  11. }
  12. handleChange(e){
  13. this.setState({'td':e.target.value});
  14. }
  15. addTodo(){
  16. // let td = this.state.td;
  17. // this.setState({todos:[...this.state.todos, td]});
  18. // this.setState({'td':''});
  19. let tds = this.state.todos;
  20. tds.push(this.state.td);
  21. console.log(tds, this.state.todos)
  22. this.setState({todos: tds})
  23. }
  24. render() {
  25. const listItems = this.state.todos.map(function(td, index){
  26. return <li key={index}>{td}</li>
  27. });
  28. return (
  29. <div className="shopping-list">
  30. <h1>ToDos</h1>
  31. <ul>
  32. {listItems}
  33. </ul>
  34. <input type="text" value={this.state.td} onChange={this.handleChange} />
  35. <button onClick={this.addTodo}>add</button>
  36. </div>
  37. );
  38. }
  39. }
相关文章