react学习系列之Hello Mr World

时间 2019-12-07

标签 react 学习系列 hello world 栏目 React 繁體版

原文原文链接

配置篇

经过Webpack和Babel-core在开发过程当中转换JSX/ES 2015javascript

肯定安装了`node.js`和`npm`，而后安装全局packages,这里用的是淘宝的`cnpm`

cnpm install webpack browser-sync -g

建立目录和文件

在本地项目中建立须要目录，而且在其下面建立子目录和文件。css

├── build
├── index.html
├── package.json
├── src
│   ├── app.js
│   ├── app.css
└── webpack.config.js

打开 package.json 文件，而且建立一个空的JSON对象：html

{

}

经过`cnpm`安装依赖关系

cnpm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 browser-sync css-loader extract-text-webpack-plugin style-loader webpack --save-dev

cnpm install react react-dom

配置`Webpack`

var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: ['./src/app.js'],
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'appBundle.js'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader")
        }, {
            loader: 'babel-loader',
            exclude: /node_modules/,
            test: /\.js$/,
            query: {
                presets: ['es2015', 'react', 'stage-0'],
            },
        }]
    },
    plugins: [
        new ExtractTextPlugin("style.css", {
            allChunks: true
        })
    ]
};

配置`package.json`

在依赖项上插入以下代码java

"scripts": {
    "webpack": "webpack --watch",
    "server": "browser-sync --port 4000 start --server --files \"**/*.html\" \"build/**/*.css\" \"build/**/*.js\" "
},

运行`Webpack`和`server`

在你项目根目录下运行下面的 cnpm 命令：node

cnpm run webpack

同时打开另外一个命令窗口运行下面的 cnpm 命令：react

cnpm run server

运行这两行命令开发的代码就能跑起来了。webpack

若是你遵循全部的步骤操做，而且没有出错的话，那么Browsersync应该会打开浏览器在 http://localhost:4000 这个地址上加载 index.html 和 app.js 。Webpack和Browsersync会运行所作的修改。web

至此，就能够看到跑起来的页面，能够开始愉快的写代码啦算法

开发篇

配置index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="./build/appBundle.js"></script>
</body>
</html>

配置app.js

import React from 'react';
import ReactDOM from 'react-dom';

var Hello = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,
  },
  render: function() {
    return <div style={{color: 'red'}}>Hello {this.props.title} {this.props.name}</div>;
  }
});

ReactDOM.render(
  <Hello name="World" title="Mr"/>,
  document.getElementById('app')
);

基本概念

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。typescript
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它容许 HTML 与 JavaScript 的混写，JSX和typescript同样，都是语法糖。遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。JSX 容许直接在模板插入 JavaScript 变量。若是这个变量是一个数组，则会展开这个数组的全部成员
变量 Hello 是一个组件类。模板插入 <Hello /> 时，会自动生成 Hello 的一个实例。全部组件类都必须有本身的 render 方法，用于输出组件。
注意，组件类的第一个字母必须大写，不然会报错，好比Hello不能写成hello。另外，组件类只能包含一个顶层标签，不然也会报错。
```
var Hello = React.createClass({
  render: function() {
    return <h1>
      Hello {this.props.name}
    </h1><p>
      some text
    </p>;
  }
});
```
上面代码会报错，由于Hello组件包含了两个顶层标签：h1和p。
组件的用法与原生的 HTML 标签彻底一致，能够任意加入属性，好比 <Hello name="John"> ，就是 Hello 组件加入一个 name 属性，值为 John。组件的属性能够在组件类的 this.props 对象上获取，好比 name 属性就能够经过 this.props.name 读取。
添加组件属性，有一个地方须要注意，就是 class 属性须要写成 className ，for 属性须要写成 htmlFor ，这是由于 class 和 for 是 JavaScript 的保留字。
组件的属性能够接受任意值，字符串、对象、函数等等均可以。有时，咱们须要一种机制，验证别人使用组件时，提供的参数是否符合要求。组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求.上图代码PropTypes 告诉 React，这个 title 属性是必须的，并且它的值必须是字符串。若是通不过验证，会报错
getDefaultProps 方法能够用来设置组件属性的默认值。组件类实例里声明的属性优先级比这个高
```
getDefaultProps : function () {
    return {
      title : 'Hello World'
    };
  }
```
组件并非真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫作虚拟 DOM （virtual DOM）。只有当它插入文档之后，才会变成真实的 DOM 。根据 React 的设计，全部的 DOM 变更，都先在虚拟 DOM 上发生，而后再将实际发生变更的部分，反映在真实 DOM上，这种算法叫作 DOM diff ，它能够极大提升网页的性能表现。

Hello是一个自定义的React compenents，经过React.createClass建立，经过ReactDom.render方法呈现到页面，第一个参数是要渲染的React compenents，第二个参数是渲染完以后要插入位置
页面渲染的html结构以下

配置样式的两种方式

经过className
和普通的添加class写法同样，只不过class是保留字，因此采用className来代替
内联样式
如上图写法，css属性要采用驼峰法，如fontSize

参考资料

React几种基本配置方案
 React 入门实例教程