React入门## React是什么？ React是目前最受欢迎的前端框架之一，它其实就是用于构建用户界面的JS库。Re

React是什么？

React是目前最受欢迎的前端框架之一，它其实就是用于构建用户界面的JS库，起源于脸书的内部项目，在13年开源了出来。

特点

虚拟DOM：React使用了虚拟Dom，他在内存中构建了虚拟Dom树，减少了对实际Dom的操作，提高了性能。
组件化开发：组件是React的一等公民。组件表示页面中的部分内容，每个组件都有自己的状态和属性。提高了代码的复用性和更好的维护性，方便团队协作开发。
单向数据流：React是单向数据流的架构。数据是单向流动的，从父组件传给子组件，子组件不能直接修改父组件的数据，减少了数据的复杂性，提高了代码的可维护性。
JSX语法：是一种将html和JS结合的语法，它使代码更直观易读，也方便了组件的复用和组合，提升开发效率，但是JSX不是标准的ECMAScript语法，它是ECMAScript的语法扩展。
生态系统丰富：React拥有庞大的生态系统，有大量的第三方库和工具可以配合使用，如路由管理/状态管理/打包工具等。这些库和工具可以提高开发效率，加速项目开发进程。
社区活跃：React拥有庞大的开发者社区，社区活跃度高，有大量教程、文档、示例代码可供参考。开发者可以通过社区获取帮助、分享经验，加速问题的解决和技术的学习。

安装React

基于node环境安装：(也可以用yarn等其他工具打包，我电脑上用的node环境)

npm init -y

npm i react

npm i react-dom

react包是核心，提供创建元素、组件等功能。react-dom包提供了DOM相关功能。

React简单使用

先引入两个JS文件

<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

创建React元素

//创建元素节点
//1、元素名字
//2、元素属性 （传递的是个对象）
//3、元素内容
let title = React.createElement('h1',null,'hello Word')

渲染到页面

ReactDOM.render(title, document.getElementById("root"))

在html中创建一个盒子ID为'root'就可以显示啦

不过现在我们基本不用这种写法，而是使用React脚手架。

React脚手架

脚手架是开发现代WEB的必备，可以充分利用各种工具辅助项目开发，无需手动配置繁琐的工具即可使用。

使用脚手架初始化项目

//初始化项目，命令：
npx create-react-app my-pro

启动项目，在项目根目录执行命令： npm start

在脚手架中使用React

先导入react两个包

import React from 'react'
import ReactDOM from 'react-dom'

创建元素并渲染到页面

//创建元素
let h1 = React.createElement('h1',null,'我是标题')
//渲染到页面
ReactDOM.render(h1,document.getElementById('root'))

JSX的使用

JSX是JavaScript XML 的简写，表示在JavaScript代码中写HTML格式的代码

优势：声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率

JSX简单入门

使用JSX语法创建react元素

let h1 = <h1>这是通过JSX创建的元素</h1>
//使用ReactDOM来渲染元素
ReactDOM.render(h1,document.getElementById('root'))

使用JSX注意：

React元素的属性名使用驼峰命名法
特殊属性名：class -> className，for -> htmlFor，tabindex -> tabIndex
如果没有子节点的React元素可以用 /> 来结束
推荐：使用小括号包裹JSX，从而避免JS中自动插入分号报错

JSX语法

嵌入JS表达式

这里直接举例表达更直观：

let content = '插入的片段'
let h1 = <h1>这是通过JSX创建的元素 + {content}</h1>

条件渲染

根据不同的条件来渲染不同的JSX结构

let isLoading = true
let loading=()=>{
    if(isLoading){
          return <div>Loading....</div>
    }
    return <div>加载完成</div>
}

列表渲染

如果要渲染一组数据，这里应该使用数组的map方法注意：列表渲染的时候应该添加key属性，key属性的值要保证唯一原则：map遍历谁，就给谁添加key属性

let arr = [{
    id:1,
    name:'三国演义'
},{
    id:2,
    name:'水浒传'
},{
    id:3,
    name:'西游记'
},{
    id:4,
    name:'红楼梦'
}]
let ul = (<ul>
       {arr.map(item=> <li key={item.id}> {item.name}</li>)}
   </ul>)
ReactDOM.render(ul,document.getElementById('root'))

JSX小结

JSX是React的核心内容
JSX表示在JS代码中写HTML结构，是React声明式的体现
使用JSX配合嵌入的JS表达式、条件渲染、列表渲染、可以描述任意UI结构
推荐使用className的方式给JSX添加样式
React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能

React组件

组件的创建方式

1、函数创建组件

函数组件：使用JS的函数创建组件
约定1： 函数名称必须以大写字母开头
约定2： 函数组件必须有返回值，表示该组件的结构
如果返回值为null，表示不渲染任何内容

示例：

function Hello() {
    return (
        <div>这是第一个函数组件</div>
    )
}

利用ReactDOM.render()进行渲染

ReactDOM.render(<Hello />,document.getElementById('root'))

2、类组件⭐⭐⭐

使用ES6语法的class创建的组件
约定1：类名称也必须要大写字母开头
约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性
约定3：类组件必须提供 render 方法
约定4：render方法中必须要有return返回值

示例：

    render(){
        return (
            <div>这是第一个类组件</div>
        )
    }
}

通过ReactDOM进行渲染

ReactDOM.render(<Hello />,document.getElementById('root'))

3、把组件放到单独的JS文件中⭐⭐⭐

组件作为一个独立的个体，一般都会放到一个单独的JS文件中示例：创建一个单独的JS文件，导入React，创建组件，在文件中导出

export default class extends React.Component {
    render(){
        return (
            <div>单独抽离出来的 Hello</div>
        )
    }
}

在index.js中导入组件，渲染页面

import Hello from './js/Hello'
ReactDOM.render(<Hello />,document.getElementById('root'))

有状态组件和无状态组件

函数组件又叫做无状态组件，类组件又叫做有状态组件
状态(state) 即数据
函数组件没有自己的状态，只负责数据展示
类组件有自己的状态，负责更新UI，让页面动起来

React事件处理

事件绑定

React事件绑定语法与DOM事件语法相似
语法：on+事件名称=事件处理函数，比如 onClick = function(){}
注意：React事件采用驼峰命名法

示例：

    clickHandle(e){
        console.log('点了')
    }
    render(){
        return (
            <div><button onClick = {this.clickHandle}>点我点我点我</button></div>
        )
    }
}

在React中支持的事件比较多

Clipboard Events 剪切板事件

compositionEvent 复合事件

Keyboard Events 键盘事件

Focus Events 焦点事件

Mouse Events 鼠标事件。。。。

可以去查阅React文档细节不再一一介绍。

大家好，我是刚开始学习React的前端小白，这是我第一篇文章，文中不足之处各位大佬多多指点。希望在掘金可以和大家共同进步。