Razzle: Womit kämpfen Sie?

Die Verwaltung von CSS ist etwas umständlich.
Ich verwende BassCSS als globale Dienstprogrammbibliothek und verwende es mit Aphrodite in Komponenten wie:

const styles = StyleSheet.create({
  header: {
    backgroundColor: 'red',
  }
});

const Header = () => <div className={`m1 p2 ${css(styles.header)}`}>...</div>

Auch das Hinzufügen von Komponenten von Drittanbietern mit ihrem eigenen CSS ist chaotisch, ich füge deren CSS entweder in meine "globale" CSS-Datei ein oder schreibe wenn möglich einfach meine eigenen Stile.

Neben CSS, denke ich, benötigt die Arbeit mit statischen Assets wie Bildern auch eine spezielle Lösung für das serverseitige Rendering, sodass es ebenfalls verbessert werden könnte.

Danke für die tolle Arbeit!

Ja, der größte Nachteil von Aphrodite ist, dass sie nicht leicht Curry-Stile komponieren kann. Somit sind Standardstile fast unmöglich.

Ich habe jsxstyle von Pete Hunt in letzter Zeit in einigen Projekten verwendet. Mein Hauptproblem dabei ist, dass die Tasten wirklich sehr nervig sind.

Ich habe auch Probleme mit CSS, ich möchte scss verwenden und habe versucht, den in Ausgabe #60 erwähnten isomorphic-style-loader zu installieren, aber ich bekomme ihn nicht zum Laufen, ich erhalte diesen Fehler:

"Warnung: Fehlgeschlagene Kontexttypen: Erforderlicher Kontext insertCss wurde in WithStyles(App) nicht angegeben. Überprüfen Sie die Rendermethode von RouterContext ".

Der Autor von isomorphic-style-loader hat ein Beispielprojekt, aber sein Router ist anders eingerichtet und ich verstehe nicht, was ich tun soll, damit das funktioniert.

Edit: Egal, ich habe das jetzt aufgegeben

Wie würden Sie die Benutzerauthentifizierung für dieses Projekt angehen?

@developerwok Verwenden Sie passport-js + eine beliebige Strategie (FB, Github usw.), express-session und connect-redis / connect-mongo für die Sitzungspersistenz. Übergeben Sie dann req.user über den Anfangszustand an Ihren Redux-Speicher. Sie können dann eine ensureAuth() Express-Middleware schreiben, um API-Routen zu schützen, und redux-auth-wrapper , um react-router Routen zu schützen.

@developerwok hat das geholfen?

Hallo Jared, ich erhalte keine Wahlwiederholung. Es sieht kompliziert aus und ist eine weitere Abstraktionsschicht. Wäre es möglich, den Datenabruf isomorph zu machen, indem man einfach in den Aktionserstellern etwas wie folgt hinzufügt:

if(window)
  return dispatch ( fetch(url) ).then(do stuff) 
else
 return dispatch ( db.select(posts) ) .then(do stuff)

Ich frage nur, ich habe nicht ganz verstanden, wie isomorpher Datenabruf funktioniert.

Die andere Sache, von der ich nicht sicher bin, ob ich sie verstehe, ist der Teil der asynchronen Routen / der asynchronen Reduzierer. Was ist der Zweck, das asynchron zu machen? Wenn wir SSR haben, wird die Seite dem Benutzer sofort angezeigt, und während er herausfindet, was zu tun ist, kann Bundle.js im Hintergrund geladen werden. Es scheint mir also, dass es bei aktiviertem SSR nicht so wichtig ist, die Größe des js-Downloads zu reduzieren, und die zusätzliche Komplexität von asynchronen Routen / Reduzierern zum Aufteilen des Codes in Stücke lohnt sich nicht, insbesondere für die Art von Projekten, die zu Beginn ein Starter-Kit verwenden würden. Korrigiert mich gerne :)

@misterfresh Async-Routen sorgen für die Minimierung der Bundle-Größe und das js-Sandboxing. Wenn Sie beispielsweise eine geschützte, aber synchronisierte Route haben, werden _alle_ der js Ihrer App weiterhin in Ihre js-Hauptdatei gebündelt. Im Gegensatz dazu, wenn es asynchron ist, wird es aufgeteilt und kann nicht ohne Authentifizierung geladen werden. Auf diese Weise können Sie Ihre App skalieren, ohne sich Gedanken über die Bundle-Größe oder die Weitergabe sensibler Logik an den Client machen zu müssen. Ich stimme zu, dass dies für kleine Apps keine große Sache ist, aber wenn Sie eine App mit ~20 Routen haben (wie wir in meinem Team), wird es immer wichtiger.

Ich habe versucht, meine Routen und den Reduzierer asynchron zu machen, und es funktioniert fast, aber ich erhalte die folgende Fehlermeldung:

combineReducers.js : 36 Unerwartete "Stile" von Eigenschaften, die im vorherigen Zustand gefunden wurden, der vom Reducer empfangen wurde. Es wird erwartet, dass stattdessen einer der bekannten Reduzierer-Eigenschaftsnamen gefunden wird: "display", "user", "project"

