# react-redux-course-lecture-1
**Repository Path**: reactor/react-redux-course-lecture-1
## Basic Information
- **Project Name**: react-redux-course-lecture-1
- **Description**: 从零开始学习 React & Redux 系列第一讲
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 2
- **Forks**: 0
- **Created**: 2016-12-01
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 从 0 开始学 React
## 开始本课程
```bash
cd ~
mkdir -p worksapce/playground/react-redux-course
cd ~/workspace/playground/react-redux-course
git clone git@git.oschina.net:reactor/react-redux-course-lecture-1.git
cd react-redux-course-lecture-1
npm i --registry=https://registry.npm.taobao.org
npm start
```
## 需求
1. 用户打开网页，可以看到有一个导航条；
2. 在导航条的下面，是一个从上往下排列的资产列表；
3. 用户可以选择某一个资产，查看该资产的详细信息；
4. 用户可以选择并申请使用某一个资产；
5. 用户可以查看自己使用过、申请过以及使用中的所有资产列表。
这样的页面，我们可以打开 [`design.html`](./design.html) 文件，
## 官方示例 create-react-app
```bash
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
```
在接下来的代码示例中，我们可以打开 [Babeljs.io](http://babeljs.io/repl/) 实时的查看自己
编码的代码将被如何运行。
## Hello World - JSX
```es6
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
Hello, world!
,
document.getElementById('root')
);
```
在上面代码中，ReactDOM 将 `` 这个组件渲染至 `id` 为 `root` 的 `dom` 元素中。通过
`Babel` 编译后，上面的代码最终看起来会是下面这样的：
```javascript
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {
default: obj }; }
_reactDom2.default.render(_react2.default.createElement(
'h1',
null,
'Hello, world!'
), document.getElementById('root'));
```
### 我们知道了什么？
1. 推荐使用 ES6 来写 React 程序；
2. 在浏览器对 ES6 的支持还不完善的情况下，我们需要使用 Babel 工具将 ES6 代码编译成 ES5；
3. Webpack 会帮我们把 ES6 写的代码，通过 Babel 编译后再打包到一个文件里面去；
4. JSX 是好是坏暂且不说，但至少，我不再需要在 HTML 与 JavaScript 里面来回切换了；
5. 一个组件，最终的 `html` 代码只是用来在浏览器展示界面用而已，而它本质上，只是 React 中
一个对象而已。
## 组件化
将 `` 标签提取出来，作成一个组件：
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
function component() {
return Hello, world!
;
}
ReactDOM.render(
component,
document.getElementById('root')
);
```
Babel 编译后的代码如下：
```javascript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : {
default: obj }; }
function component() {
return _react2.default.createElement(
'h1',
null,
'Hello, world!'
);
}
exports.default = function () {
_reactDom2.default.render(component, document.getElementById('root'));
};
```
但是，上面的代码并不会有任何展示。
### 为什么？
1. 你需要传给 `ReactDOM.render` 的，不是组件本身，而是组件的实例（Instance）；
2. 为了与原生的 `html` 标签进行区分，任何一个 `React` 组件，都必须首字母大写；
## 把 `html` 模板转成 JSX 代码
这很简单，有了 JSX，我们可以直接在 `javascript` 中写 `HTML`，所以，直接复制`design.html`
中 `body` 元素以内的内容至 `js` 文件即可，点击 [src/design-jsx.js](src/design-jsx.js)
文件，可以看到我们转换后在JSX代码，然后到浏览器中查看。
这个时候， `terminal` 中应该报错了：
```bash
ERROR in ./src/design-jsx.js
Module build failed: SyntaxError: Adjacent JSX elements must be wrapped in an
enclosing tag
```
为什么？
1. 任何一个组件，最终都只允许被包裹在一个元素中，不允许由多个并行的元素展示一个组件；
2. `class` 是 `ES6` 中的关键字，它和 `es6` 中 **类** `class` 冲突，我们需要换成
`className` 代替，同样的，在写表单的时候，还有一个 `