前端-【学习心得】-react2

今天是除夕,首先恭祝大家新年快乐。新年的确是值得开心的,过去一年过得不好就把它抛到后面,过得好就期待新一年过得更好。

好了,下面继续我们的react之旅。

我们的界面是有许多简单组件组成的,就像我们的身体是由各个器官组成的一样。我们想做一个可以复用的接口,定义它的名字CommentBox,定义这个盒子的组成由标题,列表项和表单组件构成。标题我们直接写在CommentBox里面,对于列表项和表单已经不是单元级别的,所以也把它们定义为组件。

定以组件列表

CommentList

var CommentList = React.createClass(

{ render: function() { return ( <div className="commentList"> Hello, world! I am a CommentList. </div> ); }

});

定义表单

var CommentForm = React.createClass({ render: function() { return ( <div className="commentForm"> Hello, world! I am a CommentForm. </div> );}

});

其实这两项都非常简单,这里的目的还是为了说明组件化思想。

最后看看完整的box

var CommentBox = React.createClass(

{ render: function() { return (

<div className="commentBox"> <h1>Comments</h1> <CommentList /> <CommentForm /> </div> ); }

});

可以看到这里混合了组件和html标签

以上的教程代码全部都来自于官网教程。

有时候我会想我们学习是不是应该从最高级的整体框架入手,先明白我们要做什么,然后再去学怎么做,但是现在学习方式貌似都是先教你怎么做,自己再取摸索到底要做什么,当然这只是我个人看法,不过不管如何,我们都应该孜孜不倦的去追求我们不了解却渴望了解的东西。无论如何,追求自己喜欢的东西都是正确的,假如你不太喜欢金钱至上的观念,却又无法摆脱世俗的看法,那么你就做自己喜欢的就行了。就像阿甘那样,当然能赚到钱也是极好的,不是吗。

时间: 2024-08-05 20:09:05

前端-【学习心得】-react2的相关文章

小小六的前端学习心得

打算写这篇文章已经好久了,但是文采不行,不知道如何下笔,今天终于鼓起勇气用我拙劣的作文水平来讲述一下这段时间我学习前端开发的心得. 先从我的专业说起.我本人是学计算机的.全名是叫计算机科学与技术(软件方向),学校虽然是一个211学校,学习成绩也还行,但是对于编程这一块,真的是很弱很弱.所以我对计算机编程真正的学习是从实习这段时间开始的.说到这里,我必须得感谢带我进入前端的学长.因为他我才能在今天坐在这里写这篇学习心得. 所以,首先最好是有一个愿意耐心的指导你学习的人,也就是一个好的师傅.他能根据

web前端学习心得

所谓行万里路,必先始于足下.刚开始学习WEB前端基础的时候,老师说,其实你们学的这个后面真正去工作的时候可能也不是很会用到,所以就有很多人会问,既然我们都用不到,那干嘛还学呀?其实,对于一个程序员来说,你不仅要有很好的后端专业能力,你还应当具备一定的前端素养,知道一些起码的前端知识. 来到传智的第一个月,我们是以基础为主吧,因为大家到这里的基础都不一样,有一些本身就具备很高水准的人,也有很多像自己一样从小白开始的人,所以,对我们而言,传智开设的这种双元模式对我们是有很大用处的.我们从最基础的开始

Web前端培训学习心得

web前端工程师技术日趋成熟,越来越多的行业巨头正不断向web前端工程师示好,在未来几年,web前端将会以更多的形式渗透到我们生活中的方方面面,因此越来越多的从业者开始关注web前端开发行业,今天小编跟大家共同来分享一下自己的web前端工程师学习心得. 今天只是想要跟大家分享一下学习心得,在选择web前端工程师培训之前,我逃避过.犹豫过.迷茫过,站在人生的十字路口,不知道该何去何从,但从加入培训班的那刻起,就把心中的疑问打消了,看到大家倾吐自己的心声,我开始认识到每个人都渴望成功,更希望能够战胜

学习心得——测试框架浅析

