前言

学习react有一段时间了，第一遍学习的时候，学的云里来雾里去，只懂了一些皮毛，因为react技术栈包括的内容挺多的，主要包括react、react-router、redux，还有一些辅助工具，比如webpack、ES6、git这些都要学，可以说是必学的。不然很难阅读别人写的什么。我当时这些都不会，公司让我熟悉项目我就sb了。后面我一个模块一个模块的学习。到目前基础的基本都掌握了。
下面我们来学习react基本用法:

一、HTML模板

ES5的写法：

<!DOCTYPE html>
<html>
  <head>
    <!--分别引入react、react-dom和转化成ES5的库-->
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      // ** Our code goes here! **
    </script>
  </body>
</html>

ES6的写法：

//分别引入react、react-dom库
//有人可能会问这些库在哪？
//这些库已经用npm 指令 打包到内存中了，所以只需要引入即可。
import React,{ Component } from 'react';
import { render } from 'react-dom';
//还缺一个转化ES5的库哦,这时就用到了webpack的loader。

二、ReactDOM.render()

ReactDOM.render()是react最基本的方法，用于将模板转化为HTML语言，并插入指定的DOM节点。

//ES5
RenderDOM.render(
    <h1>Hello World!</h1>,
    document.getElementById("root")
)
//ES6
render(
    <h1>Hello world！</h1>,
    document.getElementById('root')
)

三、JSX语法

上一例的代码，HTML直接可以写在javascript语言中，不需要加任何引号，这就是JSX语法，它允许HTML和javascript的混写。

／／ES5
var names = ['Alice', 'Emily', 'Kate'];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('example')
);
//ES6

import React,{ Component } from 'react';
import { render } from 'react-dom';

var name = ['xiao','tianxia','bb'];

class Name extends Component{
    constructor(props){
        super(props);
        this.state = {

        }
    }
    render(){
        return(
            <div>
                {
                    name.map(function(item,index){
                        //console.log(item);
                        return (
                            <h1 key={index}> Hello {item}</h1>
                        )
                    })
                }
            </div>
        )
    }
}
export default Name;

上面体现了JSX的基本语法规则，遇到 < 就按照HTML规则解析，遇到 { 就按照 javascript语法解析。
上面运行的结果如下：

  • Hello xiao
  • Hello tianxia
  • Hello bb

JSX允许直接在模板中插入JavaScript变量。如果这个变量是一个数组，则会展开这个数组中的所有成员。

//ES5
var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);
//ES6
var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
render(){
        return(
            <div>
                {name}
            </div>
        )
    }

上面代码arr是一个数组，结果JSX会把它所有的成员添加到模板中。运行结果如下：

Hello world！
React is awesome

四、组件

React允许将代码封装成组件（component）,然后像插入普通HTML标签一样，在网页中插入组件。在ES5中React.createClass()就用于生成一个组件类。

var Message = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});

ReactDOM.render(
  <Message name="John" />,
  document.getElementById('example')
);
//ES6

import React,{ Component } from 'react';
import { render } from 'react-dom';

class Message extends Component{
    constructor(props){
        super(props);
        this.state = {
            name: 'xiao'
        }
    }
    render(){
        return (
            <h1> Hello {this.props.name}</h1>
        )
    }
}
export default Message;

Message的父组件是Main

//index.js
import "../css/reset.css";
import "../css/common.css";
import React,{ Component } from "react";
import { render } from "react-dom";

//var react = requie("react");
//var React = require("react");
//var ReactDOM = require("react-dom");
import Header from "../Components/header";
import Content from "../Components/content";
import Footer from "../Components/footer";
import Hello from "../Components/update";
import Name from "../Components/name";
import Message from "../Components/message";

class Main extends Component{
    render(){
        return (
            <div className="container">
                <Header />
                {
                    /*
                    <Content url = "http://datainfo.duapp.com/shopdata/getGoods.php" />
                    */
                }
                <Hello />
                <Name />
                <Message name="tianxia"/> //看这里,我是Message组件哦！
                <Content />
                <Footer />
            </div>
        )
    }
}
render(
    <Main />,
    document.getElementById("root")
);

待更新中

Logo
AtomGit 开源协作平台测评赛

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐

ADS1292R 使用 过程 心电图 高精度ADC模块

文章目录1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础https://www.ti.com.cn/cn/lit/wp/slyy192/slyy192.pdf?ts=1600659610730&ref_u

avatar 开放原子开发者工作坊
cover

实现一个家庭安防与环境监测系统（一）

avatar 开放原子开发者工作坊

【cf】Codeforces Round #774 (Div. 2) 前4题

题目A. Square Counting 简单数学题目大意题解代码B. Quality vs Quantity 排序题目大意题解代码C. Factorials and Powers of Two 状态压缩dp+位运算题目大意题解代码D. Weight the Tree 树形dp+dfs题目大意题解代码E. Power Board 看起来像是数论？许多年没打cf了，偶尔打了一盘，恢复紫名了。A. S

avatar 开放原子开发者工作坊