React如何快速上手

一、React概述

  英文官网：https://reactjs.org/

  中文网站：https://react.docschina.org/

  用于构建用户界面的 JavaScript 库（React只涉及JS，不涉及HTML/CSS），由Facebook在2013年5月开源，目前最新稳定版是v17.0.2。

  项目中使用React的两种方式：

①脚本引入式——简单直接，一般用于小型页面

②脚手架方式——适合于真正的大型项目开发

二、JSX

  JSX：JavaScript XML，使用XML语法创建JS对象的技术，等价于React.createElement() —— 本身是一种JS的语法变种，浏览器无法直接执行，必需Babel编译器的转化。

  语法要求如下：

  ①一段JSX可以用( )括起来，也可以不用 —— 推荐使用

  ②JSX采用严格的XML语法：一段JSX有且只有一个根标签

  ③JSX中所有的HTML标签都是一个变量名——这类变量名只允许用纯小写形式

  ④用户自定义组件名对应的标签必须以大写字母开头

 ⑤标签的属性必须使用单引号或双引号括起来

  ⑥一些特殊的属性名必须加以修改， 例如： class变为className

  ⑦JSX中“拼接”变量——本质是“数据绑定”，内容绑定和属性绑定语法完全一样

        <h1 title={age}> {age} </h1>

  ⑧JSX对象的样式绑定分为两种：

        className： 绑定为一个字符串即可

        style：不能赋值为字符串，必须绑定为一个“样式对象”，形如：{color:'red', backgroundColor: '#fff'}

  ⑨JSX可以绑定原生DOM事件，但是必须改为“小驼峰命名法”，并且赋值时必须绑定为函数

        <button onClick={ f2 }></button>

  ⑩JSX中可以声明注释，写法：{/* 注释内容 */}

三、React中自定义组件

 React中提供了两种创建自定义组件的语法：

语法1：函数式组件

        function 组件名( ){

                return (JSX)

        }

        let  el = (<组件名></组件名>)

 语法2：class式组件

        class 组件名  extends  React.Component {

          render(){

                        return (JSX)

                }

    }

    let  el  = (<组件名></组件名>)

一、React项目脚手架

  Vue.js为了方便开发者使用Vue.js的全部特性，提供了一个Vue-CLI工具，用于创建脚手架项目；

  React为了方便开发者使用React的全部特性，提供了一个create-react-app工具，用于创建脚手架项目；