usmanjutt84 usmanjutt84 - 1 month ago 9
React JSX Question

React component isn't rendered to index.html

I'm really beginner in ReactJS. Component isn't rendering, I've wasted a lot of time to search that but unsuccessful.
I'm following tutorial from this series. I've already configured webpack-dev-server from this link.
Check the file hierarchy below, according to the tutorial.

enter image description here

Kindly let me know the problem.

index.html

<!DOCTYPE html>
<html>
<head>
<title>React</title>
</head>

<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
</html>


App.js

import React from 'react';
class AppFirst extends React.Component{
render(){
return(
<div>
<h1>Hello ReactJs</h1>
</div>
);
}
}
var appElement = <AppFirst />;
Raect.render(appElement, document.getElementById("app"));


package.json

{
"name": "react-for-everyone",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "./node_modules/.bin/webpack-dev-server --content-base"
},
"author": "",
"license": "ISC",
"devDependencies":{
"babel-core": "^6.1.*",
"babel-loader": "^6.2.*",
"babel-preset-es2015": "^6.16.*",
"babel-preset-react": "^6.16.*",
"webpack": "^1.13.*",
"webpack-dev-server": "^1.16.*"
},
"dependencies":{
"react": "^15.3.*",
"react-dom": "^15.3.*"
}
}


webpack-config.js

module.exports ={
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/App.js'
],
output: {
path: path.resolve(__dirname, "react-for-everyone"),
filename: 'app.js',
publicPath: 'http://localhost:8080'
},
devServer: {
contentBase: "./react-for-everyone",
},
module:{

loaders:[{
test: "/\.jsx?$/",
exclude: /node_modules/,
loader: "babel",
query: {
preset: ['es2015', 'react']
}
}]
}
};

Answer

React.render() is no longer used with the current versions. React has split the library from 0.14 version. You need to use ReactDOM.render() apart from the typo that you have in React.render()

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

class AppFirst extends React.Component{
        render(){
            return(
                <div>
                    <h1>Hello ReactJs</h1>
                </div>
            );
        }
    }
    var appElement = <AppFirst />;
    ReactDOM.render(appElement, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app"></div>

In your webpack you have put quotes in test: "/\.jsx?$/" you shouldn't have them. test: /\.jsx?$/. It should be a regex and not a string

Other corrections you need to do.

  1. Rename your webpack-config.js to webpack.config.js

  2. In webpack loaders you need to define presets and not preset

  3. Include path in your package.json with npm install -S path and webapck as var path = require('path');

  4. Change your directory structure with index.html included in src

  5. You final webpack looks like this

webpack.config.js

 var path = require('path');

 module.exports ={
    context: path.join(__dirname, "src"),
    entry: [
    './App.js'
    ],
    output: {
        path: __dirname + "/src",
        filename: 'bundle.js',
    },
    module:{

        loaders:[{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: "babel-loader",
            query: {
                presets: ['es2015', 'react']
            }
        }]
    }
};
  1. Change your script in package.json to "dev": "./node_modules/.bin/webpack-dev-server --content-base src"

  2. Finally after doing npm run dev open http://localhost:8080/index.html