好客租房3-React的基本使用

简介: 好客租房3-React的基本使用

2.1React的安装

安装命令:npm i react react-dom

react 包是核心,提供创建元素,组件等功能

react-dom包提供DOM相关功能等

2.2React的使用

1引入react和react-dom两个js文件

    <!-- 第一步 引入模块 -->

        <script src="../node_modules/react/umd/react.development.js"></script>

        <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>

2创建React元素

   //第二步创建react元素

        //参数1:元素名称

        //参数2:元素属性

        //参数3:元素的子节点

        const title=React.createElement('h1',null,"Hello geyao")

3渲染react元素到页面中

   //第三步渲染react元素

        //参数1:要渲染的react元素

        //参数2:挂载点

        ReactDOM.render(title,document.getElementById("root"))

相关文章
|
6月前
|
存储 前端开发 JavaScript
第三十章 React的路由基本使用
第三十章 React的路由基本使用
|
5月前
|
前端开发 JavaScript API
React小记(四)_路由的基本使用
React小记(四)_路由的基本使用
42 1
|
6月前
|
前端开发 JavaScript
React中react-redux的基本使用
React中react-redux的基本使用
|
6月前
|
前端开发
React createContext 与 useContext 的基本使用
React createContext 与 useContext 的基本使用
200 0
|
存储 前端开发 JavaScript
React的诱惑: React-Redux-三大原则和React-Redux-基本使用、优化、综合运用、其他组件使用
React的诱惑: React-Redux-三大原则和React-Redux-基本使用、优化、综合运用、其他组件使用
41 1
|
前端开发
React createContext 与 useContext 的基本使用
React createContext 与 useContext 的基本使用
61 0
|
前端开发 C# C++
掌握React的基本使用,重塑前端开发
React change the way that Web apps should be build. UI -> Web apps 四步: Break The UI Into A Component Hierarchy 将UI结构拆解成组件结构 Build A Static Version in React It’s best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requi
126 0
掌握React的基本使用,重塑前端开发
|
XML 前端开发 JavaScript
React 基本使用和 JSX 语法
本文简单介绍了 React 是什么,以及使用官方脚手架工具,快速启动了一个 React 项目, 并演示了一个核心方法 `createElement` 方法的使用。同时简单介绍了 JSX 语法的基本使用。
183 0
|
6月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
351 0
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
119 0