Modern Web Apps With React and Redux

Envato Customers Tuts+ Courses and Tutorials
,
1

I have a problem with ‘3.1 Build a Pure Component’ not building.

(MY FILEPATH)/flashcard-app/src/app.js:23
	return (<div className='app'>
         ^
ParseError: Unexpected token

I presume it has something to do with Babel??

I’ve tried these from the Github project:
“babel-preset-es2015”: “^6.6.0”,
“babel-preset-react”: “^6.5.0”,
“babelify”: “^7.2.0”,
“live-server”: “^0.9.2”,
“watchify”: “^3.7.0”

and the latest:
“babel-preset-es2015”: “^6.24.1”,
“babel-preset-react”: “^6.24.1”,
“babelify”: “^7.3.0”,
“live-server”: “^1.2.0”,
“watchify”: “^3.9.0”

App.js

const cards = (state, action) => {
	switch (action.type){
		case 'ADD_CARD':
			let newCard = Object.assign({}, action.data, {
				score: 1,
				id: +new Date
			});

			return state.concat([newCard]);

		default:
			return state || [];
	}
};


const store = Redux.createStore(Redux.combineReducers({
	cards
}));


const App = (props) => {
	return (<div className='app'>
		{props.children}
	</div>);
};

ReactDOM.render(<App> Hello React </App>, document.getElementById('root'));
2

move the <div className='app'> on a newline.
using parens is an implicit return.
Try this:
const App = props => <div className="app">{props.children}</div>;

or
const App = (props_ => {
return {
<div className='app'>{ props.children }</div>
}
}

It gets confusing with the syntax for me as well.

4

I couldn’t get the formatting to work correctly but I hope you get the idea?

5

Your code is absolutely correct as is @conordarcy

Seems like something is wrong with some npm package that you are missing in your file.

Does your file have react and react dom imported?

try this

import React from 'react';
import ReactDOM from 'react-dom';