React学习(一)-UI

React 中文: https://doc.react-china.org/
React 英文官网: https://reactjs.org/

从零开始学一门语言并不是一个容易的事，但是我不想局限于 Objective-C，不论是客户端还是网页还是服务器，在我的理解上都是一个应用: 数据层 + 网络层 + 业务层(UI + 事件传递)。

如果对语法比较自信，可以直接从 UI 入手，毕竟动手写出一个界面是能看的到的，否则还是老老实实去学语法。当然学习的方式每个人都不同，选一个适合自己的效果最好，像我虽然还不怎么熟练 react 语法，但是已经跃跃欲试去写界面了，我觉得我在写的过程中遇到问题去解决问题，提升是最快的。(缺点是这样底层懂的不够多，只知道 how，不知道 why)。

简单的 UI 控件

第一篇先简单地介绍一下 UI 控件。代码可以前往https://github.com/MR-yo/ReactStudy

label

用 React 实现一个 label 比在客户端实现要简单的多

<h1 className="App-title">Welcome to React</h1>

<p className="App-intro">
   To get started, edit <code>src/App.js</code> and save to reload.
</p>

// .css 文件中处理布局以及属性
.App-title {
  font-size: 1.5em;
  margin: 0;
}

横向对比 Objective-C

    UILabel *testLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 120, 15)];
    testLabel.text = @"Welcome to React";
    testLabel.font = [UIFont systemFontOfSize:14.0];
    testLabel.textColor = [UIColor blackColor];
    testLabel.numberOfLines = 0;
    testLabel.textAlignment = NSTextAlignmentCenter;
    [self.view addSubview:testLabel];

css 布局显然厉害的多，写一处代码，其他地方class一赋值就好了，OC 的代码这样一看是真的烦..
灵光一闪，好像 OC 写一个 Category 也可以实现。或者用 runtime 绑定一个 className 属性,在 set 方法中实现

- (UILabel *)setClass_Normal:(UILabel *)label
{
    label.font = [UIFont systemFontOfSize:14.0];
    label.textColor = [UIColor blackColor];
    label.numberOfLines = 0;
    label.textAlignment = NSTextAlignmentCenter;
    return label;
}

实践了一下，确实可行。 然而这只是设置属性方面，css 更强在布局上，iOS的布局是真的弱..

html中还有个 a 标签，专门用作跳链接的

<a href="你的链接" className="App-bottomText" style=>设为首页</a>

button

    <button className="App-searchBtn" onClick={clickSearchBtn} >百度一下</button>

跟 label 差不多，就标签换了一个，onclick 方法也不是 button 专属的，很多标签都可以实现。

imageView

      <img src={home} alt="" className="App-bgImage" />

其实不需要一个专门的 img 便签，一个 div 设置backgroundImage 就行。不过图片的加载方式以及显示方式需要好好研究一下。图片显示畸形的话会显得很 low。

input

    <input id="searchInput" className="App-input"/>

一般都会有默认样式，需要自己更改属性。

总结

实现都挺简单的，关键就是属性的设置，这就需要学习 CSS 知识。
w3school: http://www.w3school.com.cn/css/index.asp
我的总结: https://mr-yo.github.io/2018/01/04/CSS万能手册/

学会画出一个简单的界面后，

继续模仿界面，写HTML+CSS。
开始了解各种事件，以及组件的生命周期。
开始了解网络请求，同步异步处理数据等等。

加油！