用create-react-app构建一个react项目

本文详细介绍如何使用Node.js、npm、yarn及create-react-app搭建React项目,包括环境检查、项目创建、依赖安装及自定义页面实现。通过具体步骤展示,帮助读者快速上手React开发。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  1. 检测node版本(需要>=6)
node -v
  1. 检测npm版本(需要>=5.2)
npm -v
  1. 检测yarn是否安装
 yarn -v
  1. node?npm?yarn

    1. Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境
    2. npm全称是 Node Package Manager,就是node的包管理工具
    3. yarn 和npm类似,是为了弥补 npm 的一些缺陷而出现的
  2. 安装create-react-app脚手架

 npm install -g create-react-app
  1. 检测 create-react-app版本
 create-react-app --version
  1. 打开vscode,创建项目文件夹,使用脚手架创建工程
 create-react-app app01
  1. 进入到工程目录
 cd app05
  1. 启动工程
 yarn start
  1. 默认效果
    在这里插入图片描述
  2. 下面尝试实现自己的页面
  3. 在/src下新建文件Hello.js
import React from 'react';
function Hello(){
    return(<div>
        <h1>hello,world!</h1>
    </div>);
}
export default Hello;
  1. 在/src下新建文件Hello.css
h1 {
    color: blue ;
}
  1. 打开inde.js,将工程默认渲染的页面改为Hello.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import Hello from './Hello';
import * as serviceWorker from './serviceWorker';

// ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Hello />, document.getElementById('root'));

serviceWorker.unregister();
  1. 最终效果
    在这里插入图片描述
  2. 介绍目录结构
  • node_modules 第三方依赖也就是构建这个React项目可能会用到的工具
  • public文件夹中是 index.html存放目录,也就是React根页面的所在地
  • src 存放源代码,是项目开发中的主要区域
  • package.json 模块项目的核心配置文件
  1. 快速添加依赖,在本地 node_modules 目录安装 package.json 里列出的所有依赖
 yarn install
  1. 开发流程
    1. 创建项目 create-react-app app01
    2. 启动项目 npm run start/ yarn start
      • react项目内置了一个静态服务器
      • 先启动了静态服务器
      • 然后将前端代码构建后部署到静态服务器中
    3. 编写代码
      • 如果代码发生了变化,会自动更新与部署
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值