React的入门资料持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情前言

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

前言

最近部门业务调整，需要从Vue转到React。但是没有学习过React怎么办呢，只能是打开官网去看语法了。

React是什么

React是构建用户界面的JavaScript库.声明式将数据渲染在页面上。

优点

1.原生操作dom频繁，效率低，但是react是声明式的，只要数据被修改了，会自动渲染到UI层

2.回流重绘会增加，react使用的是虚拟dom，不会去修改数据没有发生变化的dom元素

3.原生的写法复用性极低，react是以组件作为粒度的，并且内部有自己的状态

React入门

首先咱们得准备几个CDN连接

<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

2.创建一个承载组件的dom容器

    <div id="app"></div>

3.创建react组件，并将其渲染到容器之中

<script type="text/babel">
    const app = document.querySelector("#app");
    ReactDOM.render(<h1>111</h1>, app);
</script>

这样就会在页面中渲染出h1标签的内容和样式了

JSX基础语法

react提供了两种创建组件的方式。第一个是使用原生的js写法，第二个是jsx语法

原生js语法

script type="text/babel">

    const app = document.querySelector("#app");
    // const dom = <h1>11111</h1>
    const dom = React.createElement("h1","","1111111")
    ReactDOM.render(dom, app);
</script>

JSX语法

上述我们采用的就是jsx语法

使用JS和JSX都可以创建虚拟DOM，但是可以看出JS创建虚拟DOM比较繁琐，尤其是标签如果很多的情况下，所以还是比较推荐使用JSX来创建。

1.在jsx中使用变量需要用{}包裹，2.jsx也是一个表达式，可以在{}使用js的语法，3.样式class需要用className代替，4.只能含有一个根标签，5.标签必须闭合，6.在一些特定的属性上必须使用小驼峰命名方式