Unknown error in Reactjs - reactjs

Question

I'm trying to learn how to use React and I'm trying to build a todo app. Right now my index.js file is as such:
var React = require('react');
var ReactDom = require('react-dom');
//create component
var TodoComponent = React.createClass({
render: function(){
return(
<h1>Hello!</h1>
);
}
});
//put component into html page
ReactDom.render(<TodoComponent/>, document.getElementById('todo-wrapper'))
but in my terminal I get this error:
ERROR in ./~/react-dom/lib/ReactMount.js
Module not found: Error: Cannot resolve module 'react/lib/React' in /Users/tylerbray/Documents/Side Projects/Ninja React/react-playlist/node_modules/react-dom/lib
# ./~/react-dom/lib/ReactMount.js 15:12-38
here is my json file:
{
"name": "react-playlist",
"version": "1.0.0",
"description": "A simple react to-do list",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npm run build",
"build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
},
"repository": {
"type": "git",
"url": "git+https://github.com/iamshaunjp/react-playlist.git"
},
"keywords": [
"react"
],
"author": "The Net Ninja",
"license": "MIT",
"bugs": {
"url": "https://github.com/iamshaunjp/react-playlist/issues"
},
"homepage": "https://github.com/iamshaunjp/react-playlist#readme",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^15.6.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^6.4.1",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^1.15.0",
"webpack-dev-server": "^1.16.5"
}
}
I'm not sure what to make of it and I was hoping someone here could point me in the right direction. Repo can be found here: https://github.com/Brayheart/react-todo

Answer 1

var React = require('require');
should be:
var React = require('react');

Answer 2

Problem is that you are using "react-dom": "^15.6.2" which is creating an issue. Packaging has changed after react 16, There is no react/lib/* and react-dom/lib/* anymore (check docs for more details: https://reactjs.org/blog/2017/09/26/react-v16.0.html#packaging).
To fix an issue
update "react-dom" to "^16.2.0".
Remove node_modules
Run "npm install"
Then you also need to change your "index.js" as you have upgraded react version. "React.createClass" is not a part of core package anymore it is extracted to separate package "create-react-class" (for more details check docs: https://reactjs.org/blog/2017/09/26/react-v16.0.html#packaging), So i have modified it to use React.component.
import React from 'react';
import ReactDom from 'react-dom';
//create component
class TodoComponent extends React.Component {
render() {
return(
<h1>Hello!</h1>
);
}
}
//put component into html page
ReactDom.render(<TodoComponent/>, document.getElementById('todo-
wrapper'))
run "npm start"
Opened app using url http://localhost:1234
it should work :)