笔者按:       在这一学期的软件测试课程学习中,我逐渐接触到了软件测试的相关知识,实现了从较为关注软件编写与实现等前端内容到逐渐理解软件测试等项目后期环节的跨 越与 转变.而在软件测试领域,我们经常会听到测试框架这个名词,那什么是测试框架?它在软件测试中起到什么样的作用?我将就自己浅薄的学习心得,在这里为大 家做一个简单的分析与交流. 正文:          我们先来看一下百度百科给出的关于“框架”一词的定义:“框架(framework)是一个基本概念上的结构,用于去解决或者处理复杂的问

运维管理平台实现与学习心得

经过一段时间的学习,写了一个简单的运维管理平台小项目,先看看啥样吧! 下面说明下具体实现: 软件架构:HTML+CSS+Jquery+Bootstrap+Ajax+Python2.7+Django1.9+SaltStack+MySQL 功能描述: 数据可视化:采用百度开源的ECharts绘图,通过Python脚本每分钟统计Nginx日志分析PV/UV量写到数据库. 资产管理:采用SaltStack Restful API二次封装调用收集主机配置信息入库,并提供增删改查. 主机批量管理:也是调用S

前端学习书籍推荐

纯属转载,大致看了下,文章里推荐的书都不错,设计前端的常见内容(html.css.js.jq),当然,前端不仅仅包含这几个方面.文章如下(链接均指向豆瓣的书评): ----------------------------------- 时常遇到朋友问我前端学习该如何学习, 看哪些书藉. 自己也希望将自己的一些学习心得与经验传教于初学者. 抱着对初学者负责的态度, 如何学习前端, 我还需要在心成有个成熟的底稿后再来写, 本文先以自己学习过程中看过的书为基础, 总结一下前端学习各个阶段书籍的选择.

SVG学习心得

在前端开发的过程中,为了界面的美观,会用到很多好看但无法纯利用HTML和CSS实现的图形(对于大佬们这就不算事了,但对于我这个刚入行的后生就难了),如下面的几个图形,如果不用美工妹妹的PS图片,我个人觉得是比较难实现的: 以上的图形利用纯HTML和CSS是比较难实现的,幸好前段时间刚好看到有篇关于SVG的实例讲解,学习了一下SVG,下面是我的学习心得(这是我第一次写博客,写的不好多多见谅) 1.什么是SVG?(这里引用w3school的定义) SVG 指可伸缩矢量图形 (Scalable Vec

Ajax学习心得

Ajax学习心得 大致学了下Ajax,才知道它不是某种编程语言,而是一种在无需加载整个页面的情况下能够更新部分网页的技术.了解了它的功能后觉得这真是一种好的技术,这得给前端和运维省多少力啊! 传统的网页没有使用Ajax技术,当更新网页内容时要重新加载页面来重写页面,如果是整个网站,这工作量无疑是巨大的,但有了Ajax技术,我们在后台进行表单设计时,加入相关代码,实现异步输入输出,局部更新,这就使工作变得轻便.例如,现在很多的知名网站,像腾讯,新浪,谷歌,百度地图等等,都使用了这种技术. 而要学习

vue生命周期学习心得(下)

此文接vue生命周期学习心得(上)http://www.cnblogs.com/pengshadouble/p/7488330.html通过vue生命周期学习心得(上),大至了解了vue生命周期的8个阶段及相关钩子函数触发的时间点,这章我们通过简单的代码看一下具体的运行结果: <template> <div id="container"> <headers></headers> <router-view></router

我对大数据相关技术的学习心得及理解

本篇为这一段时间以来我对大数据相关技术的学习心得及理解,主要涉及以下几个方面: noSql, 集群, 数据挖掘, 机器学习,云计算,大数据,以及Hadoop和Spark.主要都是一些初级的概念澄清之类的东西,并且比较凌乱,慎入.* 1. NoSQL我的理解是,NoSQL主要用于存储一些非结构化数据, 是关系数据库与文件存储方式(比如视频文件就适合使用文件的方式存储)的过度. ** 1.1 NoSQL的分类: 列存储: Hbase(BigTable的开源实现),可存储结构化数据. Cassandr