reactApp<\/b>\u00a0on the desktop to install all the required files, using the mkdir command.<\/p>\nC:\\Users\\username\\Desktop>mkdir reactApp\r\nC:\\Users\\username\\Desktop>cd reactApp\r\n<\/pre>\nTo create any module, it is required to generate the\u00a0package.json<\/b>\u00a0file. Therefore, after Creating the folder, we need to create a\u00a0package.json<\/b>\u00a0file. To do so you need to run the\u00a0npm init<\/b>\u00a0command from the command prompt.<\/p>\nC:\\Users\\username\\Desktop\\reactApp>npm init\r\n<\/pre>\nThis command asks information about the module such as packagename, description, author etc. you can skip these using the \u2013y option.<\/p>\n
C:\\Users\\username\\Desktop\\reactApp>npm init -y\r\nWrote to C:\\reactApp\\package.json:\r\n{\r\n \"name\": \"reactApp\",\r\n \"version\": \"1.0.0\",\r\n \"description\": \"\",\r\n \"main\": \"index.js\",\r\n \"scripts\": {\r\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\r\n },\r\n \"keywords\": [],\r\n \"author\": \"\",\r\n \"license\": \"ISC\"\r\n}\r\n<\/pre>\nStep 2 – install React and react dom<\/h3>\n
Since our main task is to install ReactJS, install it, and its dom packages, using\u00a0install react<\/b>\u00a0and\u00a0react-dom<\/b>\u00a0commands of npm respectively. You can add the packages we install, to\u00a0package.json<\/b>\u00a0file using the\u00a0–save<\/b>\u00a0option.<\/p>\nC:\\Users\\Tutorialspoint\\Desktop\\reactApp>npm install react --save\r\nC:\\Users\\Tutorialspoint\\Desktop\\reactApp>npm install react-dom --save\r\n<\/pre>\nOr, you can install all of them in single command as \u2212<\/p>\n
C:\\Users\\username\\Desktop\\reactApp>npm install react react-dom --save\r\n<\/pre>\nStep 3 – Install webpack<\/h3>\n
Since we are using webpack to generate bundler install webpack, webpack-dev-server and webpack-cli.<\/p>\n
C:\\Users\\username\\Desktop\\reactApp>npm install webpack --save\r\nC:\\Users\\username\\Desktop\\reactApp>npm install webpack-dev-server --save\r\nC:\\Users\\username\\Desktop\\reactApp>npm install webpack-cli --save\r\n<\/pre>\nOr, you can install all of them in single command as \u2212<\/p>\n
C:\\Users\\username\\Desktop\\reactApp>npm install webpack webpack-dev-server webpack-cli --save\r\n<\/pre>\nStep 4 – Install babel<\/h3>\n
Install babel, and its plugins babel-core, babel-loader, babel-preset-env, babel-preset-react and, html-webpack-plugin<\/p>\n
C:\\Users\\username\\Desktop\\reactApp>npm install babel-core --save-dev\r\nC:\\Users\\username\\Desktop\\reactApp>npm install babel-loader --save-dev\r\nC:\\Users\\username\\Desktop\\reactApp>npm install babel-preset-env --save-dev\r\nC:\\Users\\username\\Desktop\\reactApp>npm install babel-preset-react --save-dev\r\nC:\\Users\\username\\Desktop\\reactApp>npm install html-webpack-plugin --save-dev\r\n<\/pre>\nOr, you can install all of them in single command as \u2212<\/p>\n
C:\\Users\\username\\Desktop\\reactApp>npm install babel-core babel-loader babel-preset-env \r\n babel-preset-react html-webpack-plugin --save-dev\r\n<\/pre>\nStep 5 – Create the Files<\/h3>\n
To complete the installation, we need to create certain files namely, index.html, App.js, main.js, webpack.config.js and, .babelrc<\/i><\/b>. You can create these files manually or, using\u00a0command prompt<\/b>.<\/p>\nC:\\Users\\username\\Desktop\\reactApp>type nul > index.html\r\nC:\\Users\\username\\Desktop\\reactApp>type nul > App.js\r\nC:\\Users\\username\\Desktop\\reactApp>type nul > main.js\r\nC:\\Users\\username\\Desktop\\reactApp>type nul > webpack.config.js\r\nC:\\Users\\username\\Desktop\\reactApp>type nul > .babelrc\r\n<\/pre>\nStep 6 – Set Compiler, Server and Loaders<\/h3>\n
Open\u00a0webpack-config.js<\/b>\u00a0file and add the following code. We are setting webpack entry point to be main.js. Output path is the place where bundled app will be served. We are also setting the development server to\u00a08001<\/b>\u00a0port. You can choose any port you want.<\/p>\n
webpack.config.js<\/b><\/p>\nconst path = require('path');\r\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\r\n\r\nmodule.exports = {\r\n entry: '.\/main.js',\r\n output: {\r\n path: path.join(__dirname, '\/bundle'),\r\n filename: 'index_bundle.js'\r\n },\r\n devServer: {\r\n inline: true,\r\n port: 8001\r\n },\r\n module: {\r\n rules: [\r\n {\r\n test: \/\\.jsx?$\/,\r\n exclude: \/node_modules\/,\r\n loader: 'babel-loader',\r\n query: {\r\n presets: ['es2015', 'react']\r\n }\r\n }\r\n ]\r\n },\r\n plugins:[\r\n new HtmlWebpackPlugin({\r\n template: '.\/index.html'\r\n })\r\n ]\r\n}\r\n<\/pre>\nOpen the\u00a0package.json<\/b>\u00a0and delete\u00a0“test” “echo \\”Error: no test specified\\” && exit 1″<\/b>\u00a0inside\u00a0“scripts”<\/b>\u00a0object. We are deleting this line since we will not do any testing in this tutorial. Let’s add the\u00a0start<\/b>\u00a0and\u00a0build<\/b>\u00a0commands instead.<\/p>\n\"start\": \"webpack-dev-server --mode development --open --hot\",\r\n\"build\": \"webpack --mode production\"\r\n<\/pre>\nStep 7 – index.html<\/h3>\n
This is just regular HTML. We are setting\u00a0div id = “app”<\/b>\u00a0as a root element for our app and adding\u00a0index_bundle.js<\/b>\u00a0script, which is our bundled app file.<\/p>\n<!DOCTYPE html>\r\n<html lang = \"en\">\r\n <head>\r\n <meta charset = \"UTF-8\">\r\n <title>React App<\/title>\r\n <\/head>\r\n <body>\r\n <div id = \"app\"><\/div>\r\n <script src = 'index_bundle.js'><\/script>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\nStep 8 \u2212 App.jsx and main.js<\/h3>\n
This is the first React component. We will explain React components in depth in a subsequent chapter. This component will render\u00a0Hello World<\/b>.<\/p>\n
App.js<\/b><\/p>\nimport React, { Component } from 'react';\r\nclass App extends Component{\r\n render(){\r\n return(\r\n <div>\r\n <h1>Hello World<\/h1>\r\n <\/div>\r\n );\r\n }\r\n}\r\nexport default App;\r\n<\/pre>\nWe need to import this component and render it to our root\u00a0App<\/b>\u00a0element, so we can see it in the browser.<\/p>\n
main.js<\/b><\/p>\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport App from '.\/App.js';\r\n\r\nReactDOM.render(<App \/>, document.getElementById('app'));\r\n<\/pre>\nNote<\/b>\u00a0\u2212 Whenever you want to use something, you need to\u00a0import<\/b>\u00a0it first. If you want to make the component usable in other parts of the app, you need to\u00a0export<\/b>\u00a0it after creation and import it in the file where you want to use it.<\/p>\n
Create a file with name\u00a0.babelrc<\/b>\u00a0and copy the following content to it.<\/p>\n{\r\n \"presets\":[\"env\", \"react\"]\r\n}\r\n<\/pre>\nStep 9 – Running the Server<\/h3>\n
The setup is complete and we can start the server by running the following command.<\/p>\n
C:\\Users\\username\\Desktop\\reactApp>npm start\r\n<\/pre>\nIt will show the port we need to open in the browser. In our case, it is\u00a0http:\/\/localhost:8001\/<\/b>. After we open it, we will see the following output.<\/p>\n
![\"Running](\"https:\/\/www.tutorialspoint.com\/reactjs\/images\/running_the_server.jpg\")
<\/p>\n
Step 10 – Generating the bundle<\/h3>\n
Finally, to generate the bundle you need to run the build command in the command prompt as \u2212<\/p>\n
C:\\Users\\Tutorialspoint\\Desktop\\reactApp>npm run build\r\n<\/pre>\nThis will generate the bundle in the current folder as shown below.<\/p>\n
![\"Generating](\"https:\/\/www.tutorialspoint.com\/reactjs\/images\/generating_the_bundle.jpg\")
<\/p>\n
Using the create-react-app command<\/h2>\n
Instead of using webpack and babel you can install ReactJS more simply by installing\u00a0create-react-app<\/b>.<\/p>\nStep 1 – install create-react-app<\/h3>\n
Browse through the desktop and install the Create React App using command prompt as shown below \u2212<\/p>\n
C:\\Users\\Tutorialspoint>cd C:\\Users\\Tutorialspoint\\Desktop\\\r\nC:\\Users\\Tutorialspoint\\Desktop>npx create-react-app my-app\r\n<\/pre>\nThis will create a folder named my-app on the desktop and installs all the required files in it.<\/p>\n
Step 2 – Delete all the source files<\/h3>\n
Browse through the src folder in the generated my-app folder and remove all the files in it as shown below \u2212<\/p>\n
C:\\Users\\Tutorialspoint\\Desktop>cd my-app\/src\r\nC:\\Users\\Tutorialspoint\\Desktop\\my-app\\src>del *\r\nC:\\Users\\Tutorialspoint\\Desktop\\my-app\\src\\*, Are you sure (Y\/N)? y\r\n<\/pre>\nStep 3 – Add files<\/h3>\n
Add files with names\u00a0index.css<\/b>\u00a0and\u00a0index.js<\/b>\u00a0in the src folder as \u2212<\/p>\nC:\\Users\\Tutorialspoint\\Desktop\\my-app\\src>type nul > index.css\r\nC:\\Users\\Tutorialspoint\\Desktop\\my-app\\src>type nul > index.js\r\n<\/pre>\nIn the index.js file add the following code<\/p>\n
import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport '.\/index.css';\r\n<\/pre>\nStep 4 – Run the project<\/h3>\n
Finally, run the project using the start command.<\/p>\n
npm start\r\n<\/pre>\n <\/p>\n
![\"Run](\"https:\/\/www.tutorialspoint.com\/reactjs\/images\/run_the_project.jpg\")
<\/p>\n","protected":false},"excerpt":{"rendered":"
React is a front-end library developed by Facebook. It is used for handling the view layer for web and mobile apps. ReactJS allows us to create reusable UI components. It is currently one of the most popular JavaScript libraries and has a strong foundation and large community behind it. Audience This tutorial will help JavaScript … <\/p>\n
Continue reading “ReactJS”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/web-development.edusmartup.com\/index.php\/wp-json\/wp\/v2\/posts\/12"}],"collection":[{"href":"https:\/\/web-development.edusmartup.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/web-development.edusmartup.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/web-development.edusmartup.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web-development.edusmartup.com\/index.php\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":2,"href":"https:\/\/web-development.edusmartup.com\/index.php\/wp-json\/wp\/v2\/posts\/12\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/web-development.edusmartup.com\/index.php\/wp-json\/wp\/v2\/posts\/12\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/web-development.edusmartup.com\/index.php\/wp-json\/wp\/v2\/media?parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/web-development.edusmartup.com\/index.php\/wp-json\/wp\/v2\/categories?post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/web-development.edusmartup.com\/index.php\/wp-json\/wp\/v2\/tags?post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}