如何安装使用semantic-ui和Gulp的传统版React？

1. 首先需要安装Node.js和npm。

2. 在终端中进入项目文件夹并运行以下命令以安装React和semantic-ui：

   npm install react@0.14.7 semantic-ui --save
   

3. 安装Gulp并将其添加到项目的开发依赖中：

   npm install gulp --save-dev
   

4. 创建一个Gulpfile.js文件并添加以下代码：

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    less = require('gulp-less'),
    minifyCSS = require('gulp-minify-css');

gulp.task('js', function() {
  gulp.src(['node_modules/react/dist/react.js', 'node_modules/react-dom/dist/react-dom.js'])
    .pipe(concat('vendor.js'))
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('public/js'));
});

gulp.task('css', function() {
  gulp.src('node_modules/semantic-ui/dist/semantic.css')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('public/css'));
});

gulp.task('watch', function() {
  gulp.watch('node_modules/react/dist/*.js', ['js']);
  gulp.watch('node_modules/semantic-ui/dist/*.less', ['css']);
});

gulp.task('default', ['js', 'css', 'watch']);

5. 运行以下命令以启动Gulp任务并监视文件更改：

   gulp
   

现在您可以在项目中使用semantic-ui和传统版的React。例如，在React组件中，您可以导入semantic-ui的样式表并使用其中的元素：

import React from 'react';
import 'semantic-ui/dist/semantic.min.css';
import { Button } from 'semantic-ui-react';

const MyComponent = () => (
  <Button primary>Click me</Button>
);

export default MyComponent;