React的安装和使用

最新推荐文章于 2024-07-16 15:58:40 发布

Learn-anything

最新推荐文章于 2024-07-16 15:58:40 发布

阅读量311

点赞数

分类专栏： React 文章标签： node.js javascript

本文链接：https://blog.csdn.net/fanlehai/article/details/121349621

版权

本文详细介绍了React的基本安装和使用方法，包括如何在HTML中直接使用React、使用JSX，以及通过Create React App、Next.js和Gatsby创建React项目。通过实例展示了React在不同场景下的应用。

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

一、React库说明

React库包含两部分：1、React包含了所有基本功能；2、ReactDOM只包含了操作DOM的功能。

1、加载React库

# 1、用<script>加载
开发版：<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
发布版：<!-- <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>

# 2、ES5 和 npm 环境中用require
var React = require('react')

# 3、ES6 和 npm 环境中用import
import React from 'react'

2、加载ReactDOM库

# 1、用<script>加载
开发版： <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
发布版：<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

# 2、ES5 和 npm 环境中用require
var ReactDOM = require('react-dom')

# 3、ES6 和 npm 环境中用import
import ReactDOM from 'react-dom'

二、HTML中使用React

只用浏览器原生支持特性来加载使用React，此种方式适合项目演示和学习用。

1、HTML配置React环境

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
</head>

<body>

    <!-- 第一步：设置父容器 -->
    <div id="like_button_container"></div>

    <!-- 第二步：加载开发版本的React -->
    <script src="https://unpkg.com/react@16/umd/re

最低0.47元/天解锁文章

Learn-anything

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React的安装和使用

一、React库说明React库包含两部分：1、React包含了所有基本功能；2、ReactDOM只包含了操作DOM的功能。1、加载React库# 1、用<script>加载开发版：<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>发布版：<!-- <script src="https://unpkg.com/react@16
复制链接

扫一扫

专栏目录