快速入门react

安装react

npm install creat-react-app -g

这里直接安装react的一个脚手架,里面包含了要用到的许多东西,帮助快速入门react

创建新项目

  1. create-react-app my-app
  2. cd my-app
  3. npm start

用脚手架创建一个新的单页应用,进到项目里面后start跑起来

react组件

  • 引入Component组件
  • JSX语法
  • 渲染虚拟DOM
  • 组件props
  • 组件state
  • 组件嵌套
  • 组件生命周期

组件总览

首先在头部引入Component组件,然后通过class方式继承Component,最后将组件导出,即可成为单独组件使用。需要注意的地方就是组件的首字母一定要大写

//引入Component
import {Component} from ‘react‘;

//首字母大写!
class MyComponent extends Component{

    consturtion(props){
        super(props);
        this.state={
            isShow:true
        }
    }
    /*react生命周期函数*/
    componentWillMount() {}

    componentDidMount() {}

    componentWillReceiveProps() {}

    shouldComponentUpdate() {}

    componentWillUpdate() {}

    componentDidUpdate() {}

    componentWillUnmount() {}
    //通过render函数可以将JSX语法渲染成真实dom
    render() {
        return (
            <div>
                <h1>我是组件</h1>
                <p>{this.props.test}</p>
                <button onClick={()=>{
                    this.setState({
                        isShow:!this.state.isShow,
                    })
                }}>点我</button>
                <p>{this.state.isShow}</p>
            </div>
        )
    }
}

//首字母大写!
class Parent extends Component{
    return <MyComponent test="我是props" />
}

export default Parent;

JSX语法

确实说白了就是html标签写到js中去,然后通过babel转译成react虚拟DOM对象,然后再渲染。
上例中

render() {
    return (
        <div>我是组件,{this.props.test}</div>
    )
}

其实用的就是JSX语法,那么在标签内可以嵌套js语句。想要嵌套js语句的时候需要用{}包起来。

渲染虚拟DOM

关于这一点,要详细说起来还挺长的。考虑到是快速入门,于是乎我们就记住一点,当修改值需要react重新渲染的时候,react的机制是不会让他全部重新渲染的,它只会把你修改值所在的dom重新更新。这也是为什么react性能快的一大原因。这个选择渲染dom的算法叫做diff算法,如果要学习react就不能把这个给忘记。在日后需要好好把这方面的知识补全。这里还要补充的就是,react把JSX语法先转成react对象,然后通过内部创建节点插入到dom当中。还是考虑到快速,所以该节篇幅就不继续展开了,这些知识日后需要好好补全。

组件props

props如果接触过Vue的话,应该会很好理解这个概念。没接触过也不要紧,因为是比较容易接受的。我们这么理解,其实就是父组件传给子组件的一些东西,可以是基本数据类型,也可以是引用数据类型,也就是说啥都可以传。子组件可以通过this.props这个对象来获取父组件传下来的值

还是看回上面的例子

class MyComponent extends Component{
    render() {
        //这里可以拿到
        return (
            <div>
                <h1>我是组件</h1>
                <p>{this.props.test}</p>
                <button onClick={()=>{
                    this.setState({
                        isShow:!this.state.isShow,
                    })
                }}>点我</button>
                <p>{this.state.isShow}</p>
            </div>
        )
    }
}
class Parent extends Component{
    render() {
        //通过父组件传进去
        return <MyComponent test="我是props" />
    }
}

组件state

组件state是状态,这里存放的就是该组件的一些会改变的变量,就是状态。比如判断组件属性变化,获取表单值等。修改state会引起react重新渲染,也就是更新状态会引起组件刷新。我们可以通过setState()这个函数来设置state的值。不过要注意的是setState()这个函数是异步函数。下面还是看上面的例子

class MyComponent extends Component{
    consturtion(props){
        super(props);
        this.state={
            isShow:true
        }
    }
    render() {
        return (
            <div>
                <h1>我是组件</h1>
                <p>{this.props.test}</p>
                <button onClick={()=>{
                    //点击后可修改state值
                    this.setState({
                        isShow:!this.state.isShow,
                    })
                }}>点我</button>
                <p>{this.state.isShow}</p>
            </div>
        )
    }
}

组件的嵌套

这个意思实际上就是在一个组件里面可以用别的组件的意思。因此你可以把组件划分得比较细致,以便更多的复用。

class Parent extends Component{
    render() {
        //使用了MyComponent组件
        return <MyComponent test="我是props" />
    }
}

组件生命周期

在这里就说一下组件的生命周期函数吧

  • componentWillMount() {}组件挂载前
  • componentDidMount() {}组件挂载完执行
  • componentWillReceiveProps() {}组件更新数据时执行,propsstate
  • shouldComponentUpdate() {}组件需要更新时执行
  • componentWillUpdate() {}组件更新前执行
  • componentDidUpdate() {}组件更新后执行
  • componentWillUnmount() {}组件销毁前执行

下面一张图解释生命周期

当然想要暂时略过也不是不可,但日后需要了解。

