React 脚手架

  React 脚手架,来让我们快速的搭建起来一个 React 的项目

  1. 全局安装 React 的脚手架

    npm i -g create-react-app

  2. 创建项目

    create-react-app 项目名

  3. 进行项目指令:

    cd 项目名

  4. 运行项目:

    npm start 

  这样我们 React 脚手架的项目搭建就完成了

  接下来,让我们看看 React 脚手架,给我们下载的目录

  

 

   现在我们就来看看每个文件的功能:

  首先来看 README.md 文件,这里是对我们 React 脚手架的指令的一个介绍,尤其要关注一个指令,npm run eject 

  因为我们的 React 脚手架的配置文件时隐藏的,我们可以通过 npm run eject 来让隐藏的配置文件展现出来,然后我们可以加一些自己喜欢的配置

  src 下面的目录

    App.css:是所以组件的样式

    index.css:是整个网页的全局样式

    App.js:是最大的组件

    index.js:出口文件

    App.test.js:将 App 组件的内容渲染到页面上来

  在这里,我们的图片地址,如果是通过相对路径来获取的都不能直接的在 src 属性上面输入,而是应该通过 import 来引入此图片,之后通过 src={} 的方式,来引入,否则报错

  组件中需要引入的图片,不能放在 public 中,而是应该放在 src 中,且相对组件的引入方式  (图片引入的两种情况,1、相对组件,2、相对 index.html 中)

  添加自组件的方法:

  首先:我们在 src 下面创建一个专门放一个子组件的文件夹

    heads 文件夹里面就是我们的 Heads 的组件

    

 

     heads.js 的写法

    

    heads.css (则就是普通的 css 写法)

    

 

   然后我们的组件将创建好了,接下来我们就要在父组件中引入子组件了

    

   render 函数中,return 返回的是模板,所以可以带 ()

   

转载于:https://www.cnblogs.com/shangjun6/p/11430968.html

<think>好的,用户想了解React脚手架工具的使用教程或下载方法。我需要根据提供的引用内容来整理答案。首先,确认用户需要的是create-react-app,因为引用中提到这是React的官方脚手架工具。 先检查引用内容,引用[1]提到安装React和使用Create React App创建项目的步骤,分为安装环境、安装脚手架和创建项目。引用[2]详细说明了脚手架的作用,以及需要安装Node环境。引用[3]也确认create-react-app是官方推荐的,基于React+Webpack等技术栈。 接下来,需要按照用户的要求分步骤说明。用户可能需要先安装Node.js,这是前提条件。然后通过npm全局安装create-react-app,再使用它来创建新项目。可能还需要解释项目结构和启动命令,这些在引用中都有涉及。 同时,用户可能关心如何下载脚手架工具,其实安装create-react-app就是下载的过程。需要注意是否需要管理员权限,或者是否推荐使用npx来避免全局安装,但根据引用内容,引用[1]和[2]都提到全局安装,所以应该按这个来写。 另外,需要确保LaTeX格式正确,但问题中可能不涉及数学公式,所以可能不需要处理这点。不过用户要求所有行内数学表达式用$...$,但这里可能不适用,所以可能不需要添加。 最后,生成相关问题,可能需要围绕安装步骤、项目结构、优势、其他脚手架工具对比、常见问题等来提问。确保问题覆盖用户可能感兴趣的方面,比如优化、部署等。</think>### React 脚手架工具 create-react-app 使用教程 #### 一、环境准备 1. 安装 Node.js - 脚手架基于 Node.js 环境运行,需先安装 [Node.js 14.0+](https://nodejs.org/)(自带 npm 包管理工具)[^2][^3] - 验证安装: ```bash node -v npm -v ``` #### 二、安装脚手架工具 1. 全局安装 create-react-app ```bash npm install -g create-react-app ``` - 若需要管理员权限,可添加 `sudo`(Mac/Linux)或以管理员身份运行命令提示符(Windows)[^2] #### 三、创建 React 项目 1. 初始化项目 ```bash create-react-app my-react-app ``` - `my-react-app` 为自定义项目名称 2. 进入项目目录 ```bash cd my-react-app ``` 3. 启动开发服务器 ```bash npm start ``` - 默认访问地址:`http://localhost:3000` #### 四、项目结构解析 ``` my-react-app/ ├── node_modules/ # 依赖包 ├── public/ # 静态资源 ├── src/ # 源码目录 │ ├── App.js # 根组件 │ └── index.js # 入口文件 ├── package.json # 项目配置 └── README.md # 说明文档 ```[^3] #### 五、扩展功能 - 添加 TypeScript 支持: ```bash npx create-react-app my-app --template typescript ``` - 构建生产版本: ```bash npm run build ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值