React 的基础之：JSX 语法

react 使用 JSX 语法，js 代码中可以写 HTML 代码。

let myTitle = <h1>Hello, World!</h1>;

JSX 语法解释：

　　(1) JSX 语法的最外层，只能有一个节点：

//错误

let myTitle = <p>Hello</p><p>World</p>

　　(2) JSX 语法中可以插入 JavaScript 代码，使用大括号。

let myTitle = <p>{'Hello' + 'World'}</p>

Babel 转码器

　　js 引擎（包括浏览器和 Node）都不认识 JSX，需要首先使用 Babel 转码，然后才能够运行。

<script src="react.js"></script>

<script src="react-dom.js"></script>

<script src="babel.min.js"></script>

<script type="text/babel">

  // ** 这里添写代码! **

</script>

　　React 需要加载两个库：React 和 React-DOM，前者是 React 的核心库，后者是 React 的 DOM 适配库。

　　Babel 用来在浏览器转换JSX语法，如果服务器已经转好了，浏览器就不需要加载这个库。

React基础之React组件

　　React 允许用户定义自己的组件，插入网页。

示例：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>菜鸟教程 React 实例</title>

    <script src="https://cdn.bootcss.com/react/15.4.2/react.js"></script>

    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

        class MyComponent extends React.Component {

            render() {

                return <h1>Hello world</h1>;

            }

        };

        ReactDOM.render(

            <MyComponent/>,

            document.getElementById('example')

        )；

    </script>

  </body>

</html>

结果：

React组件的语法解释

  • class MyComponent extends React.Component 是 ES 6语法，表示自定义一个 MyComponent 类，该类继承了积累 React.Component 的所有属性和方法。
  • React 规定，自定义组件的开头字母必须大写，比如 MyComponent 不能写为 myComponent，以便于与内置的原生类相区分。
  • 每个组件都必须有 render 方法，定义输出的样式。
  • <MyComponent/> 表示生产一个组件类的实例，每一个实例一定要有闭合标签，写成 <MyComponent></MyComponent> 也可以。

组件的参数

组件可以从外部传入参数，内部使用this.props获取参数。

示例：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>React 实例</title>

    <script src="https://cdn.bootcss.com/react/15.4.2/react.js"></script>

    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

        class MyComponent extends React.Component {

            render() {

                return <h1 style={{color: this.props.color}}>
                           {this.props.name}
                      </h1>;

            }

        };

        ReactDOM.render(

            <MyComponent name='Hello world' color='red' />,

            document.getElementById('example')

        )；

    </script>

  </body>

</html>

结果：

语法解释

  • 组件内部通过this.props对象获取参数。

组件的状态

组件往往会有内部状态，使用this.state表示

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>React 实例</title>

    <script src="https://cdn.bootcss.com/react/15.4.2/react.js"></script>

    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>

    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

  </head>

  <body>

    <div id="example"></div>

    <script type="text/babel">

        class MyComponent extends React.Component {

            constructor(... args) {

                super(...args);

                this.state = {

                    test: 'Hello State',

                    isClicked: false

                };

            }

            handleClick() {

                let isClicked = !this.state.isClicked;

                this.setState({

                    isClicked : isClicked,

                    text: isClicked ?  'Hello State' : Date();

                });

           }

            render() {

                return <h1 onClick={this.handleClick.bind(this)}>

                              clikc to : {this.state.text}

                         </h1>

            }

        };

        ReactDOM.render(

            <MyComponent/>,

            document.getElementById('example')

        )；

    </script>

  </body>

</html>

语法解释

class MyTitle extends React.Component {

    constructor(...args) {

        super(...args);

        this.state = {

           name: '访问者'

        }

    }

}

constructor是组件的构造函数，会在创建实例时自动调用。...args表示组件参数，super(...args)是ES6规定的手法。this.state对象用来存放内部状态，这里是定义初始状态。

<div>

    <input type="text" onChanges={this.handleChange.bind(this)}>

    <p>你好，{this.state.name}</p>

</div>

this.state.name表示读取this.state的name属性。每当输入框有变动的时候，就会自动调用onChange指定的监听函数，这里是this.handleChange, .bind(this)表示该方法内部的this,绑定当前组件。

handleChange(e) {

    let name = e.target.value;

    this.setState({

        name: name

    });

}

this.setState方法用来重置this.state，每次调用这个方法，就会引发组件的重新渲染。

组件的生命周期

React为组件的不同生命周期，提供了近十个钩子方法。

钩子方法：是对于抽象方法或者接口的一个空实现。

