react入门教程

React入门教程

React是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。JSX是JavaScript 的语法扩展，所以其也具有JavaScript 的全部功能，并且建议在React框架中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。

React的特点：

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

一、React的安装与创建

1、全局安装脚手架

npm i create-react-app -g

2、创建项目

create-react-myreact

3、进入项目目录

cd/myreact

二、React的目录的结构介绍

三、组件与Props

组件

组件是React框架中最重要的概念之一，在博客最开始的时候也提到这个词，现在来详细的此概念。
组件的概念：组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。
在React框架里有两种组件：函数组件和类组件

函数组件如下图:

 类组件如下图:

由上面的代码对比不难发现，函数组件适用于较为简单的功能组件，而类组件就适用于较为复杂的功能组件，类组件将在下一部分state和生命周期中具体讲解。
注意：为了更有效的区分普通函数与函数组件，所有的组件名称必须以大写字母开头。

Props：

这是由React内部包装设置的一个用于传递数据的参数，Props最大的特点就是read only，即Props只能被读取使用但是不能被修改。

四、jsx语法

1、jsx语法

        javascript混合xml(html)语法格式，目的是更好的在javascript中写html模板

2、jsx的特点:

        1.只有一个根节点
        2.{}写javascript
        3.数组里面可以直接写html标签
        4.对象样式自动展开
        5.注释使用javascript的
        6.类名用className

五、事件处理

React元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

• React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

React元素的事件处理中this绑定的三种方式：