2019-04-28 15:36:05 qq_38111015 阅读数 2580

1.vscode扩展搜索 ES7 React/Redux/GraphQL/React-Native snippetsd或者React-Native/React/Redux snippets for es6/es7 并安装(如果安装后者 直接cccs可以一键生成模板块 安装前者 步骤如下)

2. 安装后rcc回车即可生成有状态组件

3.rfc回车 生成无状态组件

4.快速补全react代码  点击左上角文件 --> 首选项 -->设置 

5.在搜索框中输入 emmet.includeLanguages

6.把"emmet.includeLanguages": {"javascript": "javascriptreact"} 贴上去

 

2019-08-19 09:37:15 xdhc304 阅读数 222

1、在vscode中安装这个插件
vscode生成react代码块插件
2、编写代码rcc 就可以生成有状态的组件代码块
rcc
3、编写代码rfc 就可以生成无状态的组件代码块
rfc

2019-11-04 16:20:24 weixin_45416217 阅读数 31

1、首先我们需要安装插件、直接搜索es7就行
在这里插入图片描述
2、在vscode中安装这个插件 编写代码rcc 就可以生成有状态的组件代码块
在这里插入图片描述

import React, { Component } from 'react'

export default class index extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

3、编写代码rfc 就可以生成无状态的组件代码块
在这里插入图片描述

import React from 'react'

export default function index() {
    return (
        <div>
            
        </div>
    )
}
2017-10-13 17:30:07 sixteen_cicle 阅读数 533

动态交互式用户界面

在幕后,React 做了一些操作来让代码高效运行且易于理解:自动绑定(Autobinding)和事件代理(Event Delegation)
常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并(merge) data 到 this.state

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>H5-hello-react</title>

    <!-- 
     <script src="http://fb.me/react-{{site.react_version}}.js"></script>
    <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>

     -->
</head>
<body>


<div id="demo"></div>
<script type="text/jsx">

// 动态交互式用户界面
// 在幕后,React 做了一些操作来让代码高效运行且易于理解:自动绑定(Autobinding)和事件代理(Event Delegation)
// 常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并(merge) data 到 this.state

    // var LikeButton  = React.createClass({
    //  demo:function(){},
    // })
    // var LikeButton = <LikeButton ></LikeButton>;
    // React.render(LikeButton,document.getElementById('demo'))

    var LikeButton  = React.createClass({
        //  demo:function(){},
        getInitialState:function(){
            return {liked:false}
        },
        handleClick:function(){
            this.setState({liked: !this.state.liked});
        },
        render:function(){
            var txt = this.state.liked?'liked':'haven\'t liked';
            return(
                <p onclick={this.handleClick}>
                    You {txt} this. Click to toggle.
                </p>
            );
        },

    });
    var LikeButtonDom = <LikeButton ></LikeButton>;
    React.render(LikeButtonDom,document.getElementById('demo'))

</script>

</body>
</html>
2019-06-16 19:50:39 qq_21948951 阅读数 13

参考

可直接参考:https://github.com/facebook/create-react-app (facebook在github上React开源代码)

环境
  • Windows
  • node.js

了解React

React是由 facebook开发的, 基于 javascript 的前端框架,主要目的是用来构建用户界面,也就是我们经常所说的 UI。那么,在正式开始学习 React 之前,我们首先需要学习如何构建一个基于 React 应用的项目。React 团队为了方便我们进行项目开发,专门提供了一个用来构建 React 项目的脚手架工具,这个工具的使用很简单,无需我们进行多余的配置,只需要我们通过命令的方式来创建项目即可。

创建项目

使用Facebook体统额脚手架工具,创建React项目只需要执行下面命令即可成功创建并运行起来:

 create-react-app first-react
 cd first-react
 cnpm start

在这里插入图片描述
在这里插入图片描述

项目目录如下:

在这里插入图片描述

没有更多推荐了,返回首页