首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react简单入门教程(Todolist实现 )

react简单入门教程(Todolist实现 )

作者头像
十月梦想
发布2020-01-20 15:25:23
5360
发布2020-01-20 15:25:23
举报
文章被收录于专栏:十月梦想十月梦想
1.创建一个react项目

创建一个react:打开命令行输入以下命令

npx create-react-app todolist(项目名字)

进入项目目录

cd todolist

启动项目

npm start

浏览器输入

localhost:3000

2.组件定义
class App extends React.Component{
    render() {
        return (
            <div className="App">
                hello,十月梦想! 第一个react小程序!
            </div>
        );
    }
}
//导出组件
export default App

引用组件

在入口文件中使用import导入
import App from './App';
3.简单jsx语法
class App extends React.Component{
    render() {
        return (

            <div className="App">
            //jsx语法可以使用花括号使用js表达式,但不能使用js语句
                {1+1}
                hello,十月梦想! 第一个react小程序!
            </div>
        );
    }
}
4.执行函数
第一种是现在定义一个函数,然后使用click调用

<button
    onClick={this.handlebtnClick.bind(this)}
>Add</button>
第二种可以直接在标签内使用语法
<button
    onClick={
    ()=>{
        alert('哎哟,你点击了我一下')
    }
    }
>Add</button>
5.数据流存放
在class类之后定义构造函数,
constructor(props) {
    super(props);
    //定义的数据存放为对象形式
    this.state = {
        list: [
            'learn English',
            'learn Math',
            'learn java'
        ]
    }
}

注意:点击对象获得state内容,可以在指定函数后加上.bind(this)进行绑定,此时可以去表示state

this.handlebtnClick.bind(this)

6.react循环标签
//map进行bainli遍历
    this.state.list.map((item,index)=>{
        return <li key={index}> {item}</li>
    })
7.父子组件通讯
父组件传递:使用属性content传给子组件
return <Todoitem key={index} content={item} /> 
子组件使用props.content接收
 return <li > {this.props.content}</li>
8.子父组件通讯
//子组件
子组件向父组件传递:使用一个方法向父组件传递
render(){
    
     return <li onClick={this.handleDelete.bind(this)}> {this.props.content}</li>
}
子组件定义的方法
handleDelete(){
        this.props.delete(this.props.index)
    }
 //父组件
 定义一个方法接收子组件的传递
  return <Todoitem key={index} content={item} delete={this.handleDelete.bind(this,index)} index={index} />
  父组件的方法
  handleDelete(index){
        const list=[...this.state.list];
        list.splice(index,1)
        this.setState({
            list
        })
    }

本博客所有文章如无特别注明均为原创。作者:十月梦想 ,复制或转载请以超链接形式注明转自 十月梦想博客 。 原文地址《react简单入门教程(Todolist实现 )

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-7-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.创建一个react项目
  • 2.组件定义
  • 3.简单jsx语法
  • 4.执行函数
  • 5.数据流存放
  • 6.react循环标签
  • 7.父子组件通讯
  • 8.子父组件通讯
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档