现实中的一应用，想要实现某个接口中的一个方法（该接口中有多个方法），先用一个抽象类实现这个接口，然后用abstract修饰想要实现的方法，然后其他方法都使用空实现，然后子类继承抽象类即可。这里的空实现方法就是钩子方法。

  • componentWillMount()：组件加载前调用。
  • componentDidMount()：组件加载后调用。
  • componentWillUpdate()：组件更新前调用。
  • componentDidUpadte()：组件更新后调用。
  • componentWillUnmont()：组件卸载后调用。
  • componentWillReceiveProps()：组件接受新参数时调用。

　　

1.react的基础知识的更多相关文章

  1. React入门---基础知识-大纲-1

    -----------------在慕课网学习react入门笔记-------------- ---------博主边学边记录,手把手进行学习及记录---------- --------------- ...

  2. React JS 基础知识17条

    1. 基础实例 <!DOCTYPE html> <html> <head> <script src="../build/react.js" ...

  3. React.js基础知识

    一. react.js的基本使用方法 (1)快速使用,hello world <div id="app"></div> <script src=&qu ...

  4. react 的基础知识

    react 是目前最流行的框架: 其中是采用 mvvm 的思想,让我们把所有的只关注视图层和逻辑层, 从而可以更好的书写代码: 在 react 中我们的 html 结构也是通过 js 来实现的,而且在 ...

  5. React的入门知识与概念【1】

    回顾在以往的项目开发中,从最初的使用的原生html+js+css+jquery开发,到后来随着项目功能的增加,也渐渐学习了Vue.js框架的开发,以及Vue.js的全家桶Axios,Vue-route ...

  6. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  7. React:快速上手(1)——基础知识

    React:快速上手(1)——基础知识 React(有时叫React.js或ReactJS)是一个为数据提供渲染为HTML视图的开源JavaScript库,用于构建用户界面. JSX.元素及渲染 1. ...

  8. 【温故知新】—— React/Redux/React-router4基础知识&独立团Demo

    前言:React专注View层,一切皆组件:全部使用ES6语法,最新版本为React16. Redux是专注于状态管理的库,和react解耦:单一状态,单向数据流.[独立团github地址] 一.Re ...

  9. 学习React之前你需要知道的的JavaScript基础知识

    在我的研讨会期间,更多的材料是关于JavaScript而不是React.其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内 ...

随机推荐

  1. $.queue() 与 $.dequeue() -- 队列

    JQuery 运用队列为动画模块服务,但好像它应该有更多用处,我觉得的,那试试就知道咯. 简单的来讲,它就是形成队列和出列, 也就因此可以进行很有规律的回调和延时了呀(暂停感觉有难度),当然这就是后面 ...

  2. require.js和sea.js的区别

    下面为大家讲解一下require.js和sea.js的区别.纯属个人意见,不喜勿喷. 首先原理上的区别 sea.js遵循CMD规范.书写方式类似node.js的书写模板代码.依赖的自动加载,配置的简洁 ...

  3. Jsp&Servlet实现读取本地图片并展示

    在Web开发中图片的读取和展示是一个很常见的功能,实现的过程大致也都一样(包括在各种框架中--)!接下来用流的方式来实现图片的展示 1. 创建Servlet,实现读取,请求方式使用get请求:   p ...

  4. SDNLAB技术分享（四）：利用ODL下发流表创建VxLAN网络

    邓晓涛,当前就职于江苏省未来网络创新研究院,是CDN团队的一名研发人员,主要从事SDN相关的研发相关工作.曾就职于三星电子于先行解决方案研发组任高级工程师.思科系统于云协作应用技术部(CCATG)任工 ...

  5. 《Advanced Bash-scripting Guide》学习（二）：测试脚本调用的参数是否正确

    本文所选的例子来自于<Advanced Bash-scripting Gudie>一书,译者 杨春敏 黄毅 #!/bin/bash E_WRONG_ARGS=85 script_param ...

  6. shell脚本：利用7z备份git项目

    注:无git的方法参见:tar 或 7z 备份项目 首先利用homebrew安装p7zip $ brew install p7zip 然后利用两个shell脚本: backupProject.sh 会 ...

  7. 三张图较为好理解JavaScript的原型对象与原型链

    最近从网上看到别人详细得讲解了js的原型对象和原型链,看完感觉是看得最清晰的一个,于是,摘录到自己博客里 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与_ ...

  8. Mybatis 别名机制,自动扫描 数据的增删改

    mybatis别名机制: 在mybatis.xml文件中的<configuration></configuration>标签中间加入属性<typeAliases>& ...

  9. 20180831_jar包冲突2_天安微信httpclient冲突

    一.异常现象 微信项目需要向腾讯服务器发送请求获取token. 但是在请求的时候抛了个异常: <2018-8-30 下午05时39分18秒 CST> <Notice> < ...

  10. Eclipse_插件_05_自动下载jar包源码插件

    一.Java Source Attacher 1.下载 官网:http://marketplace.eclipse.org/content/java-source-attacher#.U5RmTePp ...