Rect开发--简介(一)

一、React简介

①React 是一个用于构建用户界面的 JAVASCRIPT 库。
②React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
③React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
④React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
⑤GitHub地址:https://github.com/facebook/react
⑥React native:简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。
React中文开发手册:https://www.php.cn/manual/view/36330.html
官网:https://zh-hans.reactjs.org/

二、特点

①声明式设计:React采用声明范式,可以轻松描述应用。
②高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
③灵活:React可以与已知的库或框架很好地配合。
④JSX:JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
⑤组件:通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
⑥单向响应的数据流:React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

三、React 安装

npm install -g create-react-app
React 安装

安装完成

环境验证:
输入:

create-react-app
环境验证

四、项目创建

  1. 创建项目
create-react-app huoniu8-scratch
# 创建成功
Success! Created huoniu8-scratch at D:\huoniu8-blog\huoniu8-ui\huoniu8-scratch
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd huoniu8-scratch
  npm start
创建项目
  1. 运行项目
npm start
项目运行
  1. 浏览验证


    浏览验证

五、目录结构

├── README.md
├── node_modules
├── package-lock.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── logo192.png
│   └── logo512.png
│   └── manifest.json
│   └──  robots.txt
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── serviceWorker.js
    └── setupTests.js

package-lock.json:主要是项目依赖的安装包的一些版本号会在这里做一些限制,该文件一般不用动。
README.md:主要是项目的说明文件,在里面写一些关于本项目的说明。
package.json:脚手架自动生成的一个文件,是一个node的文件,里面有一些项目的脚手架的版本,以及一些npm的命令。
gitignore:当我们将本地文件上传到线上仓库的时候,里面的文件会被忽略,不会上传到线上。
node_modules:里面放的是项目依赖的第三方的包,这些包不是我们自己写的,是脚手架工具要实现自己的功能,需要依赖外部的一些第三方的包文件来实现。
public目录:
favicon.ico:对应的是我们启动服务以后,标签页title左边的小图标,我们可以用别的ico文件来更改它。
index.html: 是我们项目首页的html模板。
src目录:里面放的是我们项目所有的源代码。
index.js:是我们项目的入口文件。
App.test.js:是自动化测试的文件。
serviceWorker.js:

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348

推荐阅读更多精彩内容