React入门-React的特点，React脚手架搭建工程

Zxy-9

已于 2022-04-19 13:51:23 修改

阅读量839

点赞数

分类专栏： react 文章标签： react

于 2022-04-19 13:50:12 首次发布

本文链接：https://blog.csdn.net/weixin_45439010/article/details/124271916

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

React的特点

轻量：React的开发版所有源码（包含注释）仅3000多行
原生：所有的React的代码都是用原生JS书写而成的，不依赖其他任何库
易扩展：React对代码的封装程度较低，也没有过多的使用魔法，所以React中的很多功能都可以扩展。
不依赖宿主环境：React只依赖原生JS语言，不依赖任何其他东西，包括运行环境。因此，它可以被轻松的移植到浏览器、桌面应用、移动端。
渐近式：React并非框架，对整个工程没有强制约束力。这对与那些已存在的工程，可以逐步的将其改造为React，而不需要全盘重写。
单向数据流：所有的数据自顶而下的流动
用JS代码声明界面
组件化

Hello World

直接在页面上使用React，引用下面的Js

创建一个html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <!-- React的核心库，与宿主环境无关 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 依赖核心库，将核心的功能与页面结合 -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 编译JSX -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        
        ReactDOM.render(<h1 title="第一个React元素">Hello World <span>一个span元素</span></h1>, document.getElementById("root"));  //渲染dom节点
    </script>
</body>

</html>

目前一般都不会直接使用上述这种方法去写代码，如果之前有学过vue的小伙伴应该知道脚手架，下面是使用脚手架搭建工具的步骤

使用脚手架搭建工程

官方：create-react-app 功能齐全，但不是很好用，比较麻烦
第三方：next.js、umijs

凡是使用JSX的文件，必须导入React

安装官方脚手架

npm install -g create-react-app 
npx create-react-app my-app  
cd my-app/  
npm start

注意，这里的node版本是有要求的，我之前使用的是12.12.0的版本，会报错，后来切换到17.8.0的版本后，可以正常使用，这里推荐nvm管理控制工具，可以直接安装后切换node版本，防止卸载重装问题。如果还是报错，可以执行npm cache clean -force命令清除缓存，再进行创建项目。

看到下图就意味着已经成功创建项目。

在这里插入图片描述

下面可以更改src中的index.js文件，可以将别的东西都删除，直接使用引入的react和reactDOM

import React from 'react';
import ReactDOM from 'react-dom'; //这里原本写的是import ReactDOM from 'react-dom/client'，注意甄别

ReactDOM.render(<h1 title="第一个React元素">Hello World <span>一个span元素</span></h1>, document.getElementById("root"));

Zxy-9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React入门-React的特点，React脚手架搭建工程

React的特点轻量：React的开发版所有源码（包含注释）仅3000多行原生：所有的React的代码都是用原生JS书写而成的，不依赖其他任何库易扩展：React对代码的封装程度较低，也没有过多的使用魔法，所以React中的很多功能都可以扩展。不依赖宿主环境：React只依赖原生JS语言，不依赖任何其他东西，包括运行环境。因此，它可以被轻松的移植到浏览器、桌面应用、移动端。渐近式：React并非框架，对整个工程没有强制约束力。这对与那些已存在的工程，可以逐步的将其改造为React，而不需要全盘重
复制链接

扫一扫