chore(challenges): Normalise challengeTypes
This commit is contained in:
Stuart Taylor
committed by
Mrugesh Mohapatra
Mrugesh Mohapatra
parent
a028471a86
commit
2d77dc00b6
@ -56,7 +56,7 @@
|
||||
"solutions": [
|
||||
"class DisplayMessages extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: '',\n messages: []\n }\n }\n render() {\n return <div/>\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -114,7 +114,7 @@
|
||||
"solutions": [
|
||||
"class DisplayMessages extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: '',\n messages: []\n }\n this.handleChange = this.handleChange.bind(this); \n this.submitMessage = this.submitMessage.bind(this); \n }\n handleChange(event) {\n this.setState({\n input: event.target.value\n });\n }\n submitMessage() {\n const currentMessage = this.state.input;\n this.setState({\n input: '',\n messages: this.state.messages.concat(currentMessage)\n });\n }\n render() {\n return (\n <div>\n <h2>Type in a new Message:</h2>\n <input\n value={this.state.input}\n onChange={this.handleChange}/><br/>\n <button onClick={this.submitMessage}>Submit</button>\n <ul>\n {this.state.messages.map( (message, idx) => {\n return (\n <li key={idx}>{message}</li>\n )\n })\n }\n </ul>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"reactRedux": true
|
||||
@ -151,7 +151,7 @@
|
||||
"solutions": [
|
||||
"const ADD = 'ADD';\n\nconst addMessage = (message) => {\n return {\n type: ADD,\n message\n }\n};\n\nconst messageReducer = (state = [], action) => {\n switch (action.type) {\n case ADD:\n return [\n ...state,\n action.message\n ];\n default:\n return state;\n }\n};\n\nconst store = Redux.createStore(messageReducer);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"reactRedux": true
|
||||
@ -265,7 +265,7 @@
|
||||
"solutions": [
|
||||
"// Redux Code:\nconst ADD = 'ADD';\n\nconst addMessage = (message) => {\n return {\n type: ADD,\n message\n }\n};\n\nconst messageReducer = (state = [], action) => {\n switch (action.type) {\n case ADD:\n return [\n ...state,\n action.message\n ];\n default:\n return state;\n }\n};\n\nconst store = Redux.createStore(messageReducer);\n\n// React Code:\n\nclass DisplayMessages extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: '',\n messages: []\n }\n this.handleChange = this.handleChange.bind(this); \n this.submitMessage = this.submitMessage.bind(this); \n }\n handleChange(event) {\n this.setState({\n input: event.target.value\n });\n }\n submitMessage() {\n const currentMessage = this.state.input;\n this.setState({\n input: '',\n messages: this.state.messages.concat(currentMessage)\n });\n }\n render() {\n return (\n <div>\n <h2>Type in a new Message:</h2>\n <input\n value={this.state.input}\n onChange={this.handleChange}/><br/>\n <button onClick={this.submitMessage}>Submit</button>\n <ul>\n {this.state.messages.map( (message, idx) => {\n return (\n <li key={idx}>{message}</li>\n )\n })\n }\n </ul>\n </div>\n );\n }\n};\n\nconst Provider = ReactRedux.Provider;\n\nclass AppWrapper extends React.Component {\n // change code below this line\n render() {\n return (\n <Provider store = {store}>\n <DisplayMessages/>\n </Provider>\n );\n }\n // change code above this line\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"reactRedux": true
|
||||
@ -303,7 +303,7 @@
|
||||
"solutions": [
|
||||
"const state = [];\n\n// change code below this line\n\nconst mapStateToProps = (state) => {\n return {\n messages: state\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"reactRedux": true
|
||||
@ -346,7 +346,7 @@
|
||||
"solutions": [
|
||||
"const addMessage = (message) => {\n return {\n type: 'ADD',\n message: message\n }\n};\n\n// change code below this line\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n submitNewMessage: function(message) {\n dispatch(addMessage(message));\n }\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"reactRedux": true
|
||||
@ -429,7 +429,7 @@
|
||||
"solutions": [
|
||||
"const addMessage = (message) => {\n return {\n type: 'ADD',\n message: message\n }\n};\n\nconst mapStateToProps = (state) => {\n return {\n messages: state\n }\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n submitNewMessage: (message) => {\n dispatch(addMessage(message));\n }\n }\n};\n\nclass Presentational extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return <h3>This is a Presentational Component</h3>\n }\n};\n\nconst connect = ReactRedux.connect;\n// change code below this line\n\nconst ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational); \n"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"reactRedux": true
|
||||
@ -560,7 +560,7 @@
|
||||
"solutions": [
|
||||
"// Redux:\nconst ADD = 'ADD';\n\nconst addMessage = (message) => {\n return {\n type: ADD,\n message: message\n }\n};\n\nconst messageReducer = (state = [], action) => {\n switch (action.type) {\n case ADD:\n return [\n ...state,\n action.message\n ];\n default:\n return state;\n }\n};\n\nconst store = Redux.createStore(messageReducer);\n\n// React:\nclass Presentational extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: '',\n messages: []\n }\n this.handleChange = this.handleChange.bind(this); \n this.submitMessage = this.submitMessage.bind(this); \n }\n handleChange(event) {\n this.setState({\n input: event.target.value\n });\n }\n submitMessage() {\n const currentMessage = this.state.input;\n this.setState({\n input: '',\n messages: this.state.messages.concat(currentMessage)\n });\n }\n render() {\n return (\n <div>\n <h2>Type in a new Message:</h2>\n <input\n value={this.state.input}\n onChange={this.handleChange}/><br/>\n <button onClick={this.submitMessage}>Submit</button>\n <ul>\n {this.state.messages.map( (message, idx) => {\n return (\n <li key={idx}>{message}</li>\n )\n })\n }\n </ul>\n </div>\n );\n }\n};\n\n// React-Redux:\nconst mapStateToProps = (state) => {\n return { messages: state }\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n submitNewMessage: (newMessage) => {\n dispatch(addMessage(newMessage))\n }\n }\n};\n\nconst Provider = ReactRedux.Provider;\nconst connect = ReactRedux.connect;\n\n// define the Container component here:\nconst Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);\n\nclass AppWrapper extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n // complete the return statement:\n return (\n <Provider store={store}>\n <Container/>\n </Provider>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"reactRedux": true
|
||||
@ -694,7 +694,7 @@
|
||||
"solutions": [
|
||||
"// Redux:\nconst ADD = 'ADD';\n\nconst addMessage = (message) => {\n return {\n type: ADD,\n message: message\n }\n};\n\nconst messageReducer = (state = [], action) => {\n switch (action.type) {\n case ADD:\n return [\n ...state,\n action.message\n ];\n default:\n return state;\n }\n};\n\nconst store = Redux.createStore(messageReducer);\n\n// React:\nconst Provider = ReactRedux.Provider;\nconst connect = ReactRedux.connect;\n\n// Change code below this line\nclass Presentational extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: ''\n }\n this.handleChange = this.handleChange.bind(this); \n this.submitMessage = this.submitMessage.bind(this); \n }\n handleChange(event) {\n this.setState({\n input: event.target.value\n });\n }\n submitMessage() {\n this.props.submitNewMessage(this.state.input);\n this.setState({\n input: ''\n });\n }\n render() {\n return (\n <div>\n <h2>Type in a new Message:</h2>\n <input\n value={this.state.input}\n onChange={this.handleChange}/><br/>\n <button onClick={this.submitMessage}>Submit</button>\n <ul>\n {this.props.messages.map( (message, idx) => {\n return (\n <li key={idx}>{message}</li>\n )\n })\n }\n </ul>\n </div>\n );\n }\n};\n// Change code above this line\n\nconst mapStateToProps = (state) => {\n return {messages: state}\n};\n\nconst mapDispatchToProps = (dispatch) => {\n return {\n submitNewMessage: (message) => {\n dispatch(addMessage(message))\n }\n }\n};\n\nconst Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);\n\nclass AppWrapper extends React.Component {\n render() {\n return (\n <Provider store={store}>\n <Container/>\n </Provider>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"reactRedux": true
|
||||
@ -749,7 +749,7 @@
|
||||
"solutions": [
|
||||
"console.log('Now I know React and Redux!');"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"reactRedux": true
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
"solutions": [
|
||||
"const JSX = <h1>Hello JSX!</h1>;"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -92,7 +92,7 @@
|
||||
"solutions": [
|
||||
"const JSX = (\n<div>\n <h1>Hello JSX!</h1>\n <p>Some info</p>\n <ul>\n <li>An item</li>\n <li>Another item</li>\n <li>A third item</li>\n </ul>\n</div>);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -132,7 +132,7 @@
|
||||
"solutions": [
|
||||
"const JSX = (\n<div>\n <h1>This is a block of JSX</h1>\n { /* this is a JSX comment */ }\n <p>Here's a subtitle</p>\n</div>);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -174,7 +174,7 @@
|
||||
"solutions": [
|
||||
"const JSX = (\n<div>\n <h1>Hello World</h1>\n <p>Lets render this to the DOM</p>\n</div>\n);\n// change code below this line\nReactDOM.render(JSX, document.getElementById('challenge-node'));"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -213,7 +213,7 @@
|
||||
"solutions": [
|
||||
"const JSX = (\n<div className = 'myDiv'>\n <h1>Add a class to this div</h1>\n</div>);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -259,7 +259,7 @@
|
||||
"solutions": [
|
||||
"const JSX = (\n<div>\n {/* change code below this line */}\n <h2>Welcome to React!</h2> <br />\n <p>Be sure to close all tags!</p>\n <hr />\n {/* change code above this line */}\n</div>\n);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -302,7 +302,7 @@
|
||||
"solutions": [
|
||||
"\nconst MyComponent = function() {\n // change code below this line\n return (\n <div>\n Demo Solution\n </div>\n );\n // change code above this line\n}"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -350,7 +350,7 @@
|
||||
"solutions": [
|
||||
"\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n // change code below this line\n return (\n <div>\n <h1>Hello React!</h1>\n </div>\n );\n // change code above this line\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -410,7 +410,7 @@
|
||||
"solutions": [
|
||||
"const ChildComponent = () => {\n return (\n <div>\n <p>I am the child</p>\n </div>\n );\n};\n\nclass ParentComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h1>I am the parent</h1>\n { /* change code below this line */ }\n <ChildComponent />\n { /* change code above this line */ }\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -484,7 +484,7 @@
|
||||
"solutions": [
|
||||
"const TypesOfFruit = () => {\n return (\n <div>\n <h2>Fruits:</h2>\n <ul>\n <li>Apples</li>\n <li>Blueberries</li>\n <li>Strawberries</li>\n <li>Bananas</li>\n </ul>\n </div>\n );\n};\n\nconst Fruits = () => {\n return (\n <div>\n { /* change code below this line */ }\n <TypesOfFruit />\n { /* change code above this line */ }\n </div>\n );\n};\n\nclass TypesOfFood extends React.Component {\n constructor(props) {\n super(props);\n }\n\n render() {\n return (\n <div>\n <h1>Types of Food:</h1>\n { /* change code below this line */ }\n <Fruits />\n { /* change code above this line */ }\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -596,7 +596,7 @@
|
||||
"solutions": [
|
||||
"class Fruits extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h2>Fruits:</h2>\n { /* change code below this line */ }\n <NonCitrus />\n <Citrus />\n { /* change code above this line */ }\n </div>\n )\n }\n}\n\nclass TypesOfFood extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h1>Types of Food:</h1>\n { /* change code below this line */ }\n <Fruits />\n { /* change code above this line */ }\n <Vegetables />\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -686,7 +686,7 @@
|
||||
"solutions": [
|
||||
"\nclass TypesOfFood extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h1>Types of Food:</h1>\n {/* change code below this line */}\n <Fruits />\n <Vegetables />\n {/* change code above this line */}\n </div>\n );\n }\n};\n\n// change code below this line\nReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'));"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -720,7 +720,7 @@
|
||||
"solutions": [
|
||||
"// change code below this line\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h1>My First React Component!</h1>\n </div>\n );\n }\n};\n\nReactDOM.render(<MyComponent />, document.getElementById('challenge-node'));"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -784,7 +784,7 @@
|
||||
"solutions": [
|
||||
"\nconst CurrentDate = (props) => {\n return (\n <div>\n { /* change code below this line */ }\n <p>The current date is: {props.date}</p>\n { /* change code above this line */ }\n </div>\n );\n};\n\nclass Calendar extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h3>What date is it?</h3>\n { /* change code below this line */ }\n <CurrentDate date={Date()} />\n { /* change code above this line */ }\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -850,7 +850,7 @@
|
||||
"solutions": [
|
||||
"const List= (props) => {\n return <p>{props.tasks.join(', ')}</p>\n};\n\nclass ToDo extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h1>To Do Lists</h1>\n <h2>Today</h2>\n <List tasks={['study', 'exercise']} />\n <h2>Tomorrow</h2>\n <List tasks={['call Sam', 'grocery shopping', 'order tickets']} />\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -890,7 +890,7 @@
|
||||
"solutions": [
|
||||
"const ShoppingCart = (props) => {\n return (\n <div>\n <h1>Shopping Cart Component</h1>\n </div>\n )\n};\n\n// change code below this line\nShoppingCart.defaultProps = {\n items: 0\n}"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -941,7 +941,7 @@
|
||||
"solutions": [
|
||||
"const Items = (props) => {\n return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>\n}\n\nItems.defaultProps = {\n quantity: 0\n}\n\nclass ShoppingCart extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n { /* change code below this line */ }\n return <Items quantity = {10} />\n { /* change code above this line */ }\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1004,7 +1004,7 @@
|
||||
"solutions": [
|
||||
"const Items = (props) => {\n return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>\n};\n\n// change code below this line\nItems.propTypes = {\n quantity: PropTypes.number.isRequired\n};\n// change code above this line\n\nItems.defaultProps = {\n quantity: 0\n};\n\nclass ShoppingCart extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return <Items />\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1073,7 +1073,7 @@
|
||||
"solutions": [
|
||||
"class ReturnTempPassword extends React.Component {\n constructor(props) {\n super(props);\n\n }\n render() {\n return (\n <div>\n <p>Your temporary password is: <strong>{this.props.tempPassword}</strong></p>\n </div>\n );\n }\n};\n\nclass ResetPassword extends React.Component {\n constructor(props) {\n super(props);\n\n }\n render() {\n return (\n <div>\n <h2>Reset Password</h2>\n <h3>We've generated a new temporary password for you.</h3>\n <h3>Please reset this password from your account settings ASAP.</h3>\n { /* change code below this line */ }\n <ReturnTempPassword tempPassword=\"serrPbqrPnzc\" />\n { /* change code above this line */ }\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1128,7 +1128,7 @@
|
||||
"solutions": [
|
||||
"class CampSite extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <Camper/>\n </div>\n );\n }\n};\n// change code below this line\n\nconst Camper = (props) => {\n return (\n <div>\n <p>{props.name}</p>\n </div>\n );\n};\n\nCamper.propTypes = {\n name: PropTypes.string.isRequired\n};\n\nCamper.defaultProps = {\n name: 'CamperBot'\n};\n"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1179,7 +1179,7 @@
|
||||
"solutions": [
|
||||
"\nclass StatefulComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'freeCodeCamp!'\n }\n }\n render() {\n return (\n <div>\n <h1>{this.state.name}</h1>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1232,7 +1232,7 @@
|
||||
"solutions": [
|
||||
"class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'freeCodeCamp'\n }\n }\n render() {\n return (\n <div>\n { /* change code below this line */ }\n <h1>{this.state.name}</h1>\n { /* change code above this line */ }\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1286,7 +1286,7 @@
|
||||
"solutions": [
|
||||
"class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'freeCodeCamp'\n }\n }\n render() {\n // change code below this line\n const name = this.state.name;\n // change code above this line\n return (\n <div>\n { /* change code below this line */ }\n <h1>{name}</h1>\n { /* change code above this line */ }\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1344,7 +1344,7 @@
|
||||
"solutions": [
|
||||
"class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'Initial State'\n };\n this.handleClick = this.handleClick.bind(this);\n }\n handleClick() {\n // change code below this line\n this.setState({\n name: 'React Rocks!'\n });\n // change code above this line\n }\n render() {\n return (\n <div>\n <button onClick = {this.handleClick}>Click Me</button>\n <h1>{this.state.name}</h1>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1406,7 +1406,7 @@
|
||||
"solutions": [
|
||||
"class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n itemCount: 0\n };\n this.addItem = this.addItem.bind(this);\n }\n addItem() {\n this.setState({\n itemCount: this.state.itemCount + 1\n });\n }\n render() {\n return (\n <div>\n <button onClick = {this.addItem}>Click Me</button>\n <h1>Current Item Count: {this.state.itemCount}</h1>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1471,7 +1471,7 @@
|
||||
"solutions": [
|
||||
"class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visibility: false\n };\n this.toggleVisibility = this.toggleVisibility.bind(this);\n }\n toggleVisibility() {\n this.setState({\n visibility: !this.state.visibility\n });\n }\n render() {\n if (this.state.visibility) {\n return (\n <div>\n <button onClick = {this.toggleVisibility}>Click Me</button>\n <h1>Now you see me!</h1>\n </div>\n );\n } else {\n return (\n <div>\n <button onClick = {this.toggleVisibility}>Click Me</button>\n </div>\n );\n }\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1530,7 +1530,7 @@
|
||||
"solutions": [
|
||||
"class Counter extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n count: 0\n };\n this.increment = this.increment.bind(this);\n this.decrement = this.decrement.bind(this);\n this.reset = this.reset.bind(this);\n }\n reset() {\n this.setState({\n count: 0\n });\n }\n increment() {\n this.setState({\n count: this.state.count + 1\n });\n }\n decrement() {\n this.setState({\n count: this.state.count - 1\n });\n }\n render() {\n return (\n <div>\n <button className='inc' onClick={this.increment}>Increment!</button>\n <button className='dec' onClick={this.decrement}>Decrement!</button>\n <button className='reset' onClick={this.reset}>Reset</button>\n <h1>Current Count: {this.state.count}</h1>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1591,7 +1591,7 @@
|
||||
"solutions": [
|
||||
"class ControlledInput extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: ''\n };\n this.handleChange = this.handleChange.bind(this);\n }\n handleChange(event) {\n this.setState({\n input: event.target.value\n });\n }\n render() {\n return (\n <div>\n <input\n value={this.state.input}\n onChange={this.handleChange} />\n <h4>Controlled Input:</h4>\n\n <p>{this.state.input}</p>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1664,7 +1664,7 @@
|
||||
"solutions": [
|
||||
"class MyForm extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: '',\n submit: ''\n };\n this.handleChange = this.handleChange.bind(this);\n this.handleSubmit = this.handleSubmit.bind(this);\n }\n handleChange(event) {\n this.setState({\n input: event.target.value\n });\n }\n handleSubmit(event) {\n event.preventDefault()\n this.setState({\n submit: this.state.input\n });\n }\n render() {\n return (\n <div>\n <form onSubmit={this.handleSubmit}>\n <input\n value={this.state.input}\n onChange={this.handleChange} />\n <button type='submit'>Submit!</button>\n </form>\n <h1>{this.state.submit}</h1>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1726,7 +1726,7 @@
|
||||
"solutions": [
|
||||
"class MyApp extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n name: 'CamperBot'\n }\n }\n render() {\n return (\n <div>\n <Navbar name={this.state.name}/>\n </div>\n );\n }\n};\nclass Navbar extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h1>Hello, my name is: {this.props.name}</h1>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1814,7 +1814,7 @@
|
||||
"solutions": [
|
||||
"class MyApp extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n inputValue: ''\n }\n this.handleChange = this.handleChange.bind(this); \n }\n handleChange(event) {\n this.setState({\n inputValue: event.target.value\n });\n }\n render() {\n return (\n <div>\n <GetInput\n input={this.state.inputValue}\n handleChange={this.handleChange}/>\n <RenderInput\n input={this.state.inputValue}/>\n </div>\n );\n }\n};\n\nclass GetInput extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h3>Get Input:</h3>\n <input\n value={this.props.input}\n onChange={this.props.handleChange}/>\n </div>\n );\n }\n};\n\nclass RenderInput extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <div>\n <h3>Input Render:</h3>\n <p>{this.props.input}</p>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1866,7 +1866,7 @@
|
||||
"solutions": [
|
||||
"class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n }\n componentWillMount() {\n // change code below this line\n console.log('Component is mounting...');\n // change code above this line\n }\n render() {\n return <div />\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1921,7 +1921,7 @@
|
||||
"solutions": [
|
||||
"class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n activeUsers: null\n };\n }\n componentDidMount() {\n setTimeout( () => {\n this.setState({\n activeUsers: 1273\n });\n }, 2500);\n }\n render() {\n return (\n <div>\n <h1>Active Users: {this.state.activeUsers}</h1>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -1991,7 +1991,7 @@
|
||||
"solutions": [
|
||||
"class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n message: ''\n };\n this.handleKeyPress = this.handleKeyPress.bind(this);\n this.handleEnter = this.handleEnter.bind(this); }\n componentDidMount() {\n // change code below this line\n document.addEventListener('keydown', this.handleKeyPress);\n // change code above this line\n }\n componentWillUnmount() {\n // change code below this line\n document.removeEventListener('keydown', this.handleKeyPress);\n // change code above this line\n }\n handleEnter() {\n this.setState({\n message: this.state.message + 'You pressed the enter key! '\n });\n }\n handleKeyPress(event) {\n if (event.keyCode === 13) {\n this.handleEnter();\n }\n }\n render() {\n return (\n <div>\n <h1>{this.state.message}</h1>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2064,7 +2064,7 @@
|
||||
"solutions": [
|
||||
"class Dialog extends React.Component {\n constructor(props) {\n super(props);\n }\n componentWillUpdate() {\n console.log('Component is about to update...');\n }\n // change code below this line\n componentWillReceiveProps(nextProps) {\n console.log(this.props, nextProps);\n }\n componentDidUpdate() {\n console.log('Component re-rendered');\n }\n // change code above this line\n render() {\n return <h1>{this.props.message}</h1>\n }\n};\n\nclass Controller extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n message: 'First Message'\n };\n this.changeMessage = this.changeMessage.bind(this); \n }\n changeMessage() {\n this.setState({\n message: 'Second Message'\n });\n }\n render() {\n return (\n <div>\n <button onClick={this.changeMessage}>Update</button>\n <Dialog message={this.state.message}/>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2141,7 +2141,7 @@
|
||||
"solutions": [
|
||||
"class OnlyEvens extends React.Component {\n constructor(props) {\n super(props);\n }\n shouldComponentUpdate(nextProps, nextState) {\n console.log('Should I update?');\n // change code below this line\n return nextProps.value % 2 === 0;\n // change code above this line\n }\n componentWillReceiveProps(nextProps) {\n console.log('Receiving new props...');\n }\n componentDidUpdate() {\n console.log('Component re-rendered.');\n }\n render() {\n return <h1>{this.props.value}</h1>\n }\n};\n\nclass Controller extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 0\n };\n this.addValue = this.addValue.bind(this);\n }\n addValue() {\n this.setState({\n value: this.state.value + 1\n });\n }\n render() {\n return (\n <div>\n <button onClick={this.addValue}>Add</button>\n <OnlyEvens value={this.state.value}/>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2188,7 +2188,7 @@
|
||||
"solutions": [
|
||||
"\nclass Colorful extends React.Component {\n render() {\n return (\n <div style={{color: \"red\", fontSize: 72}}>Big Red</div>\n );\n }\n};\n"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2237,7 +2237,7 @@
|
||||
"solutions": [
|
||||
"\nconst styles = {\n color: \"purple\",\n fontSize: 40,\n border: \"2px solid purple\"\n};\n// change code above this line\nclass Colorful extends React.Component {\n render() {\n // change code below this line\n return (\n <div style={styles}>Style Me!</div>\n // change code above this line\n );\n }\n};\n"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2348,7 +2348,7 @@
|
||||
"solutions": [
|
||||
"\nconst inputStyle = {\n width: 235,\n margin: 5\n}\n\nclass MagicEightBall extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n userInput: '',\n randomIndex: ''\n }\n this.ask = this.ask.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n ask() {\n if (this.state.userInput) {\n this.setState({\n randomIndex: Math.floor(Math.random() * 20),\n userInput: ''\n });\n }\n }\n handleChange(event) {\n this.setState({\n userInput: event.target.value\n });\n }\n render() {\n const possibleAnswers = [\n \"It is certain\", \"It is decidedly so\", \"Without a doubt\",\n \"Yes, definitely\", \"You may rely on it\", \"As I see it, yes\",\n \"Outlook good\", \"Yes\", \"Signs point to yes\", \"Reply hazy try again\",\n \"Ask again later\", \"Better not tell you now\", \"Cannot predict now\",\n \"Concentrate and ask again\", \"Don't count on it\", \"My reply is no\",\n \"My sources say no\", \"Outlook not so good\",\"Very doubtful\", \"Most likely\"\n ];\n const answer = possibleAnswers[this.state.randomIndex];\n return (\n <div>\n <input\n type=\"text\"\n value={this.state.userInput}\n onChange={this.handleChange}\n style={inputStyle} /><br />\n <button onClick={this.ask}>Ask the Magic Eight Ball!</button><br />\n <h3>Answer:</h3>\n <p>\n {answer}\n </p>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2406,7 +2406,7 @@
|
||||
"solutions": [
|
||||
"class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n display: true\n }\n this.toggleDisplay = this.toggleDisplay.bind(this); \n }\n toggleDisplay() {\n this.setState({\n display: !this.state.display\n });\n }\n render() {\n // change code below this line\n if (this.state.display) {\n return (\n <div>\n <button onClick={this.toggleDisplay}>Toggle Display</button>\n <h1>Displayed!</h1>\n </div>\n );\n } else {\n return (\n <div>\n <button onClick={this.toggleDisplay}>Toggle Display</button>\n </div>\n );\n }\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2464,7 +2464,7 @@
|
||||
"solutions": [
|
||||
"class MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n display: true\n }\n this.toggleDisplay = this.toggleDisplay.bind(this); \n }\n toggleDisplay() {\n this.setState({\n display: !this.state.display\n });\n }\n render() {\n // change code below this line\n return (\n <div>\n <button onClick={this.toggleDisplay}>Toggle Display</button>\n {this.state.display && <h1>Displayed!</h1>}\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2547,7 +2547,7 @@
|
||||
"solutions": [
|
||||
"\nconst inputStyle = {\n width: 235,\n margin: 5\n}\n\nclass CheckUserAge extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n userAge: '',\n input: ''\n }\n this.submit = this.submit.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n handleChange(e) {\n this.setState({\n input: e.target.value,\n userAge: ''\n });\n }\n submit() {\n this.setState({\n userAge: this.state.input\n });\n }\n render() {\n const buttonOne = <button onClick={this.submit}>Submit</button>;\n const buttonTwo = <button>You May Enter</button>;\n const buttonThree = <button>You Shall Not Pass</button>;\n return (\n <div>\n <h3>Enter Your Age to Continue</h3>\n <input\n style={inputStyle}\n type=\"number\"\n value={this.state.input}\n onChange={this.handleChange} /><br />\n {\n this.state.userAge === '' ?\n buttonOne :\n this.state.userAge >= 18 ?\n buttonTwo :\n buttonThree\n }\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2627,7 +2627,7 @@
|
||||
"solutions": [
|
||||
"class Results extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return (\n <h1>\n {\n this.props.fiftyFifty ?\n 'You Win!' :\n 'You Lose!'\n }\n </h1>\n )\n };\n};\n\nclass GameOfChance extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n counter: 1\n }\n this.handleClick = this.handleClick.bind(this);\n }\n handleClick() {\n this.setState({\n counter: this.state.counter + 1\n });\n }\n render() {\n const expression = Math.random() > .5;\n return (\n <div>\n <button onClick={this.handleClick}>Play Again</button>\n <Results fiftyFifty={expression} />\n <p>{'Turn: ' + this.state.counter}</p>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2693,7 +2693,7 @@
|
||||
"solutions": [
|
||||
"\nclass GateKeeper extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n input: ''\n };\n this.handleChange = this.handleChange.bind(this);\n }\n handleChange(event) {\n this.setState({ input: event.target.value })\n }\n render() {\n let inputStyle = {\n border: '1px solid black'\n };\n if (this.state.input.length > 15) {\n inputStyle.border = '3px solid red';\n };\n return (\n <div>\n <h3>Don't Type Too Much:</h3>\n <input\n type=\"text\"\n style={inputStyle}\n value={this.state.input}\n onChange={this.handleChange} />\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2774,7 +2774,7 @@
|
||||
"solutions": [
|
||||
"\nconst textAreaStyles = {\n width: 235,\n margin: 5\n};\n\nclass MyToDoList extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n toDoList: [],\n userInput: ''\n }\n this.handleSubmit = this.handleSubmit.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n handleSubmit() {\n const itemsArray = this.state.userInput.split(',');\n this.setState({\n toDoList: itemsArray\n });\n }\n handleChange(e) {\n this.setState({\n userInput: e.target.value\n });\n }\n render() {\n const items = this.state.toDoList.map( (item, i) => {\n return <li key={i}>{item}</li>\n });\n return (\n <div>\n <textarea\n onChange={this.handleChange}\n value={this.state.userInput}\n style={textAreaStyles}\n placeholder=\"Separate Items With Commas\" /><br />\n <button onClick={this.handleSubmit}>Create List</button>\n <h1>My \"To Do\" List:</h1>\n <ul>\n {items}\n </ul>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2830,7 +2830,7 @@
|
||||
"solutions": [
|
||||
"\nconst frontEndFrameworks = [\n 'React',\n 'Angular',\n 'Ember',\n 'Knockout',\n 'Backbone',\n 'Vue'\n];\n\nfunction Frameworks() {\n const renderFrameworks = frontEndFrameworks.map((fw, i) => {\n return <li key={i}>{fw}</li>\n })\n return (\n <div>\n <h1>Popular Front End JavaScript Frameworks</h1>\n <ul>\n {renderFrameworks}\n </ul>\n </div>\n );\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2910,7 +2910,7 @@
|
||||
"solutions": [
|
||||
"\nclass MyComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n users: [\n {\n username: 'Jeff',\n online: true\n },\n {\n username: 'Alan',\n online: false\n },\n {\n username: 'Mary',\n online: true\n },\n {\n username: 'Jim',\n online: false\n },\n {\n username: 'Sara',\n online: true\n },\n {\n username: 'Laura',\n online: true\n }\n ]\n }\n }\n render() {\n const usersOnline = this.state.users.filter(user => {\n return user.online;\n });\n const renderOnlineUsers = usersOnline.map(user => {\n return (\n <li key={user.username}>{user.username}</li>\n );\n });\n return (\n <div>\n <h1>Current Online Users:</h1>\n <ul>\n {renderOnlineUsers}\n </ul>\n </div>\n );\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
@ -2956,7 +2956,7 @@
|
||||
"solutions": [
|
||||
"\nclass App extends React.Component {\n constructor(props) {\n super(props);\n }\n render() {\n return <div/>\n }\n};\n\n// change code below this line\nReactDOMServer.renderToString(<App/>);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"react": true
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
"solutions": [
|
||||
"const reducer = (state = 5) => {\n return state;\n}\n\n// Redux methods are available from a Redux object\n// For example: Redux.createStore()\n// Define the store here:\n\nconst store = Redux.createStore(reducer);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -86,7 +86,7 @@
|
||||
"solutions": [
|
||||
"const store = Redux.createStore(\n (state = 5) => state\n);\n\n// change code below this line\nconst currentState = store.getState();"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -119,7 +119,7 @@
|
||||
"solutions": [
|
||||
"const action = {\n type: 'LOGIN'\n}"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -155,7 +155,7 @@
|
||||
"solutions": [
|
||||
"const action = {\n type: 'LOGIN'\n}\n// Define an action creator here:\nconst actionCreator = () => {\n return action;\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -200,7 +200,7 @@
|
||||
"solutions": [
|
||||
"const store = Redux.createStore(\n (state = {login: false}) => state\n);\n\nconst loginAction = () => {\n return {\n type: 'LOGIN'\n }\n};\n\n// Dispatch the action here:\nstore.dispatch(loginAction());"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -250,7 +250,7 @@
|
||||
"solutions": [
|
||||
"const defaultState = {\n login: false\n};\n\nconst reducer = (state = defaultState, action) => {\n\n if (action.type === 'LOGIN') {\n return {login: true}\n }\n\n else {\n return state\n }\n\n};\n\nconst store = Redux.createStore(reducer);\n\nconst loginAction = () => {\n return {\n type: 'LOGIN'\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -308,7 +308,7 @@
|
||||
"solutions": [
|
||||
"const defaultState = {\n authenticated: false\n};\n\nconst authReducer = (state = defaultState, action) => {\n\n switch (action.type) {\n\n case 'LOGIN':\n return {\n authenticated: true\n }\n\n case 'LOGOUT':\n return {\n authenticated: false\n }\n\n default:\n return state;\n\n }\n\n};\n\nconst store = Redux.createStore(authReducer);\n\nconst loginUser = () => {\n return {\n type: 'LOGIN'\n }\n};\n\nconst logoutUser = () => {\n return {\n type: 'LOGOUT'\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -387,7 +387,7 @@
|
||||
"solutions": [
|
||||
"const LOGIN = 'LOGIN';\nconst LOGOUT = 'LOGOUT';\n\nconst defaultState = {\n authenticated: false\n};\n\nconst authReducer = (state = defaultState, action) => {\n\n switch (action.type) {\n\n case LOGIN:\n return {\n authenticated: true\n }\n\n case LOGOUT:\n return {\n authenticated: false\n }\n\n default:\n return state;\n\n }\n\n};\n\nconst store = Redux.createStore(authReducer);\n\nconst loginUser = () => {\n return {\n type: LOGIN\n }\n};\n\nconst logoutUser = () => {\n return {\n type: LOGOUT\n }\n};"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -447,7 +447,7 @@
|
||||
"solutions": [
|
||||
"const ADD = 'ADD';\n\nconst reducer = (state = 0, action) => {\n switch(action.type) {\n case ADD:\n return state + 1;\n default:\n return state;\n }\n};\n\nconst store = Redux.createStore(reducer);\n let count = 0; \n// change code below this line\n\nstore.subscribe( () =>\n { \n count++; \n } \n);\n\n// change code above this line\n\nstore.dispatch({type: ADD});\nstore.dispatch({type: ADD});\nstore.dispatch({type: ADD});"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -519,7 +519,7 @@
|
||||
"solutions": [
|
||||
"const INCREMENT = 'INCREMENT';\nconst DECREMENT = 'DECREMENT';\n\nconst counterReducer = (state = 0, action) => {\n switch(action.type) {\n case INCREMENT:\n return state + 1;\n case DECREMENT:\n return state - 1;\n default:\n return state;\n }\n};\n\nconst LOGIN = 'LOGIN';\nconst LOGOUT = 'LOGOUT';\n\nconst authReducer = (state = {authenticated: false}, action) => {\n switch(action.type) {\n case LOGIN:\n return {\n authenticated: true\n }\n case LOGOUT:\n return {\n authenticated: false\n }\n default:\n return state;\n }\n};\n\nconst rootReducer = Redux.combineReducers({\n count: counterReducer,\n auth: authReducer\n});\n\nconst store = Redux.createStore(rootReducer);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -574,7 +574,7 @@
|
||||
"solutions": [
|
||||
"const ADD_NOTE = 'ADD_NOTE';\n\nconst notesReducer = (state = 'Initial State', action) => {\n switch(action.type) {\n // change code below this line\n case ADD_NOTE:\n return action.text;\n // change code above this line\n default:\n return state;\n }\n};\n\nconst addNoteText = (note) => {\n // change code below this line\n return {\n type: ADD_NOTE,\n text: note\n }\n // change code above this line\n};\n\nconst store = Redux.createStore(notesReducer);\n\nconsole.log(store.getState());\nstore.dispatch(addNoteText('Hello Redux!'));\nconsole.log(store.getState());"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -656,7 +656,7 @@
|
||||
"solutions": [
|
||||
"const REQUESTING_DATA = 'REQUESTING_DATA'\nconst RECEIVED_DATA = 'RECEIVED_DATA'\n\nconst requestingData = () => { return {type: REQUESTING_DATA} }\nconst receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }\n\nconst handleAsync = () => {\n return function(dispatch) {\n dispatch(requestingData());\n setTimeout(function() {\n let data = {\n users: ['Jeff', 'William', 'Alice']\n }\n dispatch(receivedData(data));\n }, 2500);\n }\n};\n\nconst defaultState = {\n fetching: false,\n users: []\n};\n\nconst asyncDataReducer = (state = defaultState, action) => {\n switch(action.type) {\n case REQUESTING_DATA:\n return {\n fetching: true,\n users: []\n }\n case RECEIVED_DATA:\n return {\n fetching: false,\n users: action.users\n }\n default:\n return state;\n }\n};\n\nconst store = Redux.createStore(\n asyncDataReducer,\n Redux.applyMiddleware(ReduxThunk.default)\n);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -700,7 +700,7 @@
|
||||
"solutions": [
|
||||
"const INCREMENT = 'INCREMENT';\nconst DECREMENT = 'DECREMENT';\n\nconst counterReducer = (state = 0, action) => {\n switch(action.type) {\n case INCREMENT:\n return state + 1;\n case DECREMENT:\n return state - 1;\n default:\n return state;\n }\n};\n\nconst incAction = () => {\n return {\n type: INCREMENT\n }\n};\n\nconst decAction = () => {\n return {\n type: DECREMENT\n }\n};\n\nconst store = Redux.createStore(counterReducer);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -762,7 +762,7 @@
|
||||
"solutions": [
|
||||
"const ADD_TO_DO = 'ADD_TO_DO';\n\n// A list of strings representing tasks to do:\nconst todos = [\n 'Go to the store',\n 'Clean the house',\n 'Cook dinner',\n 'Learn to code',\n];\n\nconst immutableReducer = (state = todos, action) => {\n switch(action.type) {\n case ADD_TO_DO:\n return state.concat(action.todo);\n default:\n return state;\n }\n};\n\n// an example todo argument would be 'Learn React',\nconst addToDo = (todo) => {\n return {\n type: ADD_TO_DO,\n todo\n }\n}\n\nconst store = Redux.createStore(immutableReducer);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -814,7 +814,7 @@
|
||||
"solutions": [
|
||||
"const immutableReducer = (state = ['Do not mutate state!'], action) => {\n switch(action.type) {\n case 'ADD_TO_DO':\n return [\n ...state,\n action.todo\n ];\n default:\n return state;\n }\n};\n\nconst addToDo = (todo) => {\n return {\n type: 'ADD_TO_DO',\n todo\n }\n}\n\nconst store = Redux.createStore(immutableReducer);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -863,7 +863,7 @@
|
||||
"solutions": [
|
||||
"const immutableReducer = (state = [0,1,2,3,4,5], action) => {\n switch(action.type) {\n case 'REMOVE_ITEM':\n return [\n ...state.slice(0, action.index),\n ...state.slice(action.index + 1)\n ];\n default:\n return state;\n }\n};\n\nconst removeItem = (index) => {\n return {\n type: 'REMOVE_ITEM',\n index\n }\n}\n\nconst store = Redux.createStore(immutableReducer);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
@ -921,7 +921,7 @@
|
||||
"solutions": [
|
||||
"const defaultState = {\n user: 'CamperBot',\n status: 'offline',\n friends: '732,982',\n community: 'freeCodeCamp'\n};\n\nconst immutableReducer = (state = defaultState, action) => {\n switch(action.type) {\n case 'ONLINE':\n return Object.assign({}, state, {\n status: 'online'\n });\n default:\n return state;\n }\n};\n\nconst wakeUp = () => {\n return {\n type: 'ONLINE'\n }\n};\n\nconst store = Redux.createStore(immutableReducer);"
|
||||
],
|
||||
"type": "modern",
|
||||
"challengeType": 6,
|
||||
"isRequired": false,
|
||||
"translations": {},
|
||||
"redux": true
|
||||
|
||||
@ -5,6 +5,7 @@ import tape from 'tape';
|
||||
import { isMongoId } from 'validator';
|
||||
|
||||
import getChallenges from './getChallenges';
|
||||
import { modern } from '../common/app/utils/challengeTypes';
|
||||
|
||||
const notMongoId = id => !isMongoId(id);
|
||||
|
||||
@ -139,7 +140,8 @@ function createTest({
|
||||
document;
|
||||
|
||||
// Fake Deep Equal dependency
|
||||
const DeepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
|
||||
const DeepEqual = (a, b) =>
|
||||
JSON.stringify(a) === JSON.stringify(b);
|
||||
|
||||
// Hardcode Deep Freeze dependency
|
||||
const DeepFreeze = (o) => {
|
||||
@ -225,7 +227,7 @@ Observable.from(getChallenges())
|
||||
.flatMap(challengeSpec => {
|
||||
return Observable.from(challengeSpec.challenges);
|
||||
})
|
||||
.filter(({ type }) => type !== 'modern')
|
||||
.filter(({ challengeType }) => challengeType !== modern)
|
||||
.flatMap(challenge => {
|
||||
return createTest(challenge);
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user