100天代码:第6-10天

Bojack Horseman Netflix原创

这周很难尝试找到坐下来编码的重点,但是我们来了。

第6天-让我们变得灵活

我了解了flex选项如何在元素上工作。 我知道React Native使用flex模型来定位元素,所以我想我会早日尝一尝。

我读过的文章:

视觉指南CSS3 Flexbox属性

Flexbox Layout正式称为CSS Flexible Box Layout Module,是CSS3中的新布局模块,旨在改善…

苏格兰人

第7天-更新组件状态

当使用新值(例如增加值或添加到列表)更新组件时,可以使用prevState检索状态值。

 构造函数(道具){
  超级(道具);
   this.state = {
    fname:null,
    lname:null,
    prevfname:“”,
   上一个名称:null
   } handleSubmit(e){
   e.preventDefault();
   this.setState((prevState)=> {
   返回{prevfname:prevState.fname,
        prevlname:prevState.lname,
        fname:null,
        lname:空}
   });
  } 

我读过的文章: https : //www.fullstackreact.com/

第八天-破坏!

  • 分解使我们能够节省键入时间,并以更短,更紧凑的方式定义变量。
 类活动扩展了React.Component {
  render(){
   const activity = this.props.activity;
  返回(
    

活动名称:{activity}

); } }

第9天-实质性的用户界面,启动该数据库,使我的组件栩栩如生,将其伪造,直到完成

  • 我开始在React JS中使用包。 我发现它们很像Jquery插件。 但是,并非所有闪闪发光的东西都是金子。 慢慢地了解到某些版本的软件包会破坏reactjs,然后要试一试哪些版本有效。 我很高兴代码沙箱可以轻松添加/删除它们。
  • 材质UI提供了许多组件,使您的React项目看起来不错,而无需担心UI过多。 当提出一个项目或学习新东西(例如查询数据库)时,它会有所帮助。
  • 大多数情况下,这周我一直在关注Wes Bos React初学者教程。 在其中,他使用Firebase建立了一个数据库,而我以前从未使用过它。 我慢慢了解到,建立数据库并不难,也不会获取数据。
  • 我正在慢慢实现的应用程序还支持使用电子邮件/密码登录(从今天开始的100天旅程)。 (您可以在文章末尾看到它)
  • 大多数努力来自于探索UI组件,了解有关组件及其生命周期状态的信息,有时甚至与firebase数据库搞混。 我越来越难以根据其道具将数据传递给组件。 这几乎是第二天性。
  • 我使用的数据是从一个名为https://www.json-generator.com/的网站生成的。 一旦构建项目,就更容易看到项目的去向。

我读过的文章:

Firebase和React第2部分:用户身份验证| CSS技巧

今天,我们将向我们的Fun Food Friends应用添加身份验证(通过Google身份验证和Firebase),因此仅…

css-tricks.com

材料UI

Google使用React构建的材料设计UI组件。

www.material-ui.com

www.firebase.google.com

我添加了书签的网站:

行为最佳创意作品

展示和发现各行各业的创意专业人士的顶级在线作品集的最新作品。

www.behance.net

第10天-嘿,反应,再告诉我是哪条路? &重新-重新-reddddux。

当我学习ReactJS时,我将继续研究下一个项目,它的插件是社交媒体风格的网站。 它将具有登录,注销,顶,喜欢和用户个人资料的功能。 我是漫画的忠实拥护者,它将以漫画和动漫为基础。

我开始研究页面的基本设计。 登录/注销功能通过Firebase起作用,我也在学习如何通过Firebase查询数据。 该文档确实有帮助。

tylermcginnis /重新基准

re-base –:fire:一个受Relay启发的库,用于构建React.js + Firebase应用程序。 :火:

github.com

看着我的应用程序的规模,我发现我可能不得不选择redux。 到目前为止,这并不是一个学习曲线。 特别是我正在从网上学习一些YouTube播放列表。 我目前没有任何Codepen示例,但请注意下周!

项目002:ComicBB(基本的社交网络演示)

沙盒– CodeSandbox

编辑说明

vqq057xojy.codesandbox.io