02、react的介绍和安装脚手架

一、react的介绍
在这里插入图片描述
react是React.js 是一个帮助你构建页面 UI 的库,React 的组件就相当于 MVC 里面的 View,React.js 帮助我们将界面分成了各个独立的组件,这些组件之间可以组合、嵌套,就成了我们的页面。

一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的,这时候组件的显示形态就会发生相应的改变。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。

React.js 不是一个框架,它只是一个库。它只提供 UI (view)层面的解决方案。在实际的项目当中,它并不能解决我们所有的问题,需要结合其它的库,例如 Redux、React-router 等来协助提供完整的解决方法。

二、react脚手架的安装
官方安装方法:

在这里插入图片描述
方法二:
yarn global add create-react-app
create-react-app my-app

### 安装React脚手架工具的步骤 安装React脚手架工具通常使用官方提供的 `create-react-app`,它为开发者提供了开箱即用的项目结构配置。以下是详细的安装步骤: #### 1. 安装 `create-react-app` 可以通过 `npm` 或 `yarn` 安装 `create-react-app`,具体命令如下: ```bash npm install -g create-react-app ``` 或者使用 `yarn`: ```bash yarn global add create-react-app ``` #### 2. 创建项目 安装完成后,可以通过以下命令创建一个新的React项目: ```bash create-react-app my-app ``` 其中 `my-app` 是项目的名称,可以根据需要替换为其他名称。项目名称需要遵循 npm 包命名规范:使用数字、小写字母短横线命名,不出现特殊符号、中文或大写字母。 #### 3. 进入项目目录并启动 创建项目后,进入项目目录并启动开发服务器: ```bash cd my-app npm start ``` 或者使用 `yarn`: ```bash cd my-app yarn start ``` #### 4. 检查版本 如果需要检查 `create-react-app` 的版本,可以运行以下命令: ```bash create-react-app --version ``` #### 5. 指定React版本 如果需要安装特定版本的React,可以通过以下命令进行局部安装: ```bash npm install react@17.0.2 react-dom@17.0.2 --legacy-peer-deps ``` 安装完成后,需要修改 `src/index.js` 文件以适应指定版本的React。例如,对于React 17,可以使用以下代码: ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); ``` ### 项目结构解析 使用 `create-react-app` 创建的项目,默认包含以下核心依赖: - **React**:React的核心库。 - **React-DOM**:用于在Web应用中渲染React组件。 - **React-Scripts**:封装了Webpack配置其他构建工具的脚本。 `package.json` 文件中包含了一些重要的配置项,例如: ```json "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" } ``` 其中 `eject` 命令可以暴露Webpack的配置文件,但此操作是不可逆的。 ### 常见命令 - **启动项目**:`npm start` 或 `yarn start` - **打包项目**:`npm run build` 或 `yarn build` - **暴露Webpack配置**:`npm run eject` 或 `yarn eject` 这些步骤命令可以帮助开发者快速搭建一个基于React的项目,并根据需要进行定制化配置[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值