在学习react之前,希望你有以下准备:

react的安装
ECMAScript 6基础

本文不讲解react的安装步骤,若需了解请移步官方网站(https://reactjs.org/),那里讲解非常清楚,也很简单。
至于ECMAScript 6,大家可以去阮一峰老师的官网(http://www.ruanyifeng.com)学习。

这篇文章主要解决一下几个要点, 这几个要点也可能是大家在学习react时非常迷惑的地方。

要点一:
什么是组件?

要点二:
如何编写组件?

要点三:
组件之间如何组合使用?

在弄清这些要点之前,我们先来看,react安装后的目录是怎样的,应该在哪个目录下进行开发。

看截图:


可以说这个就是react的标准目录结构,打开src目录:

看截图:

这个目录下就是你将要开发组件的地方。

弄清了react的目录结构,我们正式来讲解要点。

什么是组件?

请记住:export关键字导出的就是组件

这个就是react的核心思想。一个网站的构成可以看成是很多组件的集合。

比如一个网站的首页分为头部,主内容区域,底部。那么这三个大区域就可以当作组件。然后每个区域里的内容块又可以当作组件,以此类推,可以划分成更小的组件。我们可以来看一张图:

说形象点组件就像定义的很多功能函数,通过配置参数,组合调用这些函数,最后就可以实现一个完整的网站。
组件的好处就是能重复使用,既能减少开发量,也能让代码干净整洁,逻辑清晰,方便阅读。

组件如此的美好,那该怎么来编写呢?

第二个问题,如何编写组件。
在编写组件之前,我自己通常把组件分成两种,非UI组件和UI组件。

看例子:

//App.js

import React, { Component } from 'react';
import './App.css'; class App extends Component { render() { return (
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
</div>
);
}
} export default App;

这是一个UI组件。是一个非常简单的组件。即便不了解es6的同学,也能秒懂。
由此,我们可以把UI的组件书写结构标准化,如下:

//MyApp.js

import React, { Component } from 'react';

class MyApp extends Component {
//其它的功能代码
render() {
return (
//UI代码
);
}
} export default MyApp;

依次类推,我们也可以把非UI的组件书写结构标准化,如下:

//Myfn.js

let Myfn = {
http(params){
//代码
}
showMessage(msg){
//代码
}
...
//其它代码
} export default Myfn;

对比一下,发现两者有以下不同:

UI组件需要class语句
UI组件需要render函数
反之则不需要。

相同点:
react规定,组件名首字母必须大写。
为了便于代码管理和阅读,最好让组件名和组件内部导出的绑定名字统一。

组件写法我们会了,那如何让组件组合使用呢?
以上面的例子说明,如果我想在MyApp.js里使用Myfn,可以这样使用:

//MyApp.js

import React, { Component } from 'react';
import Myfn from './Myfn'; //注意这句,此处的Myfn.js的扩展名可以省去 class MyApp extends Component {
//其它的功能代码
showMsg(msg){
Myfn.showMessage(msg); //注意这句
}
render() {
//this.showMsg('hello world!')或
//Myfn.showMessage('hello world!')
return (
//UI代码
);
}
} export default MyApp;

是不是很简单?
记住一句话:非UI组件通常是导入到UI组件里使用的,非UI组件通常为UI组件渲染时提供逻辑处理。

原创教程之——reactjs 组件入门教程的更多相关文章

  1. Android Navigation 架构组件入门教程

    Android Navigation 架构组件入门教程 版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请表明出处:https://www.cnblogs.com/cavalier-/p/1 ...

  2. highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

    highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小  大] | ...

  3. 转:git教程 ~~非常好的入门教程

    --------------------------------------- notes: cdmkdir dirnametouchls > filenamelsecho "this ...

  4. Monster Audio 使用教程(一)入门教程 + 常见问题

    Monster Audio支持的操作系统: windows 7 64bit 至 windows 10 64bit 受支持的VST: Vst 64bit.Vst3 64bit 受支持的声卡驱动: ASI ...

  5. [转][Unreal3教程]引擎使用操作入门教程

    前言 如果你想转载这篇文章,请不要把这篇文章的来源去掉:http://blog.sina.com.cn/zjmjeo 一来是对我辛苦写这篇文章肯定,二来我可以有更多机会和你们这些朋友交流 1.打开引擎 ...

  6. laravel 中CSS 预编译语言 Sass 快速入门教程

    CSS 预编译语言概述 CSS 作为一门样式语言,语法简单,易于上手,但是由于不具备常规编程语言提供的变量.函数.继承等机制,因此很容易写出大量没有逻辑.难以复用和扩展的代码,在日常开发使用中,如果没 ...

  7. WPF入门教程系列二十三——DataGrid示例(三)

    DataGrid的选择模式 默认情况下,DataGrid 的选择模式为“全行选择”,并且可以同时选择多行(如下图所示),我们可以通过SelectionMode 和SelectionUnit 属性来修改 ...

  8. 转:Scrapy安装、爬虫入门教程、爬虫实例(豆瓣电影爬虫)

    Scrapy在window上的安装教程见下面的链接:Scrapy安装教程 上述安装教程已实践,可行.(本来打算在ubuntu上安装Scrapy的,但是Ubuntu 磁盘空间太少了,还没扩展磁盘空间,所 ...

  9. Scrapy安装、爬虫入门教程、爬虫实例(豆瓣电影爬虫)

    Scrapy在window上的安装教程见下面的链接:Scrapy安装教程 上述安装教程已实践,可行.(本来打算在ubuntu上安装Scrapy的,但是Ubuntu 磁盘空间太少了,还没扩展磁盘空间,所 ...

随机推荐

  1. 杭电 4004 The Frog's Games 青蛙跳水 (二分法,贪心)

    Description The annual Games in frogs' kingdom started again. The most famous game is the Ironfrog T ...

  2. POJ 2553 The Bottom of a Graph(强连通分量的出度)

    题意: 求出图中所有汇点 定义:点v是汇点须满足 --- 对图中任意点u,若v可以到达u则必有u到v的路径:若v不可以到达u,则u到v的路径可有可无. 模板:http://www.cnblogs.co ...

  3. Redis 主从复制与哨兵

    Redis 可以使用从属服务器来实现读写分离提高吞吐量或在主服务器故障时接替主服务器以提高可用性. 每个 Redis 服务器实例都可以配置多个 slave 节点,slave 服务器也可以拥有次级 sl ...

  4. Java学习--异常处理及其应用类

    异常是运行时在代码序列中引起的非正常状况,换句话说,异常是运行时错误.在不支持异常处理的计算机语言中,必须手动检查和处理错误----通常是通过使用错误代码,等等.这种方式既笨拙又麻烦.Java的异常处 ...

  5. 安装mysql后无法找到临时密码的解决方案

    安装mysql后无法找到临时密码的解决方案 一.环境 系统:CentOS7mysql:5.7.20 二.解决步骤 step1:修改/etc/my.cnf添加: skip-grant-tables   ...

  6. php 数据库的增删改查

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>&l ...

  7. 字典树模板题 POJ 2503

    #include <cstdio> #include <cstring> ],fr[]; int st; struct Tire{ ]; ]; }node[]; void in ...

  8. ES6__Iterator和for...of循环

    /** * Iterator和for...of循环 */ // --------------------------------------------------------------- /** ...

  9. jQuery的对象访问函数(get,index,size,each)

    1.get() 元素集合 取得所有匹配的 DOM 元素集合. 这是取得所有匹配元素的一种向后兼容的方式(不同于jQuery对象,而实际上是元素数组). 如果你想要直接操作 DOM 对象而不是 jQue ...

  10. msp430入门编程36

    msp430中C语言的可移植--面向接口实现