本文主要是介绍开发你的第一个React + Ant Design网页(一、配置+编写主页),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
前言
React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源。出身名门的React也不负众望,成功成为当前最火热的三大前端框架之一。相比于Angular,React更加轻量。而相对于另一个轻量级前端框架Vue来说,React虽然学习和使用起来难度稍微大一些,但是React的社区相对来说人气更旺,而且在移动端的开发上面,大名鼎鼎的React Native更是尽显优势,在代码性能上要好过Vue框架。今天我们就来对React进行一个入门的学习。
这里还要用到的是一个UI设计语言,Ant Design。Ant Design同样出身名门,是阿里巴巴旗下蚂蚁金融服务集团(旗下拥有支付宝、余额宝等产品)所设计的一个前端UI组件库。目前支持了React, 并且有一个对Vue支持的测试版本。
正文
配置
这里我们需要用到的开发工具有
- Webstorm
Node.js(npm) 或 Yarn
关于Webstorm的安装和npm的配置,在我的另一篇博客 从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建) 里面有详细的介绍。这里不再赘述。
我们进入命令行,输入
npm install -g create-react-app yarn
对create-react-app这个脚手架进行全局安装。然后进入到我们的workspace中,输入如下代码
create-react-app antd-demo
就可以创建一个名字为andt-demo的React工程。创建的过程很有特点,像是在给硬盘整理碎片。
创建完之后我们就可以在Webstorm中打开这个工程。目录结构如下
这个时候我们就完成了最基本的工程创建。如果我们此时在命令行中进入这个工程,并输入
npm start
稍等一会之后浏览器会启动一个新的标签页。如图。
这里面使用了热加载技术,我们在代码中做出的改变会实时显示在页面上。
接下来我们还要做一件事: 引入Ant design的组件库:
yarn add antd
这样工程就已经配置完毕了。
创建主页
在src中创建一个文件夹,名为Navi,在Navi文件夹下面创建一个Navi.js和一个Navi.css文件。
在Navi.js中,加入如下代码
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import React, { Component } from 'react';
import 'antd/dist/antd.css';
import logo from '../logo.svg';
import './Navi.css'
const { Header, Content, Footer, Sider } = Layout;class SiderDemo extends Component {state = {collapsed: false,mode: &#
这篇关于开发你的第一个React + Ant Design网页(一、配置+编写主页)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!