React基础教程:react脚手架

1、create-react-app

全局安装create-react-app

bash 复制代码
npm install -g create-react-app

安装成功之后,通过命令create-react-app -V检查是否安装成功

创建一个项目

bash 复制代码
create-react-app my-app

如果不想全局安装,可以直接使用npx,也可以实现相同的效果

bash 复制代码
npx create-react-app my-app

这需要等待一段时间,这个过程实际上会安装三个东西:

  1. 【react】:react的顶级库。
  2. 【react-dom】:因为react有很多的运行环境,比如app端的react-native,我们要在web上运行就使用react-dom。
  3. 【react-scripts】:包含运行和打包react应用程序的所有脚本及配置。

如果看到以下内容,就说明安装成功了

常见问题:npm安装失败

  • 切换为npm镜像为淘宝镜像

    bash 复制代码
    npm i -g nrm
    bash 复制代码
    nrm ls
bash 复制代码
nrm use taobao

nrm ls

2、编写第一个react应用程序

react开发需要引入多个依赖文件:react.jsreact-dom.js,分别又有开发版本和生产版本,create-react-app已经帮我们把这些东西安装好了。把通过CRA创建的额工程目录下的【src】目录清空,然后在里面重新创建一个index.js写入以下代码:

js 复制代码
import React from "react";
import ReactDOM from 'react-dom';

ReactDOM.render(<div>
    <p>Team Suns</p>
    <ul>
        <li>杜兰特</li>
        <li>布克</li>
        <li>比尔</li>
    </ul>
</div>, document.getElementById('root'))
相关推荐
百***588415 分钟前
Redis 通用命令
前端·redis·bootstrap
Liu.77422 分钟前
vue3 路由缓存导致onMounted无效
前端·javascript·vue.js
e***U8201 小时前
React Hooks性能优化
前端·react.js·前端框架
4***R2401 小时前
React数据分析
前端·react.js·前端框架
X***E4631 小时前
React课程
前端·react.js·前端框架
4***99741 小时前
React音频处理案例
前端·react.js·音视频
1***81531 小时前
React组件
前端·javascript·react.js
6***3491 小时前
Vue混合现实案例
前端·vue.js·mr
p***43481 小时前
Vue混合现实开发
前端·vue.js·mr