Skip to content

Commit

Permalink
Make homepage examples more approachable (#10872)
Browse files Browse the repository at this point in the history
  • Loading branch information
gaearon authored and bvaughn committed Sep 27, 2017
1 parent 14d0ef4 commit 57e3b54
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 16 deletions.
6 changes: 3 additions & 3 deletions www/src/components/CodeEditor/CodeEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ class CodeEditor extends Component {
}}>
<div
css={{
flex: '0 0 50%',
flex: '0 0 70%',
overflow: 'hidden',
borderRadius: '10px 0 0 10px',

Expand Down Expand Up @@ -137,7 +137,7 @@ class CodeEditor extends Component {
{error &&
<div
css={{
flex: '0 0 50%',
flex: '0 0 70%',
overflow: 'hidden',
border: `1px solid ${colors.error}`,
borderRadius: '0 10px 10px 0',
Expand Down Expand Up @@ -167,7 +167,7 @@ class CodeEditor extends Component {
{!error &&
<div
css={{
flex: '0 0 50%',
flex: '0 0 30%',
overflow: 'hidden',
border: `1px solid ${colors.divider}`,
borderRadius: '0 10px 10px 0',
Expand Down
4 changes: 4 additions & 0 deletions www/src/css/reset.css
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,7 @@ img {
display: inline-block;
vertical-align: top;
}

pre {
font-family: source-code-pro, Menlo, Consolas, "Courier New", monospace;
}
41 changes: 28 additions & 13 deletions www/src/templates/home.js
Original file line number Diff line number Diff line change
Expand Up @@ -317,26 +317,34 @@ const markdownStyles = {

// TODO Move these hard-coded examples into example files and out of the template?
// Alternately, move them into the markdown and transform them during build?
const name = Math.random() > .5 ? 'John' : 'Jane';
const HELLO_COMPONENT = `
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(<HelloMessage name="Devin" />, mountNode);
ReactDOM.render(
<HelloMessage name="${name}" />,
mountNode
);
`.trim();

const TIMER_COMPONENT = `
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {secondsElapsed: 0};
this.state = { seconds: 0 };
}
tick() {
this.setState((prevState) => ({
secondsElapsed: prevState.secondsElapsed + 1
seconds: prevState.seconds + 1
}));
}
Expand All @@ -350,7 +358,9 @@ class Timer extends React.Component {
render() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
<div>
Seconds: {this.state.seconds}
</div>
);
}
}
Expand All @@ -362,9 +372,9 @@ var TODO_COMPONENT = `
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.state = {items: [], text: ''};
}
render() {
Expand All @@ -373,20 +383,25 @@ class TodoApp extends React.Component {
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<input onChange={this.handleChange} value={this.state.text} />
<button>{'Add #' + (this.state.items.length + 1)}</button>
<input
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Add #{this.state.items.length + 1}
</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({text: e.target.value});
this.setState({ text: e.target.value });
}
handleSubmit(e) {
e.preventDefault();
var newItem = {
const newItem = {
text: this.state.text,
id: Date.now()
};
Expand Down Expand Up @@ -417,15 +432,15 @@ class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = {value: 'Type some *markdown* here!'};
this.state = { value: 'Type some *markdown* here!' };
}
handleChange(e) {
this.setState({value: e.target.value});
this.setState({ value: e.target.value });
}
getRawMarkup() {
var md = new Remarkable();
const md = new Remarkable();
return { __html: md.render(this.state.value) };
}
Expand Down

0 comments on commit 57e3b54

Please sign in to comment.