Create your first React component

In your working folder run the following command to create package.json file

You need React and React-DOM to create your application. You can install them as dependency

Next, you can install the Babel Loader

We need several presets for Babel to work. You can install the following presets

Create .babelrc file in your working folder and add the following code to it

These are the presets you need trans-pile the JS code

Now you can install the Webpack

To test the application, you can install the development server too

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

In your package.json file you have the dependencies and development dependencies

Now you can create the index.js file inside the src folder

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

You can place the index.html file inside the dist folder with following code

Now you can run the web server with following command

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 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

Leave a Reply

Your email address will not be published. Required fields are marked *