从零开始React之环境的搭建与项目的初始化

最新推荐文章于 2024-08-18 10:25:17 发布
最新推荐文章于 2024-08-18 10:25:17 发布
阅读量6.7k 收藏 7
点赞数 1
分类专栏： 前端 文章标签： react node js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/code_xiaolu/article/details/80831969
版权
本文介绍了如何从零开始搭建React环境并初始化项目。首先，讲解了安装Node.js和设置npm/cnpm的过程，然后通过创建一个新的React项目并启动服务，展示了项目的基本结构，包括node_modules、src目录及关键文件的作用。最后，鼓励读者动手修改App.js并观察实时更新的效果。
摘要由CSDN通过智能技术生成

React

简介：React是Facebook开发的一款JS库，是一个声明式、组件化并且用于构建用户界面的 JavaScript 库，通俗来讲就是将界面分成可以复用的组件，在需要时引入，使界面解耦，互不影响而又相互联系，在界面更新时，只会更新需要更新的组件，使得效率和性能上大大提升。

1、环境搭建

  1. 安装node
    大家可以去官网下载安装包：node官网
    安装没有什么可以讲的，一路下一步即可， 安装完成后打开控制台输入
CrckerdeMacBook-Pro:~ crcker$ node -v
v10.0.0

如果能正确输出版本号说明node已经安装完成，否则需要配置环境变量，这里不做介绍
2. 安装npm和cnpm
npm其实是Node.js的包管理工具，可以使我们方便的引入各种js库,当我们安装完node.js之后，npm也已经安装完成，打开终端输入

最低0.47元/天 解锁文章
Crcker
关注
专栏目录
从零开始搭建一个react项目开发
08-28
主要介绍了从零开始搭建一个react项目开发,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
从零开始搭建react项目
weixin_44156701的博客
02-20 415
零基础写react
探索轻量级移动UI组件库：Vant React
最新发布
gitblog_00309的博客
08-18 388
探索轻量级移动UI组件库：Vant React 项目地址:https://gitcode.com/gh_mirrors/va/vant-react 在移动应用开发的世界里，选择一个高效、轻量且功能丰富的UI组件库至关重要。今天，我们将深入介绍一个新兴的开源项目——Vant React，它以其卓越的性能和灵活性，正逐渐成为开发者的新宠。 项目介绍 Vant React 是一个基于 TypeScrip...
react系列-从0开始搭建一个react项目
tangdou369098655的博客
05-14 259
从0开始搭建一个react项目 1.安装脚手架 npm install -g create-react-app 2.创建项目 D: //进入D盘 mkdir ReactDemo //创建ReactDemo文件夹 create-react-app demo01 //用脚手架创建React项目 cd demo01 //等创建完成后，进入项目目录 npm start //预览项目，如果能正常打开，说明项目创建成功 如果你电脑出现这种提示 D:\ReactDemo> create-re
从0搭建React项目
hl_java的专栏
05-20 3755
参考网址：https://www.jianshu.com/p/324fd1c124ad 看过很多react的入门文章，上面的这一篇链接是看过最的了，不过依旧会有一些跳跃，刚入门的小伙伴参照进行练习时难免会卡住，特重新整理一遍，既加强自己的记忆，又能帮助到其它小伙伴。 基础篇，搭建 项目目录创建，及必备依赖安装 （这篇文章的前提是node.js你已经安装过了，如果不会的话...
从零开始搭建React项目并运行(win环境)
白鸽同学的博客
11-19 1148
从零开始搭建React项目并发布
基于webpack4.X从零搭建React脚手架的方法步骤
10-17
从零开始搭建react工程 <div id="root"></div> <script src="../dist/js/bundle.js"></script> ``` 接下来，在根目录下创建app文件夹，并添加index.js文件。在index.js文件中，通过React和ReactDOM库来渲染...
从0开始搭建react项目实践
Amy_cloud的博客
01-14 470
1.全局安装create-react-app npm install -g create-react-app 2.创建项目，安装依赖 create-react-app my-react-app 3.进入项目，启动项目 cd my-react-app npm start 4.创建src项目结构 路由 状态管理redux 工具类 图片管理 组件 路由组件 router st...
怎样构建一个react项目
03-02
从零开始构建react项目
React-Base-Project:使用 React.js 和 ES6 语法的基础项目
06-06
REACT ES6 基础项目 ##Description 使用 React.js 和 ES6 语法的基础项目。 用于使用 liveReload 和 CSS 注入启动服务器的 Gulp 脚本。 ###文件观察者 转译和 linting JSX 和 ES6 编译 SCSS --> CSS 安装 您需要全局安装 Gulp： $ npm i -g gulp 安装依赖： $ npm install 使用 Live Reload 和 CSS Injection 启动开发服务器： $ gulp serve
从 0 开始搭建 React 框架
sinat_39145919的博客
01-26 1924
从 0 开始搭建 react 框架：webpack、react、redux toolkit、react-router、eslint、antd5、主题色切换
从零搭建一个react项目
impossible1994727的博客
02-13 688
创建项目 1、新建一个文件夹，vsc打开； 2、打开终端； 3、输入npm init -y 快速初始化项目：多一个 package.json的文件夹； 4、项目根目录新建两个文件夹dist src，并在src新建index.html和一个index.js 5、终端输入cnpm i webpack -D回车；再输入cnpm i webpack -g：多一个node_modules文件夹； ...
react 环境配置初始化
ziskin的博客
05-17 409
第一步：项目初始化npm init -y第二步：安装依赖npm install react react-dom babel-preset-react babel-loader  es2015 babelify--save-dev第三步：webpack热加载全局安装$ npm install webpack webpack-cli -g $ npm install webpack-dev-serve...
从零开始搭建React项目
Little_Pig_Bug的博客
11-23 322
1.首先确定自己安装了node,安装好了之后，npm也同样会有 2.全局安装create-react-app，他是react的脚手架，其可以在本地安装react项目，命令pm install create-react-app -g 3.新建自己第一个react项目 create-react-app 项目名称 4.项目结构 5.yarn start,项目启动 ...
react项目从零开始搭建，上手react如此简单
qq_38274119的博客
08-27 343
初始化项目 安装 npx create-react-app myreact 结构 package.json：包管理文件 node_modules：局部安装的第三方模块 .gitignore：被git忽略的目录或者文件 src：开发目录 index.js：整个项目的入口文件 app.js：根组件 public：存放项目模板文件，以及通过href或者src引入的外部文件 readme.md：说明文档 vscode插件：ES7 React/Redux react-devtools 配置 安装
MAC 下面初始化React项目环境
weixin_40916825的博客
07-05 2501
一般MAC 下面自带node环境 可以通过以下命令查看版本信息 node -v npm -v 输入以上命令会出现你安装过的版本信息 一般为国外镜像 比较慢 我们要修改成淘宝的，命令行输入以下命令 npm config set registry https://registry.npm.taobao.org 来修改 npm 默认的安装源，通过： npm config get registry 除此之外，我们还可以使用淘宝镜像提供的 cnpm 工具，通过 cnpm 来安装一般速度会更快一些，
零基础构建React项目：目录结构与依赖设置
本文将详细指导如何从零开始构建一个React项目，包括创建项目目录、配置依赖包、设置开发环境以及实现核心功能如数据获取和状态管理。首先，我们将在磁盘根目录下创建一个名为"learn"的项目文件夹，并初始化`package...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值