webstorm 创建react组件_WebStorm构建react.js项目

react.js npm.js node.js

1.安装node.js环境 点我进入nodejs官网

2.下载LTS(Long term support)版本，安装

3.在cmd中使用以下命令查看node是否安装成功

node -v //查看node版本

4.在命令行中进入需要构建demo的文件夹

cd D:\workspace//这里演示的是进入D盘符下的workspace文件夹

5.因为node.js 自带npm 我们使用以下命令构建create-react-app 手脚架

npm install -g create-react-app

6.使用手脚架构建项目

create-react-app create-basic

7.跳转到当前文件加下 启动项目

npm start

启动成功 打开页面

8.下载https://www.jetbrains.com/webstorm/ webstrom 本人用的64位的

WebStorm 2019.3.3 x64

9.把上面安装的npm和node配置到webStorm工具中

10.把刚刚新建的项目导入到webStorm中

11.webStorm中配置启动项

12.在src中创建一个文件夹Navi，并在文件夹里创建Navi.js和Navi.css文件

在Navi.js中，加入如下代码

import { Layout, Menu, Breadcrumb } from \'antd\';

import { Icon } from \'@ant-design/compatible\';

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: \'inline\',

};

toggle = () => {

this.setState({

collapsed: !this.state.collapsed,

});

}

openDilao=()=>{

}

render() {

return (

用户管理视频管理下载管理

Information Management System

UserBill

Ant Design ©2016 Created by Ant UED

);

}

}

export default SiderDemo;

在Navi.css中加入如下代码：

.App-logo {

animation: App-logo-spin infinite 10s linear;

height: 60px;

}

@keyframes App-logo-spin {

from { transform: rotate(0deg); }

to { transform: rotate(360deg); }

}

.logo {

height: 32px;

background: #333;

border-radius: 6px;

margin: 16px;

}

.ant-layout-sider-collapsed .anticon {

font-size: 16px;

}

.ant-layout-sider-collapsed .nav-text {

display: none;

}

上面就是一个带有导航栏的主页。我们写好了主页之后，还需要做一件事情，就是把这个组件挂载到程序的入口文件中。我们修改index.js，修改后的代码如下

import babel-polyfill;

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

//import App from './App';

import SiderDemo from ./Navi/Navi;

ReactDOM.render(,document.getElementById(root));