React安装与创建项目

介绍

React是用于构建用户界面的JavaScript库， [1]  起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。

框架用途

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

框架特点

1.声明式设计：React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件

2.组件化: 构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。

3.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。

4.灵活：无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。

React官方网址

​​​​​​React – A JavaScript library for building user interfaces

正文

React安装

1.安装脚手架：npm i -g create-react-app

 2.创建react项目：create-react-app 项目名

创建成功

  

3.启动项目 

 

 React项目说明

React基础使用

 

JSX语法

JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言。

JSX实际上只是JavaScript的一种语法糖，能让我们更方便的在JavaScript中书写node节点，让我们更为直观地看到节点的结构

JSX规则与用法

模板渲染

1.文本渲染

写法1  文本渲染{}

写法2  html文本渲染：dangerouslySetInnerHTML={{ __html: this.state.msg }}

 2.条件渲染

写法1  三元运算符：条件？<>:<>
写法2  &&符号：{{条件&&<>}}

3.列表渲染

 事件

特点

1.方法名称：
React中采用了驼峰命名法，从第二个单词的字母开始大写
原生js的写法是全部小写
vue中是通过v-on:加上触发事件（也是全小写的，但是没有on）
2.传值：
React中事件接受的值是一个方法，需要用{}包裹起来
原生js的事件接受的值是一个字符串
vue中的事件接受的值是一个字符串（方法名称）

事件的使用

1.普通事件

2.传参事件

 

3.bind传参

 更新状态State

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

有两个参数，this和回调函数，回调函数一般不写

                                                                                                              小白编写，仅供参考