react快速入门＜有vue基础＞

前文：

本文章适合有vue基础，同时有想接触react框架的的小伙伴

正文

一 . jsx组件

不同与vue的编程方式，一个vue文件里有<template>来写html, <script>来写js,<style>写css。

react使用jsx文件来作为主要编程，JSX是JavaScript的一种语法扩展，类似于XML的标签来描述用户界面，

有点抽象哈，看代码

function Hello(){

return ( <div>Hello World</div> )

}

function App() {

<Hello/> //组件首字母需大写，以区别函数

}

export default App

这种编程方式使react较vue更加灵活，基于这种函数式编程，react就可以创建不同的jsx组件

然后引入，接下来操作就和vue一样了

二. Css 引入方式

React通过函数式编程创建组件，当然纯html是不行滴，还需要css来排版

有两种比较不推荐的方式就是css外部引入和在组件上设置style,前者因为react没有scoped所以会导致其他组件被影响，后者会使代码看起来很杂，没品。

所以在这不废话，直接第三种react独有的module.css方式

这种方式同时也有vue scoped的功效，不用担心污染组件。同时在这个基础上可以使用scss,less，自己配置就行了

补充：react还有Styled-component来引入css，但本人感觉该操作实属太骚了，有点本末倒置，有兴趣的小伙伴可以了解下

三. 响应式数据

好了，有了上面两个利器，已经可以还原vue的大部分操作了，但为了方便，还是要讲下react中的响应式数据。

我们都知道vue中可以通过ref来定义响应式数据，嘎嘎好使。而react的操作如下

import { useState } from 'react'

function Hello(){

return ( <div>Hello World</div> )

}

function App() {

const [Mealsdata, setMealsdata] = useState("hello world")

<Hello/> //组件首字母需大写，以区别函数

}

export default App

这段代码使用useState 可以定义响应式数据Mealsdata，同时setMealsdata作为方法可以修改Mealsdata，这里运用了es6的解构

四. 传值

vue中的传值很多emit props，父传子，子传父，兄弟互传.....

而react比较简单粗暴

父组件

import Hello from "./Hello.jsx"

function App() {

<Hello mes="13454">

<div>传值<div>

</Hello> //组件首字母需大写，以区别函数

}

export default App

子组件

export default function Hello(props){

return ( <div>Hello World</div> )

}

函数中的props就包含了父组件传来的 mes , <div>传值<div>。

没错，由于react函数式编程，连html也可以传！！！ 基于这个vue里的传值操作也可以实现，而且可以实现vue里的插槽，小伙伴可以自己去尝试下

其他

Usecontext: 有些像vue里的provide,inject。减去了一个一个在子孙传递的过程了

useRef ：用来操作dom

.........

挂个react中文文档吧，各位可以自己看看

https://react.docschina.org/learn/tutorial-tic-tac-toe

后文

本人现在只是一只大二的学生崽（抱歉，现在才说哈），不出意外的话上面可能，或许，大概是有那么一丢丢的错误，大家可以指出来，勿喷谢谢。。。。。。。