HashMap 双重检验锁 nhibernate primefaces model flexbox GMU vue网页 vue学习教程 java反射方法 mysql数据库驱动 python for循环 python语言编程 python建站 javasubstring javase教程 java中的基本数据类型 java中正则表达式 java的集合框架 java删除文件 linux目录 customerrors 神龙kms 防沉迷助手 pr转场特效下载 saminside pr黑场过渡 fireworks8 模拟人生2夜生活 微信公众号点餐系统 ios12录屏 lrc软件 相册制作软件 nastran 苹果手机耳机没声音 苹果8怎么截屏 python去重 软件编程软件 winrar去广告版 音乐制作器
当前位置: 首页 > 学习教程  > 编程语言

创建umi+react项目

2020/9/19 14:46:22 文章标签:

随着前端开发中使用node,前端就可以开发模块化和大型化的项目,本文结合umi+react来创建前端项目。

创建步骤

  • 初始化:tyarn init -y
  • 添加umi:tyarn add umi --dev
  • 创建config/config.js全局配置文件--export default {};
  • 创建src/pages/HelloWorld.js等页面
  • 添加umi-plugin-react插件:tyarn add umi-plugin-react --dev或者tyarn add @umijs/preset-react -D
  • 运行:umi dev

react使用jsx语法来编程

基础语法链接:https://blog.csdn.net/quietbxj/article/details/108680584

//定义变量
const name="12345";

export default ()=>{
    return  <div>
        <p>hello world {name}-(通过{}使用js语法)</p>
    </div>;
}

创建和使用组件

组件是React中最最核心的概念,一个页面就是有许多组件组成的。

React定义组件核心代码

import React from 'react';

class Index extends React.Component{
    render() {
    }
}

export default Index;

React组件举例

import React from 'react';

class Index extends React.Component{
    render() {
        return <div>this is index page</div>;
    }
}

export default Index;

 

 

 


本文链接: http://www.dtmao.cc/news_show_200167.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?