React component
You have two types of components of React
1 – Functional Component
2- Class Componnet
In your working folder run the following command to create package.json
file
npm init
You need React and React-DOM to create your application. You can install them as a dependency
npm install react react-dom --save
Next, you can install the Babel Loader
npm install babel-loader --save-dev
We need several presets for Babel to work. You can install the following presets
npm install --save-dev babel-preset-latest babel-preset-react babel-preset-stage-0
Create .babelrc
file in your working folder and add the following code to it
{ 'presets':['latest','react','stage-0'] }
These are the presets you need trans-pile the JS code
Now you can install the Webpack
npm install webpack --save-dev
To test the application, you can install the development server too
npm install webpack-dev-server --save-dev
To work with Webpack you need configuration file webpack.config.js
which has all the configuration setting for Webpack to work.
It has sorce file name and location , output file path and loaders etc
var webpack=require('webpack'); module.exports={ entry:"./src/index.js", output:{ path:__dirname + "/dist/assets", filename:"index.min.js" }, devServer:{ inline:true, contentBase:"./dist", port:3000 }, module:{ loaders:[ { test:/\.js$/, exclude:/(node_modules)/, loader:'babel-loader', query:{ presets:['latest','react','stage-0'] } } ] } }
In your package.json file you have the dependencies and development dependencies
{ "name": "react-component", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "./node_modules/.bin/webpack-dev-server" }, "author": "", "license": "ISC", "dependencies": { "react": "^16.2.0", "react-dom": "^16.2.0" }, "devDependencies": { "babel-loader": "^7.1.2", "babel-preset-latest": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "webpack": "^3.10.0", "webpack-dev-server": "^2.9.7" } }
Now you can create the index.js file inside the src
folder
import React from 'react' import {render} from 'react-dom' import {Products} from './products.js' render( , document.getElementById('root') )
In this code is out components and I have this line
import {Products} from './products.js'
to import the component from the file
You can create the products.js file and add the following code to create the component
import React from 'react' var createReactClass = require('create-react-class'); export const Products = createReactClass({ render(){ return (
- Product A
- Product B
- Product C
) } })
You can place the index.html file inside the dist
folder with following code
Now you can run the web server with following command
npm start
Now you can open the page at http://localhost:3000/
and you will see the following screen with three products

When I open the page I am getting the following error
Uncaught TypeError: _react2.default.createClass is not a function
solution is here https://teamtreehouse.com/community/i-get-this-error-react2defaultcreateclass-is-not-a-function-and-reactproptypes-is-undefined