commit b151e56463826700112f6caaeff0476f617356de
parent d166547aad23a11efc64ebc43c90ff5fa9642d5a
Author: Konstantin Tarkus <hello@tarkus.me>
Date: Mon, 12 Jan 2015 01:04:37 +0300
Flatten the structure of React components
This way it easier to enforce unique names and corresponding CSS class names, assuming it follows BEM convention:
.ComponentName { }
.ComponentName-elementName { }
.ComponentName-elementName--modificator { }
Diffstat:
15 files changed, 139 insertions(+), 123 deletions(-)
diff --git a/README.md b/README.md
@@ -41,10 +41,6 @@ utilizing a unidirectional data flow.
│ ├── /actions/ # Action creators that allow to trigger a dispatch to stores
│ ├── /assets/ # Static files which are copied to ./build on compile
│ ├── /components/ # React components
-│ │ ├── /common/ # - Shared components. E.g. Link, Mixins
-│ │ ├── /forms/ # - Form components. E.g. TextBox, DatePicker
-│ │ ├── /layout/ # - Layout components. E.g. Header, Navbar
-│ │ └── /pages/ # - Web-page components. E.g. About, Profile
│ ├── /constants/ # Enumerations used in action creators and stores
│ ├── /core/ # Core components (Flux dispatcher, base classes, utilities)
│ ├── /stores/ # Stores contain the application state and logic
diff --git a/src/components/Application/Application.js b/src/components/Application/Application.js
@@ -0,0 +1,85 @@
+/*
+ * React.js Starter Kit
+ * Copyright (c) 2014 Konstantin Tarkus (@koistya), KriaSoft LLC.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+'use strict';
+
+require('./Application.less');
+
+var React = require('react');
+var PageStore = require('../../stores/PageStore');
+var Link = require('../Link');
+var Navbar = require('../Navbar');
+
+/**
+ * Retrieves the current page metadata from the PageStore.
+ * @returns {{title: string}}
+ */
+function getState() {
+ return {
+ title: PageStore.get().title
+ };
+}
+
+var DefaultLayout = React.createClass({
+
+ mixins: [PageStore.Mixin],
+
+ getInitialState() {
+ return getState();
+ },
+
+ componentDidMount() {
+ PageStore.emitChange();
+ },
+
+ render() {
+ /* jshint ignore:start */
+ var header = this.props.children.type.breadcrumb ? (
+ <div className="container">
+ <h2>{this.state.title}</h2>
+ {this.props.children.type.breadcrumb}
+ </div>
+ ) : (
+ <div className="jumbotron">
+ <div className="container text-center">
+ <h1>React</h1>
+ <p>Complex web apps made easy</p>
+ </div>
+ </div>
+ );
+ /* jshint ignore:end */
+
+ return (
+ /* jshint ignore:start */
+ <div>
+ <Navbar />
+ {header}
+ {this.props.children}
+ <div className="navbar-footer">
+ <div className="container">
+ <p className="text-muted">
+ <span>© KriaSoft</span>
+ <span><Link to="/">Home</Link></span>
+ <span><Link to="/privacy">Privacy</Link></span>
+ </p>
+ </div>
+ </div>
+ </div>
+ /* jshint ignore:end */
+ );
+ },
+
+ /**
+ * Event handler for 'change' events coming from the PageStore.
+ */
+ onChange() {
+ this.setState(getState());
+ }
+});
+
+module.exports = DefaultLayout;
diff --git a/src/components/Application/Application.less b/src/components/Application/Application.less
diff --git a/src/components/Application/package.json b/src/components/Application/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "Application",
+ "version": "0.0.0",
+ "private": true,
+ "main": "./Application.js"
+}
diff --git a/src/components/common/Link.js b/src/components/Link/Link.js
diff --git a/src/components/Link/package.json b/src/components/Link/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "Link",
+ "version": "0.0.0",
+ "private": true,
+ "main": "./Link.js"
+}
diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js
@@ -0,0 +1,33 @@
+/*
+ * React.js Starter Kit
+ * Copyright (c) 2014 Konstantin Tarkus (@koistya), KriaSoft LLC.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var React = require('react');
+var Link = require('../Link');
+
+var Navbar = React.createClass({
+
+ render() {
+ return (
+ /* jshint ignore:start */
+ <div className="navbar-top" role="navigation">
+ <div className="container">
+ <Link className="navbar-brand row" to="/">
+ <img src="/images/logo-small.png" width="38" height="38" alt="React" />
+ <span>React.js Starter Kit</span>
+ </Link>
+ </div>
+ </div>
+ /* jshint ignore:end */
+ );
+ }
+
+});
+
+module.exports = Navbar;
diff --git a/src/components/layout/__tests__/Navbar-test.js b/src/components/Navbar/__test__/Navbar-test.js
diff --git a/src/components/Navbar/package.json b/src/components/Navbar/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "Navbar",
+ "version": "0.0.0",
+ "private": true,
+ "main": "./Navbar.js"
+}
diff --git a/src/components/forms/TextBox.js b/src/components/TextBox/TextBox.js
diff --git a/src/components/forms/TextBox.less b/src/components/TextBox/TextBox.less
diff --git a/src/components/layout/App.js b/src/components/layout/App.js
@@ -1,83 +0,0 @@
-/*
- * React.js Starter Kit
- * Copyright (c) 2014 Konstantin Tarkus (@koistya), KriaSoft LLC.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-'use strict';
-
-var React = require('react');
-var PageStore = require('../../stores/PageStore');
-var Link = require('../common/Link');
-var Navbar = require('../layout/Navbar');
-
-/**
- * Retrieves the current page metadata from the PageStore.
- * @returns {{title: string}}
- */
-function getState() {
- return {
- title: PageStore.get().title
- };
-}
-
-var DefaultLayout = React.createClass({
-
- mixins: [PageStore.Mixin],
-
- getInitialState() {
- return getState();
- },
-
- componentDidMount() {
- PageStore.emitChange();
- },
-
- render() {
- /* jshint ignore:start */
- var header = this.props.children.type.breadcrumb ? (
- <div className="container">
- <h2>{this.state.title}</h2>
- {this.props.children.type.breadcrumb}
- </div>
- ) : (
- <div className="jumbotron">
- <div className="container text-center">
- <h1>React</h1>
- <p>Complex web apps made easy</p>
- </div>
- </div>
- );
- /* jshint ignore:end */
-
- return (
- /* jshint ignore:start */
- <div>
- <Navbar />
- {header}
- {this.props.children}
- <div className="navbar-footer">
- <div className="container">
- <p className="text-muted">
- <span>© KriaSoft</span>
- <span><Link to="/">Home</Link></span>
- <span><Link to="/privacy">Privacy</Link></span>
- </p>
- </div>
- </div>
- </div>
- /* jshint ignore:end */
- );
- },
-
- /**
- * Event handler for 'change' events coming from the PageStore.
- */
- onChange() {
- this.setState(getState());
- }
-});
-
-module.exports = DefaultLayout;
diff --git a/src/components/layout/Navbar.js b/src/components/layout/Navbar.js
@@ -1,33 +0,0 @@
-/*
- * React.js Starter Kit
- * Copyright (c) 2014 Konstantin Tarkus (@koistya), KriaSoft LLC.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.txt file in the root directory of this source tree.
- */
-
-'use strict';
-
-var React = require('react');
-var Link = require('../common/Link');
-
-var Navbar = React.createClass({
-
- render() {
- return (
- /* jshint ignore:start */
- <div className="navbar-top" role="navigation">
- <div className="container">
- <Link className="navbar-brand row" to="/">
- <img src="/images/logo-small.png" width="38" height="38" alt="React" />
- <span>React.js Starter Kit</span>
- </Link>
- </div>
- </div>
- /* jshint ignore:end */
- );
- }
-
-});
-
-module.exports = Navbar;
diff --git a/src/components/pages/Index.js b/src/components/pages/Index.js
@@ -10,7 +10,7 @@
var React = require('react');
var PageActions = require('../../actions/PageActions');
-var App = require('../layout/App');
+var App = require('../Application');
var HomePage = React.createClass({
diff --git a/src/components/pages/Privacy.js b/src/components/pages/Privacy.js
@@ -10,8 +10,8 @@
var React = require('react');
var PageActions = require('../../actions/PageActions');
-var App = require('../layout/App');
-var Link = require('../common/Link');
+var App = require('../Application');
+var Link = require('../Link');
var PrivacyPage = React.createClass({
