React基础学习笔记（一）-react前端项目的两种搭建方式

最新推荐文章于 2024-07-23 16:32:51 发布

嫣夜来

最新推荐文章于 2024-07-23 16:32:51 发布

阅读量732

点赞数

分类专栏： React前端框架文章标签： react.js node.js

本文链接：https://blog.csdn.net/qq_41865652/article/details/119990749

版权

React前端框架专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、运行环境准备

需要先进行react项目的运行环境nodeJS的安装，具体安装流程可以参考：

windows版本的安装配置帮助文档：https://www.cnblogs.com/liuqiyun/p/8133904.html
linux版本的安装配置帮助文档：https://www.cnblogs.com/huangenai/p/10815426.html

2、验证环境是否正常

# 使用以下两个命令都可以
npm -v

npm -version

请添加图片描述

3、创建react前端项目的两种方式

3.1 手动创建react项目

第一步：创建项目根目录react-test
第二步：进入项目根目录react-test, 打开命令行，执行npm init命令
第三步：手动完善项目目录结构，完成之后的目录结构大致如下：
–react-test[目录]
–public[目录]
–index.html[文件]
–favicon.ico[文件]
–logo.png[文件]
–robots.txt[文件]
–src[目录]
–assets[目录]
–views[目录]
–api[目录]
–router[目录]
–utils[目录]
–index.js[文件]
–index.css[属性文件]
–package.json[文件]

请添加图片描述

第四步：安装react/react-dom/react-scripts项目依赖
第五步：修改package.json文件配置项目启动、构建、测试等命令

{
  "name": "react-test",
  "version": "1.0.0",
  "description": "react 手动创建演示项目",
  "private": true,
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "keywords": [
    "react"
  ],
  "author": "karma",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "^4.0.3"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

第六步：编写简单实例的index.html文件和index.js中的代码
public/index.html中的文件内容如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="referrer" content="no-referrer" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>react-movie</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/index.js中的文件内容如下：

import React from 'react';
import ReactDOM from 'react-dom';


ReactDOM.render(<h1>手动创建React项目演示</h1>, document.getElementById('root'))

第七步：进入项目根路径react-test目录下，执行npm start命令启动项目

通过浏览器进行访问，测试结果如下：

至此手动创建一个react应用的项目就完成了。

注意：这里只是基础演示，后续会完善react项目通过webpack工具进行项目的工程化构建。

3.2 通过脚手架工具进行react项目创建

第一步：安装react脚手架工具create-react-app
这里建议全局安装，后续在新建react项目，可以直接使用create-react-app工具命令
安装命令如下

# 全局安装react脚手架工具的命令
npm install -g create-react-app

第二步：通过脚手架工具进行项目创建

# 通过react脚手架创建项目的命令
create-react-app react-new-app

在这里插入图片描述
创建项目成功如下

第三步：进入项目根目录react-new-app，执行运行项目命令npm start即可

# 进入项目根目录后启动项目的命令
npm start

在这里插入图片描述

以上就是react项目的两种创建方式的全部内容了，别只看呀，快动手操作试试吧，实践出真知~~~

嫣夜来

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录