React component

Last Updated: October 9, 2021

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

Test