An example of using React with Bootstrap styling

react-bootstrap-exampls.jsx

import React from 'react'; // or const React = require('react');

/*
The first this I do is figure out what I need to build. I know that I will need 1) a form
with an input, 2) a submit button and I'll be putting the names in a 3) list group. So,
I look those up on http://bootstrapdocs.com and find the following.

Forms - http://bootstrapdocs.com/v3.3.6/docs/css/#forms
Buttons - http://bootstrapdocs.com/v3.3.6/docs/css/#buttons
List Groups - http://bootstrapdocs.com/v3.3.6/docs/components/#list-group

Now, I can look at their documentation and see what styling classes I'll need to make those.

Wherever I can, I'll use the Bootstrap styling classes to apply styles, but in
places where I need my own styling I'll add a styling object to each component
for holding those.

*/

/*
This will be a completely stateless, functional component. Notice that all
the styling is done using Bootstrap sytling classes taken from the docs.
Using Bootstrap styling classes allows you to standardize your styling API.
This way, when you are done building in the functionality you want, you can
then go into the Bootstrap source and change anything you want. Maybe you
want to get rid of the rouded corners or the shadows on inputs. You don't
want to change things like that inside each component. You want to use the
general styling classes then change all of them at once later on when you
dive into the very straightforward Bootstrap LESS or SCSS source.
*/
const NameForm = ({ newName, onChange, onSubmit }) => {
    return (
        <form onSubmit={onSubmit}>
            <div className="form-group">
                <label>Name:</label>
                <input type="text" value={newName} onChange={onChange} placeholder={'Enter New Name'}></input>
            </div>
            <div className="form-group">
                <button type="submit" className="btn btn-default center-block" disabled={newName ? false : true}><span className="glyphicon glyphicon-plus"></span> Add Name To List</button>
            </div>
        </form>
    );
};
NameForm.propTypes = {
    newName: React.PropTypes.string,
    onChange: React.PropTypes.func,
    onSubmit: React.PropTypes.func
};

/*
This component will hold our state. In a Redux application, this would also
be a stateless component. But, for the sake of this example, I am using only
React.
*/
class NameList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            newName: '',
            names: []
        };
        this.nameChanged = this.nameChanged.bind(this);
    }

    nameChanged(e) {
        e.preventDefault();
        this.setState({
            ...this.state,
            newName: e.target.value
        });
    }

    addName(e) {
        e.preventDefault();
        const { state } = this;
        const { newName, names } = state;
        if(!newName) {
            alert('You must enter a name!');
            return;
        } else if(names.includes(newName)) {
            alert('You already entered that name!');
            return;
        }
        this.setState({
            ...state,
            newName: '',
            names: [...names, newName]
        });
    }

    render() {

        const { nameChanged, addName } = this;
        const { newName, names } = this.state;

        const nameList = names
            .reverse()
            .map(n => <li key={n} className="list-group-item">{n}</li>);

        // Any component that needs specific styling gets a styles object
        const styles = {
            container: {
                marginTop: 20,
                marginBottom: 20
            },
            header: {
                fontSize: 40,
                lineHeight: '60px',
                fontFamily: 'monospace'
            }
        };

        return (
            <div style={styles.container} className="container">
                <div className="row">
                    <div className="col-sm-12">
                        <h2 style={styles.header} className="text-center">My Name List</h2>
                    </div>
                </div>
                <div className="row">
                    <div className="col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
                        <NameForm newName={newName} onChange={nameChanged} onSubmit={addName}></NameForm>
                    </div>
                </div>
                <div className="row">
                    <div className="col-md-offset-3 col-md-6 col-lg-offset-4 col-lg-4">
                        <ul>
                            {nameList}
                        </ul>
                    </div>
                </div>
            </div>
        );
    }

}

export default NameList; // or module.exports = LoginPage;