更深入学习react

学完react,我们还需要知道react-router、redux等react全家桶。还在这推荐一个开源框架DVa.js。当然,这是融合的比较好的,如果学有余力不妨去了解了解

附上一张学习路线图,供大家学习参考

原文地址:https://www.cnblogs.com/kkdn/p/9328310.html

时间: 2024-10-13 01:21:03

快速入门react的相关文章

微服务的入门级微框架Spring Boot快速入门

详情请交流  QQ  709639943 00.微服务的入门级微框架Spring Boot快速入门 00.基于java的微信公众号二次开发视频教程 00.leetcode 算法 面试 00.北风网 零基础到数据(大数据)分析专家-首席分析师 00.快速上手JMeter 00.Jmeter 00.2017年Java web开发工程师成长之路 00.R语言速成实战 00.R语言数据分析实战 00.Python+Django+Ansible Playbook自动化运维项目实战 00.Java深入微服务

001-安装及快速入门【基于纯antd的基本项目搭建】

一.安装使用 1.1.安装 推荐使用 npm 或 yarn 的方式进行开发 npm install antd --save yarn add antd 1.2.浏览器引入 在浏览器中使用 script 和 link 标签直接引入文件,并使用全局变量 antd. 我们在 npm 发布包内的 antd/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css import { DatePicker } from 'antd'; ReactDOM

利用python 数据分析入门,详细教程,教小白快速入门

这是一篇的数据的分析的典型案列,本人也是经历一次从无到有的过程,倍感珍惜,所以将其详细的记录下来,用来帮助后来者快速入门! 数据的格式如下: 我们设定 一个trem or  typedef为一条标签,一行为一条记录或者是键值对,以此为标准! 下面我们来对数据进行分析: 数据集中一共包含两种标签[trem] and [typedef]两种标签,每个标签下边有多个键值对,和唯一的标识符id,每行记录以"/n"结尾,且每条标签下下有多个相同的键值对,for examble: is_a,syn

vue.js的快速入门使用

1. vue.js的快速入门使用 1.1 vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angular.js 官方网站: ? 中文:https://cn.vuejs.org/ ? 英文:https://vuejs.org/ 官方文档:https://cn.vuejs.org/v2/guide/ vue.js目前有1.x.2.x和3.x 版本,我们学习2.x版本的. 1.2 vue.js库的基本使用

懂一点前端—Vue快速入门

01. 什么是 Vue Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架,是当下很火的一个 JavaScript MVVM 库,是以 数据驱动和组件化 的思想构建的. MVVM 模式简述 下图不仅概括了 MVVM 模式 (Model-View-ViewModel),还描述了在 Vue.js 中 ViewModel 是如何和 View 以及 Model 进行交互的. ViewModel 是 Vue.js 的核心,它是一个 Vue 实例.Vue 实例是作用于某一个

笔记:Spring Cloud Zuul 快速入门

Spring Cloud Zuul 实现了路由规则与实例的维护问题,通过 Spring Cloud Eureka 进行整合,将自身注册为 Eureka 服务治理下的应用,同时从 Eureka 中获取了所有其他微服务的实例信息,这样的设计非常巧妙的将服务治理体系中维护的实例信息利用起来,使得维护服务实例的工作交给了服务治理框架自动完成,而对路由规则的维护,默认会将通过以服务名作为 ContextPath 的方式来创建路由映射,也可以做一些特别的配置,对于签名校验.登录校验等在微服务架构中的冗余问题

javaweb-html快速入门

本文主要是进行HTML简单介绍(详细的属性查帮助文档就行了,这里主要为快速入门,赶时间,在最短的时间中看明白一个html文件的代码(如果能称之为代码的话)详细的样式表,布局啥的有时间再研究吧) HTML 1.html的简介 1.1,html的全称:HyperText Mark-up Language ,超文本标记型语言,是网页的语言. 超文本:比文本更加强大(后面还会讲到XML,可扩展标记性语言) 标记:就是标签,html所有操作都是通过标签直接或间接的操作(把需要操作的数据通过标签封装起来)

crosswalk 快速入门,利用WebRTC(html)开始开发视频通话

crosswalk 快速入门,利用WebRTC(html)开始开发视频通话 安装Python 从http://www.python.org/downloads/ 下载安装程序 安装完后,再添加到环境变量. 安装Oracle JDK 下载页面: http://www.oracle.com/technetwork/java/javase/downloads/ 选择要下载的Java版本(推荐Java 7). 选择一个JDK下载并接受许可协议. 一旦下载,运行安装程序. 安装Ant Ant:下载http

bash编程快速入门

首先,我们简单的介绍一下bash,bash是GNU计划编写的Unixshell,它是许多Linux平台上的内定shell,它提供了用户与系统的很好的交互,对于系统运维人员,bash的地位是举足轻重的,bash编程能很快处理日常的任务 bash入门,一个最简单的bash例子 #vim hello.sh #!/bin/bash #This is the first example of the bash #echo "Hello world" 下面,我们就这个简单的bash 脚本来介绍一下