01 React的介绍、yarn npx 、用React脚手架create-react-app搭建React环境、运行React项目

  • 时间:
  • 来源:互联网
  • 文章标签:

一、 大前端技术体系

前端必备: Html5 + cSS3 + JS + (es5) + Jquery PC、移动web

前端必备:ES6、ES7、TypeScript、Amgular、Vue、React、小程序

混合app开发:Ionic、ReactNative、Cordova+vue、Cordova+React、Weex

后台全栈:Nodejs、Express/Koa、Egg.js、Mongodb、Mysql Redis

电脑软件:Electron跨平台混合软件开发

二、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

安装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开发环境的第一种方法(老-现在推荐)

1.必须安装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开发环境的第二种方法(新-未来推荐)

react官网

1.必须安装nodejs 注意:安装稳定版本 Node >= 8.10 npm >= 5.6

2.安装脚手架工具并创建项目

找到项目要创建的目录执行:
npx create-react-app my-app

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

在这里插入图片描述
4.cd 到项目里面

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

在这里插入图片描述
npx介绍:

注意
第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。

本文链接http://www.taodudu.cc/news/show-83034.html