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

最新推荐文章于 2024-01-24 16:14:20 发布

admin_rdc

最新推荐文章于 2024-01-24 16:14:20 发布

阅读量575

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43711783/article/details/91047373

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

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

检测node版本(需要>=6)

node -v

检测npm版本(需要>=5.2)

npm -v

检测yarn是否安装

 yarn -v

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

 npm install -g create-react-app

检测 create-react-app版本

 create-react-app --version

打开vscode,创建项目文件夹,使用脚手架创建工程

 create-react-app app01

 cd app05

启动工程

 yarn start

默认效果
下面尝试实现自己的页面
在/src下新建文件Hello.js

import React from 'react';
function Hello(){
    return(<div>
        <h1>hello,world!</h1>
    </div>);
}
export default Hello;

在/src下新建文件Hello.css

h1 {
    color: blue ;
}

打开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();

最终效果
介绍目录结构

node_modules 第三方依赖也就是构建这个React项目可能会用到的工具
public文件夹中是 index.html存放目录，也就是React根页面的所在地
src 存放源代码,是项目开发中的主要区域
package.json 模块项目的核心配置文件

快速添加依赖,在本地 node_modules 目录安装 package.json 里列出的所有依赖

 yarn install

开发流程
1. 创建项目 create-react-app app01
2. 启动项目 npm run start/ yarn start
  - react项目内置了一个静态服务器
  - 先启动了静态服务器
  - 然后将前端代码构建后部署到静态服务器中
3. 编写代码
  - 如果代码发生了变化，会自动更新与部署