React-学习笔记（1-简单使用）

目录

1、用script标签引入三个库

 2、最简单的使用例子

3、创建虚拟 dom 的两种方式（js、jsx）

（1）、使用js创建

（2）、使用jsx创建

4、JSX的基本语法

---

1、用script标签引入三个库

        react、react-dom、babel

    <!-- 这两个是有顺序要求的，第一个是核心库，第二个是用于给react操作dom的 -->
    <!-- 核心库在前，react-dom 在后 -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 用于将jsx转成js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>  

 2、最简单的使用例子

    <!-- 创建一个容器 -->
    <div id="test"></div>
    <!-- 此处写的是babel 表示要用babel将jsx转成js -->
    <script type="text/babel">
        // 创建虚拟dom    等号后面不要写引号，需要换行则用花括号包裹起来
        const VDOM = <h2>Hello React</h2>
        // 第一个是自己创建的虚拟dom，第二个是指定的容器，
        // 会将虚拟dom转换成真实dom并作为子元素插入到指定的容器内
        ReactDOM.render(VDOM, document.getElementById('test'));
    </script>

3、创建虚拟 dom 的两种方式（js、jsx）

（1）、使用js创建

        使用 React.createElement(type, props, [...children]) 来创建新的元素。

        type ：String 指定当前标签的类型，如div、p；

        props ：Object 指定当前标签的属性，如类名 className (注意不是class)；

        children ：dom元素  指定当前标签的孩子元素。

    <script>
        const span = React.createElement('span',{className:'span'},'Hello,React');
        const p = React.createElement('p',{id:'passage'},span);
        ReactDOM.render(p, document.querySelector('#test'));
    </script>

    <script>
        const div1 = React.createElement('div',{},'Hello,React');
        const div2 = React.createElement('div',{},'Hello,Vue');
        const div3 = React.createElement('div',{},'Hello,World');
        const DIV = React.createElement('div', {id:'passage'}, div1, div2, div3);
        ReactDOM.render(DIV, document.querySelector('#test'));
    </script>

（2）、使用jsx创建

    <script type="text/babel">
        const vdom = (
            <p id="passage">
                <span class="span">Hello React</span>    
            </p>
        );
        ReactDOM.render(vdom, document.querySelector('#test'));
    </script>

4、JSX的基本语法

 （1）、script 标签里面若要使用jsx，则需要使用 babel 来解析

// 在 head 中引入 babel
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>  

<script type="text/babel"></script>

（2）、定义虚拟 dom 时，右边jsx标签内容不要用引号包裹，如需要换行则用圆括号将全部内容包起来写。

（3）、一个虚拟dom，只能有一个根标签，如下方的p就属于只有一个根标签（即p）。每一个标签都需要闭合（如下方的input）。

const vdom = (
    <p className="set-background">
        <span style={{fontSize:'1rem',fontWeight:'600'}}>hello react</span>
        <input type="text"/>
    </p>
);

（4）、若标签是小写字母开头，则jsx在将标签转化成html时，将该标签与html中的标签相对应转换；如果是大写字母开头，则会认为是React的组件。

（5）、若要添加类属性值，类属性的名称 class 变为 className（如上）。

（6）、若要设置内联样式（style），要使用双花括号的格式，且外侧不需要用引号包裹（如上）。

（7）、若jsx中混入变量、js表达式等，则需要使用一对花括号包裹起来。（如下）

const colorArr = ['set-color-1','set-color-2','set-color-3'];
const text = 'Hello React';
const vdom2 = (
    // 6、jsx 中混入变量、js表达式等，需要用单括号括起来
    <h2 className={colorArr[1]}>
        {text.toUpperCase()}
        <span className='class-name'>1234</span>
    </h2>
);

 （8）、若将一个数组放入花括号中，则 jsx 会自动遍历处理

const dataArr = ['苹果','菠萝','香蕉','葡萄'];
const vdom = (
    <div>
        <div>
            // 直接放一个数组
            {dataArr}
        </div>
        <select>
            {
                // 利用原有数组内容构造出一个所需要的标签数组
                dataArr.map((e,index)=>{
                    return <option key={index}>{e}</option>
                })
            }
        </select>
    </div>
);
ReactDOM.render(vdom, document.querySelector('#test'));