@misterfresh

Hallo Jared, ich erhalte keine Wahlwiederholung. Es sieht kompliziert aus und ist eine weitere Abstraktionsschicht. Wäre es möglich, den Datenabruf isomorph zu machen, indem man einfach die Aktionsersteller hinzufügt ...

Wenn Sie Probleme mit der Wahlwiederholung haben, schlage ich vor, sie durch mehr Vanille-Versprechensauflöser zu ersetzen. Github-Suche nach Code mit fetchComponentData() finden Sie einige Beispiele für andere Ansätze zur Lösung von Promises.

Es wäre großartig, wenn Sie dem Boilerplate eine zustandsbehaftete Komponentenseite hinzufügen könnten, dies wird Leuten helfen, die gerade erst damit begonnen haben, die neuen Reaktionskonzepte anzuwenden ...

Ich kämpfe damit, wie großartig diese Boilerplate ist. Vorbereitung für den Start. 😄

Gibt es eine einfache Möglichkeit, von der Clientseite aus auf process.env-Variablen zuzugreifen?

@walshe Sie können initialState einfügen , die hier injiziert werden , stellen Sie sicher, dass Sie auch den jeweiligen Reducer aktualisieren. Denken Sie daran, niemals Passwörter/API-Schlüssel/sensible Informationen zu senden!

ah super, danke

Wie kann ich alle js-lint-Warnungen vorübergehend ignorieren?

Ich habe versucht, eine .eslintignore an der Wurzel hinzuzufügen mit

*/ .js

nu hat keinen Unterschied gemacht

Entfernen Sie den Standard-Loader aus der Webpack-Konfiguration.

Kannst du etwas genauer sagen, welcher Teil geändert werden muss, ich bin ein Neuling bei Webpack

Modul: {
PreLoader: [
{
// Standard-Loader als Preloader einrichten
test: /.jsx?$/,
Lader: 'Standard',
ausschließen: /(node_modules)/
}
],
Lader: [
{
test: /.js$/,
Lader: 'babel',
ausschließen: /(node_modules|server)/,
Anfrage: {
cacheDirectory: true,
Voreinstellungen: ["es2015", "react", "stage-0"]
}
},
]
},

@lewis-elliott zwingt Sie leider zur Wahlwiederholung, "fette Controller" zu haben. Alle SSR-Datenabrufe müssen auf Routenkomponentenebene deklariert werden.

Nein es ist. Mein Fehler. Ich habe deine Frage falsch verstanden. Ich dachte, du redest von verschachtelten Datenabrufen. Sie können sich die Demo der React Router 3 Mega-App ansehen. Im Grunde wird die gleiche Technik verwendet, aber dieses Kit umschließt die Routendeklaration in eine Funktion, wenn Sie Reduzierstücke injizieren müssen.

Ich versuche, CSS-Dateien zu verwenden, kann es aber nicht zum Laufen bringen..Installierter CSS-Loader, Style-Loader..
und in meinem webpack laden
Lader: [
...,
{
test: /.css$/,
loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[ hash:base64 :5]',
ausschließen: /(node_modules|server)/
}
]
Ich bekomme folgende Fehlermeldung, während
npm-Laufstart

[email protected] start /Users/sathish/Desktop/Desktop/reactPro
cross-env NODE_ENV=Entwicklungsknoten -r "babel-register" ./server

/Users/sathish/Desktop/Desktop/reactPro/node_modules/babel-core/lib/transformation/file/index.js:600
werfen Fehler;
^

SyntaxFehler: /Users/sathish/Desktop/Desktop/reactPro/common/routes/Home/components/Home.css: Unerwartetes Token (1:0)

1 | .text {
| ^
2 | Rand: 1px einfarbig schwarz;
3 | }
4 |
bei Parser.pp$5.raise (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:4246:13)
at Parser.pp.unexpected (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:1627:8)
at Parser.pp$3.parseExprAtom (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:3586:12)
bei Parser.parseExprAtom (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:6402:22)
at Parser.pp$3.parseExprSubscripts (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:3331:19)
at Parser.pp$3.parseMaybeUnary (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:3311:19)
at Parser.pp$3.parseExprOps (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:3241:19)
at Parser.pp$3.parseMaybeConditional (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:3218:19)
at Parser.pp$3.parseMaybeAssign (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:3181:19)
bei Parser.parseMaybeAssign (/Users/sathish/Desktop/Desktop/reactPro/node_modules/babylon/lib/index.js:5694:20)

Ich habe erfolglos versucht, dies zu verwenden, da es in der Entwicklung läuft, aber der Produktions-Build verursacht immer noch Probleme.
require.extensions['.css'] = () => {
Rückkehr;
};
Irgendwelche Ideen, wie man das lösen kann..und wie kann ich das Extract-Text-Webpack-Plugin verwenden, um die CSS-Datei zu trennen und sie kann zwischengespeichert werden..Dank der Exporte im Voraus..