首页 > 其他分享> > react介绍和安装+小案例

react介绍和安装+小案例

2021-04-26 14:29:32 作者：互联网

react介绍和安装

一.介绍

react是由Facebook公司前端开发团队进行开和维护

定义.

用于构建用户界面的 JavaScript 库

特点:

react是基于组件化进行开发
react中由数据驱动和视图渲染来构建单页面应用
react中没有基本的指令,计算属性,监听器.过滤器等等
react中没有自动的数据双向绑定
React 是react.js的核心.
ReactDOM 是react-dom.js的核心

二.下载安装

方式一:

<!-- 
        2.引入react
        1.引入react.js
        2.react-dom.js
        3.development: 开发环境中使用
     -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

方式二:

npm init    #初始化
npm i react --save  #安装react

三.核心对象及方法介绍

React

React是react.js的核心对象

React.createElement('创建的元素',{属性集合},文本内容)

ReactDOM

ReactDOM是react-dom.js的核心对象

ReactDOM.render(元素对象,渲染到元素作用域范围)

四.案例

体验demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        2.引入react
        1.引入react.js
        2.react-dom.js
        3.development: 开发环境中使用
     -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
    <!-- 1.创建一个容器 -->
    <div id="container">

    </div>
    <script>
        // 1.React
        /**
        1.React.createElement()   #创建一个元素
        2.参数一: 创建的元素
        3.参数二: 属性集合
        4.参数三: 文本内容
        */
        // React.createElement('创建的元素',{属性集合},文本内容);
        const h1 = React.createElement('h1',{title:'react',style:{background:'aqua',color:'red',border:'1px solid orange'}},'第一次学习react');
        // console.log(h1);

        // 2.ReactDOM
        /**
         * 1.ReactDOM.render()      #将元素对象成功的渲染到视图
         * 2.参数一: 元素对象
         * 3.参数二: 渲染到元素作用域范围
        */
    //    ReactDOM.render(元素对象,渲染到元素作用域范围)
        ReactDOM.render(h1,document.querySelector('div'));
    </script>

</body>
</html>

嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        2.引入react
        1.引入react.js
        2.react-dom.js
        3.development: 开发环境中使用
     -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
    <!-- 1.创建一个容器 -->
    <div id="container">

    </div>
    <script>
        const h2 = React.createElement('h2',{title:'新闻列表'},'新闻列表');
        const img = React.createElement('img',{src:'./images/nanshidiao.jpg'},null);
        const div = React.createElement('div',{className:'main'},h2,img);
       
        ReactDOM.render(div,document.querySelector('#container'))
    </script>

</body>
</html>

标签：React,render,元素,react,案例,createElement,安装,ReactDOM
来源： https://blog.csdn.net/zhangyiyang111/article/details/116154623