第二天mark一下

开始学习react

由于之前只是了解一些皮毛的前端,react对我来说是全新的知识。首先得从基本的理论开始,什么是react,一个为数据提供渲染为视图的JavaScript 库,主要用于构建UI,就是前端展示给我们的东西啦,有点类似于MVC中的V。

创建第一个react-app应用

只需要下面几行就可以成功创建一个react-app,当然得预先安装好npm。

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

在my-app的src里面是没有html的,从这里可以看出render整合了js与html,像是将html嵌入到js里面,也就是react一种全新的语法叫JSX,让前端实现真正意义上的组件化。
如果不想将他们如何呢,也是可以的,使用reactDOM就可以实现,类似于下面这样:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);
<div id="root">
  <!-- This div's content will be managed by React. -->
</div>

这样就可以将两者分离。
在开始看demo的时候发现会有不同render()出现感觉很困惑,使用时发现只能展示一个render(),通过询问胡老师,知道了一个demo里只能有一个render(),我的困惑是因为自己没有认识到JSX这种语法在demo里面的应用。

继续学习

接下来就是如何使用分离的HTML与JS创建demo,以及了解与掌握react其他的特性以及react的其他相关知识,比如Virtual DOM和Data Flow,目前对Virtual DOM理解就是react会虚拟出两棵DOM树,我们在更新页面的时候对比这两棵树的区别,然后将差异应用到真正的DOM树上。Data Flow暂时还不是很理解。
明天继续。。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,867评论 1 18
  • 自己最近的项目是基于react的,于是读了一遍react的文档,做了一些记录(除了REFERENCE部分还没开始读...
    潘逸飞阅读 3,538评论 1 10
  • 参考文章:深度剖析:如何实现一个Virtual DOM 算法 作者:戴嘉华React中一个没人能解释清楚的问题——...
    waka阅读 6,016评论 0 21
  • 8年前,我决定开始简化自己的生活,我还能回想起当时的生活是多么忙碌。 我对所有邀请张开怀抱,在各种社交场合露面,驱...
    Vincent_Zhao阅读 869评论 1 13
  • 有意义的人生,要么沉浸于温柔暖心的感情中,要么投身于伟大的使命中,最善者者两者兼顾。图片发自简书App仔细思索人生...
    琅东阅读 135评论 0 0