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

1、运行环境准备

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

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

2、验证环境是否正常

# 使用以下两个命令都可以
npm -vnpm -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" /><metaname="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项目的两种创建方式的全部内容了，别只看呀，快动手操作试试吧，实践出真知~~~

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

c语言实现路由功能,前端路由的两种实现方式，内附详细代码
一.前端路由介绍前端路由主要应用在SPA(单页面开发)项目中.在无刷新的情况下,根据不同的URL来显示不同的组件或者内容. 前端路由的实现原理 : hash值 + onhashchange事件 hi ...
学习笔记 --- 编码过程中常见的三种异步方式
实际的编码过程中, 凡是涉及到网络通信的代码, 异步都是决不可缺少的. 那么什么是异步呢? 异步就是子线程, 异步通过开辟子线程来实现, 所以一提到异步就应该想到子线程. 即使不涉及网络通信, 异步也 ...
SpringBoot项目的两种打包方式分析
点击上方关注 "终端研发部" 设为"星标",和你一起掌握更多数据库知识作者: 枕边书来源: zhenbianshu.github.io Part1前言最近 ...
springboot进阶(11):springboot项目的两种部署方式
文章目录前言如何发布项目第一种 jar方式部署(默认方式) 第二种 war包方式运行关于文件名问题关于springboot线上部署前言 springboot项目开发完成后续,需要部署到服务 ...
Spring Boot基础学习笔记24：RabbitMQ安装以及整合环境搭建
文章目录零.学习目标一.消息服务概述 (一)为什么使用消息服务 1.使用消息服务的好处 2.异步处理 3.应用解耦 4.流量削峰 5.分布式事务管理 6.分布式事务管理流程 (二)常用的消息中间件 ...
CSS学习记录9/3D的正方体的两种编写方式/3D长方体的编写方式/3D动画/3D播放器
什么是2D什么是3D? 2D就是一个平面,只是宽度和高度,没有厚度. 3D就是一个立体,有宽度有高度,还有厚度. 默认情况下所有的元素都是呈2D展现的. 如何让某个元素呈3D展现? 和透视一样,只需给 ...
SpringMVC基础学习之Controller的两种实现方式和RequstMapping注解的使用
前言: 小伙伴们,大家好,我是狂奔の蜗牛rz,当然你们可以叫我蜗牛君,我是一个学习Java半年多时间的小菜鸟,同时还有一个伟大的梦想,那就是有朝一日,成为一个优秀的Java架构师. 这个SpringM ...
React系统学习笔记
***当前阶段的笔记 *** 「面向实习生阶段」https://www.aliyundrive.com/s/VTME123M4T9 提取码: 8s6v 点击链接保存,或者复制本段内容,打开「阿里云盘」 ...
【学习笔记】React.js
视频地址 https://www.bilibili.com/video/BV1wy4y1D7JT 入门 React是什么使用 React 框架的程序,展现页面需要分三步: 发送请求获取数据处理数据 ...

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

1、运行环境准备

2、验证环境是否正常

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

3.1 手动创建react项目

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

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

最新文章

热门文章