初识React

这里写图片描述

React的核心思想:封装组件,再由组件构成复杂页面,同时各个组件维护自己的状态和UI,当状态发生变化,自动重新渲染整个组件。

React 是一个用于构建用户界面的JavaScript库,它起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

React主要用于构建UI,而且性能出众,代码逻辑简单,所以我打算好好研究一下,既满足了自己的好奇心,也提高一下自己的技术水平。

在学习的过程中我参考了阮大大的React教程React 官方文档

React特点

  1. 声明式设计 : 以声明式编写UI,可以让你的代码更加可靠,且方便调试
  2. 高效 : React通过对DOM的模拟,最大限度的减少与DOM的交互
  3. 灵活 : 提供了可以调用其他第三方框架或库的接口
  4. JSX : JSX是JavaScript语法的扩展,建议开发过程中使用它
  5. 组件 : 通过React构建拥有各自状态的组件,再由组件构成更加复杂的界面,代码更加容易得到复用
  6. 单向响应的数据流 : React实现了单向响应的数据流,减少了重复代码

创建新应用

1.React可以直接下载使用,下载包中提供了很多学习的实例,可以去官网下载最新版

2.使用create-react-app构建React开发环境(需要安装node.js,另一系列文章中会提到node的安装,大家也可自行搜索安装方法)

create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境
create-react-app 自动创建的项目是基于 Webpack + ES6

执行以下命令创建新项目:


npm install -g create-react-app

create-react-app my-app

cd my-app
npm start

在浏览器中打开 http://localhost:3000/ ,结果如下图所示:
这里写图片描述

项目的目录结构如下所示 :
这里写图片描述

尝试修改src/App.js文件里的代码 :
这里写图片描述

修改之后再打开 http://localhost:3000/ (一般会自动刷新), 会发现输出结果已经改变:
这里写图片描述

当你准备好将其部署到生产环境中时,运行 npm run build 将会在 build 文件夹中创建一个优化好的应用

该文章同步在 :
简书 : https://www.jianshu.com/users/63adfe13324c/timeline
GitHub Page : https://levinhax.github.io

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值