React的介绍和环境搭建,创建、运行项目

分类:智能运维 时间:2024-09-25 11:51 评论:0
0

React的介绍:

React来自于Facebook公司的开源项目

React 可以开发单页面应用 spa(单页面应用)

react 组件化模块化 开发模式

React通过对DOM的模拟(虚拟dom),最大限度地减少与DOM的交互 (数据绑定)

react灵活 React可以与已知的库或框架很好地配合。

react 基于jsx的语法,JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面, html js混写模式

搭建React开发环境之前的准备:

1、必须安装nodejs 注意:安装nodejs稳定版本

2、安装cnpm用cnpm替代npm

地址:http://npm.taobao.org/

安装cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、用yarn替代npm

yarn的安装:

第一种方法:参考官方文档https://yarn.bootcss.com/

第二种方法:cnpm install -g yarn 或者 npm install -g yarn

搭建React开发环境的第一种方法(推荐):

https://reactjs.org/docs/create-a-new-react-app.html

1、必须要安装nodejs 注意:安装nodejs稳定版本

2.安装脚手架工具 (单文件组件项目生成工具) 只需要安装一次

  npm install -g create-react-app   /  cnpm install -g create-react-app

3.创建项目 (可能创建多次)

找到项目要创建的目录:

create-react-app reactdemo

4.cd 到项目里面

        cd  reactdemo        npm start             yarn start运行项目        npm run build         yarn build 生成项目

搭建React的开发环境的第二种方法(新):

https://reactjs.org/docs/create-a-new-react-app.html

1、必须要安装nodejs 注意:安装nodejs稳定版本

找到项目要创建的目录执行:

npx create-react-app reactdemo   

2.cd 到项目里面

cd  reactdemonpm start  运行项目(调试)npm run build 生成项目(发布)

npx介绍

npm v5.2.0引入的一条命令(npx),引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。

详情:http://www.phonegap100.com/thread-4910-1-1.html

npx create-react-app reactdemo这条命令会临时安装 create-react-app 包,命令完成后create-react-app 会删掉,不会出现在 global 中。下次再执行,还是会重新临时安装。

npx 会帮你执行依赖包里的二进制文件。

再比如 npx http-server 可以一句话帮你开启一个静态服务器

1. 本站所有资源来源于用户上传或网络,仅作为参考研究使用,如有侵权请邮件联系站长!
2. 本站积分货币获取途径以及用途的解读,想在本站混的好,请务必认真阅读!
3. 本站强烈打击盗版/破解等有损他人权益和违法作为,请各位会员支持正版!
4. 智能运维 > React的介绍和环境搭建,创建、运行项目

用户评论