projet simple web fonctionnant avec tissu React

Question

---- ---- ACTUALISATION

eu à travailler en utilisant les éléments suivants:

• Webpack
• Tapuscrit
• TS- loader
• réagir
• reac-dom
• @ types/réagissent
• @ types/réagissent-dom
• bureau-ui-tissu réagir

Une fois que j'avais simple RÉAGIR exemple en cours d'exécution, il était facile de faire la même chose pour le tissu réagissent .

Quelques bons tutoriels:

• https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
• https://medium.com/@gmonne/simple-app-layout-with-office-ui-fabric-react-2eac6361e1b4

---

---- Original post ----

En tant que nouveau venu à React/node Je veux créer une application de test en Visual Studio 2017 en utilisant Fabric React (Fabric puisque je veux adopter l'aspect et la convivialité d'Office). Maintenant, j'ai passé d'innombrables heures à trouver comment faire fonctionner cela, et rencontrer problème après problème (par exemple créer package.json, l'installation Gulp, etc.) Il existe de nombreux tutoriels sur ce sujet, mais ils semblent tous être un peu dispersé ou juste sur 1 des dépendances.

Pour commencer:

• Je veux construire une application web - très simple/base, à des fins de test, et il suffit d'utiliser certains des composants d'interface utilisateur Fabric.
• Je crée ce projet Web dans Visual Studio 2017 en tant qu'application Web principale ASP.NET (.NET Core)
• Ma version Visual Studio 2017 est la suivante: Community 2017, version 15.2 (26430.13)
• Utilisation de tissu-REACT (et non FabricJS)
• En utilisant avec Gulp comme suggéré à http://dev.office.com/fabric#/get-started

Jusqu'à présent, je l'ai utilisé les documents suivants:

• https://dev.office.com/fabric#react
• http://dev.office.com/fabric#Overview
• https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
• http://leruplund.dk/2017/04/15/setting-up-asp-net-core-in-visual-studio-2017-with-npm-webpack-and-typescript-part-i/
• What is the correct way to set up gulp in Visual Studio 2017?
• https://travismaynard.com/writing/getting-started-with-gulp

Et probablement un peu plus que j'ai oublié ..

Les étapes réalisées:

1. Installé Node (v6.11.2)
2. créé mon projet web appelé Test2
3. Ajouté npm (v3.10.10) à mon projet en utilisant le programme d'installation Package Nuget
4. a créé le fichier package.json. Je ne sais pas plus, après 100 tests, si je l'ai fait manuellement à l'aide npm init ou cela a été fait automatiquement en installant NPM dans mon projet, de toute façon, il est dans mon projet:

5. Installé gulp (en utilisant ce lien What is the correct way to set up gulp in Visual Studio 2017?), bref résumé, j'ai converti mon fichier bundleconfig.json à Gulp en utilisant l'extension Bundler &.
6. si Testée Gulp RAN (et la mise à jour package.json) en utilisant Task runner explorer (travail):
7. installé le bureau-ui-tissu-REACT comme expliqué ici (https://dev.office.com/fabric#react), également installé réagir et réagissent-dom comme expliqué ici (http://dattabase.com/sharepoint-app-fabric-ui-react-part-1-3/)
8. Ajout d'un tas de code à mon dossier site.js (qui est lié à mon avis MVC) - a ajouté la barre de commande code tissu réagissent répertorié ici: http://dev.office.com/fabric#Variants

Ceci est la partie où je Je suis coincé. Premièrement, je ne suis pas sûr, étant inhabituel de réagir en général, si je devais ajouter les composants comme ça à mon avis. En second lieu, cela ne fonctionne pas et me donner l'erreur suivante:

site.js:5 Uncaught SyntaxError: Unexpected token import 

Quelqu'un sait sur quelle étape il a mal tourné? Quelques infos supplémentaires: Paquet.JSON contient:

{ 
    "name": "test2", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "del": "^3.0.0", 
    "gulp": "^3.9.1", 
    "gulp-concat": "^2.6.1", 
    "gulp-cssmin": "^0.2.0", 
    "gulp-htmlmin": "^3.0.0", 
    "gulp-uglify": "^3.0.0", 
    "merge-stream": "^1.0.1" 
    }, 
    "dependencies": { 
    "office-ui-fabric-react": "^4.34.0", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1" 
    } 
} 

site.js contient:

import * as React from 'react'; 
import { assign } from 'office-ui-fabric-react/lib/Utilities'; 
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar'; 
import { Toggle } from 'office-ui-fabric-react/lib/Toggle'; 

export class CommandBarBasicExample extends React.Component<any, any> { 

    constructor(props: any) { 
     super(props); 
     this.state = { 
      isSearchBoxVisible: true, 
      areNamesVisible: true, 
      areIconsVisible: true 
     }; 
    } 

    public render() { 
     let { items, overflowItems, farItems } = this.props; 
     let { isSearchBoxVisible: searchBoxVisible, areIconsVisible: iconsVisible, areNamesVisible: namesVisible } = this.state; 

     let filteredItems = items.map((item: any) => assign({}, item, { 
      name: namesVisible ? item.name : '', 
      icon: iconsVisible ? item.icon : '' 
     })); 

     let filteredOverflowItems = overflowItems.map((item: any) => assign({}, item, { 
      name: namesVisible ? item.name : '', 
      icon: iconsVisible ? item.icon : '' 
     })); 

     let filteredFarItems = farItems.map((item: any) => assign({}, item, { 
      name: namesVisible ? item.name : '', 
      icon: iconsVisible ? item.icon : '' 
     })); 

     return (
      <div> 
       <Toggle 
        label='Show search box' 
        checked={searchBoxVisible} 
        onChanged={isSearchBoxVisible => this.setState({ isSearchBoxVisible })} 
        onText='Visible' 
        offText='Hidden' 
       /> 
       <Toggle 
        label='Show names' 
        checked={namesVisible} 
        onChanged={areNamesVisible => this.setState({ areNamesVisible })} 
        onText='Visible' 
        offText='Hidden' /> 
       <Toggle 
        label='Show icons' 
        checked={iconsVisible} 
        onChanged={areIconsVisible => this.setState({ areIconsVisible })} 
        onText='Visible' 
        offText='Hidden' /> 
       <CommandBar 
        isSearchBoxVisible={searchBoxVisible} 
        searchPlaceholderText='Search...' 
        elipisisAriaLabel='More options' 
        items={filteredItems} 
        overflowItems={filteredOverflowItems} 
        farItems={filteredFarItems} 
       /> 
      </div> 
     ); 
    } 
} 

Mon aperçu du projet:

Answer 1

L'exemple que vous essayez d'exécuter, est donné en TypeScript, mais vous semblez l'exécuter en tant qu'application de noeud (JavaScript). Le typecript doit être installé globalement (npm install typescript -g). Vous pouvez ensuite compiler .ts ou .tsx à partir de la ligne de commande en tapant tsc site.tsx. Notez que le type de fichier doit être tsx pour un fichier contenant un modèle JSX, et il doit être .ts pour un fichier contenant un typeScript standard.

Mon conseil pour vous est de suivre this excellent example sur la façon de créer une nouvelle application React avec TypeScript en utilisant Webpack. C'est sympa de vous familiariser avec Gulp en tant que tâche-runner, mais Gulp n'est en aucun cas nécessaire pour le développement de React. Une fois que l'exemple est opérationnel, vous pouvez inclure office-ui-fabric-react et créer des applications avec les composants.