React的基本使用,及create-react-app介绍

最新推荐文章于 2024-05-16 23:30:33 发布

ProbeGene

最新推荐文章于 2024-05-16 23:30:33 发布

阅读量594

点赞数

分类专栏： React 文章标签： React基础用法 React怎么条件渲染 React

本文链接：https://blog.csdn.net/yangyang_A/article/details/107664836

版权

本文介绍了React的基础语法，包括React.createElement和ReactDOM.render的使用，详细讲解了条件渲染的方法，如三元运算符和逻辑运算符，并探讨了React组件的创建，包括函数式组件和类组件。此外，还阐述了create-react-app脚手架的安装和StrictMode的作用。

摘要由CSDN通过智能技术生成

文章目录

React基础语法

React基础语法

如何使用React

React.js 提供了React.js核心功能的代码, 如: 虚拟 dom的创建.
- React.createElement(type,props,children);
ReactDOM提供了与浏览器交互的 DOM 功能, 如 dom 渲染
- ReactDOM.render(element,container,[,callback])
  - element: 要渲染的内容
  - container: 挂载的容器
  - callback: 渲染完成后的回调函数
babel
- babel-standalone.js: 在浏览器中处理JSX. 如果不基于脚手架使用 react 中 jsx语法的时候, 需要引入babel 库, 并且声明script 标签的type类型为 text/babel

React的基础使用

React 的使用,需要引入 React 和 ReactDOM 这两个核心库.

演示代码如下:

🚩 注意: 在createElement 创建元素的时候, children内容不可以直接写标签, 而是需要再次通过 createElement 方法创建子标签.

# 如 下面这样写是错误的
React.createElement('h1',{
    id:1},<div>children内容</div>)
                    
# 如果children参数需要时标签内容, 应该调用createElement创建标签, 如下面写才是正确的.
React.createElement('h1',{
    id:1}, React.createElement('p',{
    id:2},'P标签里的内容'));

React.createElement和ReactDOM.render()方法的使用案例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入react.js -->
    <script type="text/javascript" src="./js/react.js"></script>
    <!-- 引入react-dom.js -->
    <script type="text/javascript" src="./js/react-dom.js"

最低0.47元/天解锁文章

ProbeGene

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React的基本使用,及create-react-app介绍

文章目录React基础语法如何使用ReactReact的基础使用React中的条件渲染React脚手架 create-react-app安装 create-react-app脚手架React中的组件函数式组件类组件StrictMode 模式StrictMode模式的作用StrictMode具体使用setState 更改状态数据的方法props 和stateprops和state的区别React基础语法如何使用ReactReact.js 提供了React.js核心功能的代码, 如: 虚拟 dom的创建
复制链接

扫一扫

专栏目录