{"id":20832,"date":"2018-02-21T16:15:48","date_gmt":"2018-02-21T14:15:48","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=20832"},"modified":"2018-02-20T16:34:22","modified_gmt":"2018-02-20T14:34:22","slug":"reactjs-getting-started-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/","title":{"rendered":"ReactJS Getting Started Example"},"content":{"rendered":"<p>In this article we will start our adventures in <a href=\"https:\/\/reactjs.org\/\">React<\/a>. We will cover the set up of our local development environment, the various ancillary technologies needed to make our <a href=\"https:\/\/reactjs.org\/\">React<\/a> application work and how a <a href=\"https:\/\/reactjs.org\/\">React<\/a> application is composed.<\/p>\n<p>We will finally pull everything together in a simple web application which we can run locally in our browser.<\/p>\n<p>Knowledge of <a href=\"https:\/\/en.wikipedia.org\/wiki\/JavaScript\">javascript<\/a>, particularly <a href=\"https:\/\/en.wikipedia.org\/wiki\/ECMAScript\">ES6<\/a>\u00a0is expected, although the example is superficial enough for most people with only an introduction to <a href=\"https:\/\/en.wikipedia.org\/wiki\/JavaScript\">javascript<\/a> to be able to follow along quite easily.<\/p>\n<div class=\"toc\">\n<h3>Table Of Contents<\/h3>\n<dl>\n<dt><a href=\"#introduction\">1. Introduction<\/a><\/dt>\n<dt><a href=\"#technologies_used\">2. Technologies Used<\/a><\/dt>\n<dt><a href=\"#setup\">3. Setup<\/a><\/dt>\n<dd>\n<dl>\n<dt><a href=\"#nodejs\">3.1. Nodejs<\/a><\/dt>\n<dt><a href=\"#npm\">3.2. Npm<\/a><\/dt>\n<dt><a href=\"#vscode\">3.3. Visual Studio Code<\/a><\/dt>\n<dt><a href=\"#create_react_app\">3.4. Create React App<\/a><\/dt>\n<\/dl>\n<\/dd>\n<dt><a href=\"#es_and_babel\">4. ES and Babel<\/a><\/dt>\n<dt><a href=\"#why_react\">5. Why React?<\/a><\/dt>\n<dt><a href=\"#components\">6. Components<\/a><\/dt>\n<dt><a href=\"#jsx\">7. JSX<\/a><\/dt>\n<dt><a href=\"#putting_it_together\">8. Putting it together<\/a><\/dt>\n<dt><a href=\"#running_app\">9. Running the app<\/a><\/dt>\n<dt><a href=\"#summary\">10. Summary<\/a><\/dt>\n<dt><a href=\"#download\">11. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n<h2><a name=\"introduction\"><\/a>1. Introduction<\/h2>\n<p><a href=\"https:\/\/reactjs.org\/\">React<\/a>,\u00a0also called <a href=\"https:\/\/reactjs.org\/\">reactjs<\/a>, not be confused with <a href=\"https:\/\/facebook.github.io\/react-native\/\">react-native<\/a>, is a component based <a href=\"https:\/\/en.wikipedia.org\/wiki\/JavaScript\">javascript<\/a> library for building user interfaces and it was created by an engineer, Jordan Walke, at <a href=\"https:\/\/www.facebook.com\/\">Facebook<\/a>.<\/p>\n<p>It is extremely popular and has positioned itself not only as a leader in web view libraries but also as an implementation choice for creating <a href=\"https:\/\/facebook.github.io\/react-native\/\">native applications for mobile<\/a>.<\/p>\n<p>It carries an <a href=\"https:\/\/opensource.org\/licenses\/MIT\">MIT license<\/a> and the source code can be viewed <a href=\"https:\/\/github.com\/facebook\/react\">here<\/a>.<\/p>\n<h2><a name=\"technologies_used\"><\/a>2. Technologies Used<\/h2>\n<p>The example code in this article was built and run using:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Javascript ES6<\/li>\n<li>Nodejs\u00a0v6.13.0<\/li>\n<li>Npm v3.10.10<\/li>\n<li>Create React App command line tool v1.5.1<\/li>\n<li>Visual Studio Code v1.20.1<\/li>\n<li>Ubuntu 16.04<\/li>\n<li>Google Chrome\u00a0v64.0.3282.167 (Official Build) (64-bit)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2><a name=\"setup\"><\/a>3. Setup<\/h2>\n<p>The following software packages need to be installed to follow along in this article.<\/p>\n<h3><a name=\"nodejs\"><\/a>3.1. Nodejs<\/h3>\n<p><a href=\"https:\/\/nodejs.org\/en\/\">Nodejs<\/a>\u00a0is a Javascript run time for developing and running Javascript applications without a browser. It is typically used for server side web application development and will be used in this article to serve our web application in the browser.<\/p>\n<p><a href=\"https:\/\/nodejs.org\/en\/\">Nodejs<\/a> can be obtained and installed from <a href=\"https:\/\/nodejs.org\/en\/\">here<\/a>. We can confirm successful installation on the command line.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Confirming Nodejs<\/em><\/span><\/p>\n<pre class=\"brush:bash; wrap-lines:false;\">jean-jay@jeanjay-SATELLITE-L750D:~$ nodejs --version\r\nv6.13.0\r\n<\/pre>\n<p>Your version might differ as I have had installed for some time.<\/p>\n<h3><a name=\"npm\"><\/a>3.2. Npm<\/h3>\n<p><a href=\"https:\/\/www.npmjs.com\/\">Npm<\/a> is the package manager for Javascript applications and we will be using it in this article.\u00a0<a href=\"https:\/\/www.npmjs.com\/\">Npm<\/a> is installed automatically when installing <a href=\"https:\/\/nodejs.org\/en\/\">Nodejs<\/a>. We can confirm successful installation on the command line.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Confirming Npm<\/em><\/span><\/p>\n<pre class=\"brush:bash; wrap-lines:false;\">jean-jay@jeanjay-SATELLITE-L750D:~$ npm --version\r\n3.10.10\r\n<\/pre>\n<p>Your version might differ as I have had installed for some time.<\/p>\n<h3><a name=\"vscode\"><\/a>3.3. Visual Studio Code<\/h3>\n<p>Visual Studio Code can be installed from <a href=\"https:\/\/code.visualstudio.com\/\">here<\/a>. It is the editor I will be using for this article, but it is not essential that you use it. Any text editor will do.<\/p>\n<h3><a name=\"create_react_app\"><\/a>3.4. Create React App<\/h3>\n<p><a href=\"https:\/\/github.com\/facebook\/create-react-app\">Create-react-app<\/a> is a command line tool that streamlines the development of <a href=\"https:\/\/reactjs.org\/\">React<\/a> applications using a standard set of conventions and dependencies instead of explicit configuration. It can be installed by issuing the following command line instruction <code>sudo npm install -g create-react-app<\/code><\/p>\n<p>In this step we demonstrate how to create a <a href=\"https:\/\/reactjs.org\/\">React<\/a> application using the command line tool we previously installed via <a href=\"https:\/\/www.npmjs.com\/\">npm<\/a>.<\/p>\n<p>Even though this step is not necessary as the sample application is <a href=\"#download\">downloaded<\/a>, this serves as reference for you when you decide to do your own.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Creating a React application<\/em><\/span><\/p>\n<pre class=\"brush:bash; wrap-lines:false;\">sudo create-react-app reactjs-getting-started\r\n[sudo] password for jean-jay: \r\n\r\nCreating a new React app in \/home\/jean-jay\/Documents\/github-projects\/codegeeks\/reactjs-getting-started.\r\n\r\nInstalling packages. This might take a couple of minutes.\r\nInstalling react, react-dom, and react-scripts...\r\n\r\n\r\n&gt; uglifyjs-webpack-plugin@0.4.6 postinstall \/home\/jean-jay\/Documents\/github-projects\/codegeeks\/reactjs-getting-started\/node_modules\/uglifyjs-webpack-plugin\r\n&gt; node lib\/post_install.js\r\n\r\nreactjs-getting-started@0.1.0 \/home\/jean-jay\/Documents\/github-projects\/codegeeks\/reactjs-getting-started\r\n...\r\n...\r\nSuccess! Created reactjs-getting-started at \/home\/jean-jay\/Documents\/github-projects\/codegeeks\/reactjs-getting-started\r\nInside that directory, you can run several commands:\r\n\r\n  npm start\r\n    Starts the development server.\r\n\r\n  npm run build\r\n    Bundles the app into static files for production.\r\n\r\n  npm test\r\n    Starts the test runner.\r\n\r\n  npm run eject\r\n    Removes this tool and copies build dependencies, configuration files\r\n    and scripts into the app directory. If you do this, you can\u2019t go back!\r\n\r\nWe suggest that you begin by typing:\r\n\r\n  cd reactjs-getting-started\r\n  npm start\r\n\r\nHappy hacking!\r\n<\/pre>\n<p>Once complete you can simply run <code>npm start<\/code> and this command will start a local <code>nodejs<\/code> server which will serve our \u00a0<a href=\"https:\/\/reactjs.org\/\">React<\/a> application. Your default browser will launch and load the following page:<\/p>\n<figure id=\"attachment_20841\" aria-describedby=\"caption-attachment-20841\" style=\"width: 800px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-start-1.jpeg\"><img decoding=\"async\" class=\"wp-image-20841 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-start-1.jpeg\" alt=\"\" width=\"800\" height=\"400\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-start-1.jpeg 800w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-start-1-300x150.jpeg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-start-1-768x384.jpeg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><figcaption id=\"caption-attachment-20841\" class=\"wp-caption-text\">Start React Application screen<\/figcaption><\/figure>\n<h2><a name=\"es_and_babel\"><\/a>4. ES and Babel<\/h2>\n<p>In this article we will be using ES6 (ecma script 6) features when coding the example. Because ES6 is fairly new and some people still run browsers which do not support ES6 features it is necessary to compile our<a href=\"http:\/\/es6-features.org\/#Constants\"> feature rich, ES6<\/a>, Javascript into platform browser compliant software. To do this we use the <a href=\"https:\/\/babeljs.io\/\">Babel<\/a> compiler.<\/p>\n<p>If you are not familiar with ES6, don&#8217;t fear, you can make use of the <a href=\"https:\/\/babeljs.io\/repl\/#?presets=react\">Babel<\/a>\u00a0repl to see what the ES6 features get compiled into to be able to run in older browsers. But generally the example code is superficial enough to be able to wing it.<\/p>\n<h2><a name=\"what_is_react\"><\/a>5. Why React?<\/h2>\n<p>The web development space is changing constantly and it can be quite difficult knowing where to start or what to learn. For most of us time is a scarce commodity, that&#8217;s why choosing the right thing to learn or focus on is especially important.<\/p>\n<p>This begs the question, why <a href=\"https:\/\/reactjs.org\/\">React<\/a>? What makes it special among the plethora of web development frameworks out there. I will try to distill the noise into a set of reasons as to why you should consider <a href=\"https:\/\/reactjs.org\/\">React<\/a>.<\/p>\n<ul>\n<li>It is simple in architecture and implementation. <a href=\"https:\/\/reactjs.org\/\">React<\/a> has a simple, well defined life cycle with a modular approach to page component design. Because it has a heavy focus on &#8220;just&#8221; Javascript it makes it easier to learn. Other frameworks require adoption of a new language making the barrier to entry far higher.<\/li>\n<li>Should you be wanting to explore mobile development,\u00a0<a href=\"https:\/\/reactjs.org\/\">React<\/a> offers a fluent development experience by bringing the same experience for web to mobile, thus also reducing the learning curve.<\/li>\n<li><a href=\"https:\/\/reactjs.org\/\">React<\/a> applications lend themselves to test-ability through their architecture and utilities that ship with the library.<\/li>\n<li><a href=\"https:\/\/reactjs.org\/\">React<\/a> applications are very performant. Leveraging a virtual <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\">DOM<\/a> and targeting <a href=\"https:\/\/en.wikipedia.org\/wiki\/Single-page_application\">SPA<\/a> designs user experience is a core focus.<\/li>\n<li><a href=\"https:\/\/reactjs.org\/\">React<\/a> is focused on the &#8220;view&#8221; part of web applications and can be combined, even, with other web frameworks like Angular.<\/li>\n<li><a href=\"https:\/\/reactjs.org\/\">React<\/a> is open source, ubiquitous and actively maintained by the community, including big companies like <a href=\"https:\/\/www.facebook.com\/\">Facebook<\/a> and <a href=\"https:\/\/www.instagram.com\/?hl=en\">Instagram<\/a>.<\/li>\n<\/ul>\n<h2><a name=\"components\"><\/a>6. Components<\/h2>\n<p>At the heart of it all are components, it&#8217;s what allows us to make our application dynamic, modular and testable.<\/p>\n<p>A component could be anything on our page, it could be a menu component, a header component, a calendar component, a date picker component etc.<\/p>\n<p>In React we distinguish between two general types of components, statefull and stateless. Statefull as the name implies manages state whereas a stateless component does not.<\/p>\n<p>The purpose of a component is to accept some input through a variable called <code>props<\/code>\u00a0and then render \/ update a part of the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\">DOM<\/a> as a result of executing the component.<\/p>\n<p>A component can indicate to React when it should call the <code>render()<\/code>\u00a0method of the component by calling <code>setState()<\/code>. This will indicate to React that some state has changed and therefore the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\">DOM<\/a> should be updated.<\/p>\n<h2><a name=\"jsx\"><\/a>7. JSX<\/h2>\n<p><a href=\"https:\/\/reactjs.org\/docs\/jsx-in-depth.html\">JSX<\/a>\u00a0is a\u00a0preprocessor step that adds syntactic sugar to your Javascript code. It allows us to define our <code>render()<\/code>result in &#8220;near&#8221; <code>HTML<\/code> code.<\/p>\n<p>Even without any experience in using <a href=\"https:\/\/reactjs.org\/docs\/jsx-in-depth.html\">JSX<\/a>, the code looks familiar enough for people with only <code>HTML<\/code> experience to be able to follow the code without too much of a problem.<\/p>\n<p>Based on our <a href=\"https:\/\/reactjs.org\/docs\/jsx-in-depth.html\">JSX<\/a> code, the preprocessor step in our compilation process will synthesize the necessary Javascript code which will result in our <a href=\"https:\/\/reactjs.org\/docs\/jsx-in-depth.html\">JSX<\/a> code being properly translated into the <code>HTML<\/code> equivalent.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>JSX<\/em><\/span><\/p>\n<pre class=\"brush:xml; wrap-lines:false;\">&lt;div className=\"Test\"&gt;\r\n\t&lt;MyCustomComponent\/&gt;\r\n\t&lt;p&gt;Hello world!&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>&#8230; is &#8220;roughly&#8221; compiled into<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Javascript<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">React.createElement('div',{class : 'Test'},\r\n                    React.createElement('MyCustomComponent', null,\r\n                                        'p', null, 'Hello world!'));\r\n<\/pre>\n<ul>\n<li>Each element (custom or <code>HTML<\/code>) is compiled into a <code>React.createElement(...)<\/code>\u00a0call where the first argument denotes the type of element, the second argument denotes the <code>css<\/code>\u00a0configurations and the third element represents any children of the element. Thus subsequent <code>React.createElment(...)<\/code>calls for hierarchical structures or a <code>string<\/code>\u00a0representing inner <code>HTML<\/code>.<\/li>\n<\/ul>\n<h2><a name=\"putting_it_together\"><\/a>8. Putting it together<\/h2>\n<p>Our application is simple. At the root we have an <code>index.js<\/code> which will register a service worker to enable a more progressive application but will also append our application content to the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document_Object_Model\/Introduction\">DOM<\/a> at the<code>div<\/code>\u00a0element with id <code>root<\/code>.<\/p>\n<p>Further to that we have three custom components <code>Todo<\/code>\u00a0<code>CentredItemInput<\/code>and <code>ItemDisplay<\/code>.<\/p>\n<p>They are responsible for encapsulating our application (<code>Todo<\/code>) , accepting input (<code>CentredItemInput<\/code>) and displaying our items (<code>ItemDisplay<\/code>).<\/p>\n<p><span style=\"text-decoration: underline;\"><em>Todo root component<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">import React, { Component } from 'react';\r\nimport '.\/Todo.css';\r\nimport CenteredItemInput from '.\/centered-item-input\/CenteredItemInput';\r\nimport ItemDisplay from '.\/item-display\/ItemDisplay';\r\n\r\n\/\/ statefull component: will encapsulate the todoItems and perform actions on said state\r\nclass Todo extends Component {\r\n\r\n  \/\/ our todo items represented as a state object with an array of todo items\r\n  state = {\r\n    todoItems: []\r\n  };\r\n\r\n  \/\/ adds the given todoItem to our list of todo items\r\n  \/\/ using arrow function (ES6) allows us to use the 'this' reference for correct scope ie: this object\r\n  addTodoItem = (todoItem) =&gt; {\r\n    this.state.todoItems.push(todoItem);\r\n\r\n    \/\/ this is required when updating any managed state - this way React\r\n    \/\/ can be notified when a state change happens and call the render() method\r\n    \/\/ of this component.\r\n    this.setState({\r\n      todoItems: this.state.todoItems\r\n    });\r\n  };\r\n\r\n  \/\/ delete the todo item indexed by the given idx\r\n  \/\/ using arrow function (ES6) allows us to use the 'this' reference for correct scope ie: this object\r\n  deleteTodoItem = (idx) =&gt; {\r\n    let todoItems = this.state.todoItems;\r\n    todoItems.splice(idx, 1);\r\n\r\n    \/\/ this is required when updating any managed state - this way React\r\n    \/\/ can be notified when a state change happens and call the render() method\r\n    \/\/ of this component.\r\n    this.setState({\r\n      todoItems: todoItems\r\n    });\r\n  };\r\n\r\n  \/\/ called by React to render this part of the DOM, our JSX snippet.\r\n  \/\/ pass this.addTodoItem function to CenteredItemInput Component via the addItem attribute\r\n  \/\/ pass this.state.todoItems array to the ItemDisplay Component via the items attribute\r\n  \/\/ pass this.deleteTodoItem function to the ItemDisplay component via the deleteItem attribute\r\n  render() {\r\n    return (\r\n      &lt;div className=\"Todo\"&gt;\r\n        &lt;header className=\"Todo-header\"&gt;\r\n          &lt;h1 className=\"Todo\"&gt;Todo list&lt;\/h1&gt;\r\n        &lt;\/header&gt;\r\n        &lt;CenteredItemInput addItem={this.addTodoItem} \/&gt;\r\n        &lt;ItemDisplay items={this.state.todoItems} deleteItem={this.deleteTodoItem} \/&gt;\r\n      &lt;\/div&gt;\r\n    );\r\n  };\r\n};\r\n\r\n\/\/ export this class as the default export so that when importing from this file we will by default\r\n\/\/ get this class.\r\nexport default Todo;\r\n<\/pre>\n<ul>\n<li>In this class we define our root component for the application.<\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline;\"><em>CenteredItemInput component<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">import React, { Component } from 'react';\r\nimport '.\/CenteredItemInput.css';\r\n\r\n\/\/ our text input stateful component\r\nclass CenteredItemInput extends Component {\r\n\r\n  \/\/ the state we are managing\r\n  state = {\r\n    input: ''\r\n  };\r\n\r\n  \/\/ clears our state \/ input box by calling the 'setState' method\r\n  \/\/ this will indicate to React that the state has changed an trigger a call to render()\r\n  \/\/ for this component\r\n  clearInput = () =&gt; {\r\n    this.setState({\r\n      input: ''\r\n    });\r\n  };\r\n\r\n  \/\/ sets our state \/ input box by calling the 'setState' method\r\n  \/\/ the setTodoItemEvent encapsulates an onChange event triggered by key input in our text field\r\n  \/\/ this will indicate to React that the state has changed an trigger a call to render()\r\n  \/\/ for this component\r\n  setInput = (setTodoItemEvent) =&gt; {\r\n    let updated = setTodoItemEvent.target.value;\r\n    this.setState({\r\n      input: updated\r\n    });\r\n  };\r\n\r\n  \/\/ will take the value in our managed state for this component\r\n  \/\/ and call the function on the parent component (Todo) responsile for adding the item\r\n  \/\/ clearInput is called to clear the input field once this is done\r\n  addItem = () =&gt; {\r\n    if (this.state.input === '') {\r\n      alert('Requires input');\r\n    } else {\r\n      this.props.addItem(this.state.input);\r\n      this.clearInput();\r\n    }\r\n  };\r\n\r\n  \/\/ this components contribution to the DOM, the JSX snippet\r\n  render() {\r\n    return (\r\n      &lt;div className=\"Centered-item-input\"&gt;\r\n        &lt;div className=\"Centered-item-input-flex-pad\" \/&gt;\r\n\r\n        &lt;div className=\"Centered-item-input-item\"&gt;\r\n          &lt;form className=\"form-inline\"&gt;\r\n            &lt;div className=\"form-group mx-sm-3 mb-2\"&gt;\r\n              &lt;input type=\"text\" id=\"input-desc\" className=\"form-control\" size=\"50\" placeholder=\"Add todo item here\" onChange={this.setInput} value={this.state.input} \/&gt;\r\n            &lt;\/div&gt;\r\n            &lt;button type=\"button\" onClick={this.addItem} className=\"btn btn-primary mb-2\"&gt;Add&lt;\/button&gt;\r\n          &lt;\/form&gt;\r\n        &lt;\/div&gt;\r\n\r\n        &lt;div className=\"Centered-item-input-flex-pad\" \/&gt;\r\n      &lt;\/div&gt;\r\n    );\r\n  };\r\n}\r\n\r\n\/\/ export the class CenteredIntemInput as the default export for this class\r\nexport default CenteredItemInput;\r\n<\/pre>\n<ul>\n<li>In this component we capture a new <code>todo<\/code> item<\/li>\n<\/ul>\n<p><span style=\"text-decoration: underline;\"><em>ItemDisplay component<\/em><\/span><\/p>\n<pre class=\"brush:js; wrap-lines:false;\">import React from 'react';\r\nimport '.\/ItemDisplay.css';\r\n\r\n\/\/ a stateless component implemented as an arrow function that receives a props object holding\r\n\/\/ the state and or functions passed to this component.\r\nconst ItemDisplay = (props) =&gt; {\r\n    let response = (props.items.map((todoItem, idx) =&gt; {\r\n        return &lt;div key={idx} className=\"Item-display-row\"&gt;\r\n            &lt;p&gt;\r\n                &lt;button type=\"button\" className=\"btn btn-danger mb-2\" title=\"Delete item\" onClick={() =&gt; props.deleteItem(idx)}&gt;\r\n                    &lt;i className=\"fa fa-close\"&gt;&lt;\/i&gt;\r\n                &lt;\/button&gt;\r\n                &lt;span className=\"Item-display-row-text\"&gt;{todoItem}&lt;\/span&gt;\r\n            &lt;\/p&gt;\r\n        &lt;\/div&gt;\r\n    }));\r\n\r\n    return (&lt;div className=\"Item-display\"&gt;{response}&lt;\/div&gt;);\r\n};\r\n\r\nexport default ItemDisplay;\r\n<\/pre>\n<ul>\n<li>In this component we display the items we have added and are able to remove items<\/li>\n<\/ul>\n<h2><a name=\"running_app\"><\/a>9. Running the app<\/h2>\n<p>To use the application the following steps need to be done:<\/p>\n<ul>\n<li>Download the example project and extract it somewhere on your system.<\/li>\n<li>Navigate to the location where you extracted the downloaded contents and execute the following: <code>npm install &amp;&amp; npm start<\/code><\/li>\n<\/ul>\n<p>The dependencies will be downloaded from <a href=\"https:\/\/www.npmjs.com\/\">Npm<\/a> and the application will be started. A browser window will be opened when ready.<\/p>\n<figure id=\"attachment_20910\" aria-describedby=\"caption-attachment-20910\" style=\"width: 795px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/start.jpg\"><img decoding=\"async\" class=\"size-full wp-image-20910\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/start.jpg\" alt=\"\" width=\"795\" height=\"105\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/start.jpg 795w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/start-300x40.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/start-768x101.jpg 768w\" sizes=\"(max-width: 795px) 100vw, 795px\" \/><\/a><figcaption id=\"caption-attachment-20910\" class=\"wp-caption-text\">Start the application<\/figcaption><\/figure>\n<p>At this point you can start typing in items (&#8220;todo items&#8221;) and adding them to your list. The application is very simple, no real validation exists and the list is unbounded, but it does showcase some features of <a href=\"https:\/\/reactjs.org\/\">React<\/a> and how to get started with it.<\/p>\n<h2><a name=\"summary\"><\/a>10. Summary<\/h2>\n<p>In this article we introduced ourselves to <a href=\"https:\/\/reactjs.org\/\">React<\/a>, understood it&#8217;s origins, it&#8217;s applicability, how it functions (briefly) and how we can use it and other required ancillary technologies to build a simple user interface.<\/p>\n<h2><a name=\"download\"><\/a>11. Download the Source Code<\/h2>\n<p>This was a ReactJS Getting Started Example<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/reactjs-getting-started.zip\"><strong>ReactJS Getting Started Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this article we will start our adventures in React. We will cover the set up of our local development environment, the various ancillary technologies needed to make our React application work and how a React application is composed. We will finally pull everything together in a simple web application which we can run locally &hellip;<\/p>\n","protected":false},"author":2474,"featured_media":20786,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[511],"tags":[82,468,513],"class_list":["post-20832","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-js","tag-javascript","tag-react","tag-web-app"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>ReactJS Getting Started Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this article we will start our adventures in React. We will cover the set up of our local development environment, the various ancillary technologies\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ReactJS Getting Started Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this article we will start our adventures in React. We will cover the set up of our local development environment, the various ancillary technologies\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-21T14:15:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jean Vester\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@jeanjayvester1\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jean Vester\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/\"},\"author\":{\"name\":\"Jean Vester\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/8f5ced3cdd77ba67c46aa8417b9c1aad\"},\"headline\":\"ReactJS Getting Started Example\",\"datePublished\":\"2018-02-21T14:15:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/\"},\"wordCount\":1441,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-logo.jpg\",\"keywords\":[\"javascript\",\"React\",\"web app\"],\"articleSection\":[\"React.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/\",\"name\":\"ReactJS Getting Started Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-logo.jpg\",\"datePublished\":\"2018-02-21T14:15:48+00:00\",\"description\":\"In this article we will start our adventures in React. We will cover the set up of our local development environment, the various ancillary technologies\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"React.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/react-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"ReactJS Getting Started Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/8f5ced3cdd77ba67c46aa8417b9c1aad\",\"name\":\"Jean Vester\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9c7eb5a98aedd6421eb285eea1b5e8991789024a35e415108b292edb81a37c3f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9c7eb5a98aedd6421eb285eea1b5e8991789024a35e415108b292edb81a37c3f?s=96&d=mm&r=g\",\"caption\":\"Jean Vester\"},\"description\":\"Jean-Jay Vester graduated from the Cape Peninsula University of Technology, Cape Town, in 2001 and has spent most of his career developing Java backend systems for small to large sized companies both sides of the equator. He has an abundance of experience and knowledge in many varied Java frameworks and has also acquired some systems knowledge along the way. Recently he has started developing his JavaScript skill set specifically targeting Angularjs and also bridged that skill to the backend with Nodejs.\",\"sameAs\":[\"https:\/\/za.linkedin.com\/in\/jean-jay-vester-b135906\",\"https:\/\/x.com\/jeanjayvester1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/jean-vester\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ReactJS Getting Started Example - Web Code Geeks - 2026","description":"In this article we will start our adventures in React. We will cover the set up of our local development environment, the various ancillary technologies","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/","og_locale":"en_US","og_type":"article","og_title":"ReactJS Getting Started Example - Web Code Geeks - 2026","og_description":"In this article we will start our adventures in React. We will cover the set up of our local development environment, the various ancillary technologies","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2018-02-21T14:15:48+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-logo.jpg","type":"image\/jpeg"}],"author":"Jean Vester","twitter_card":"summary_large_image","twitter_creator":"@jeanjayvester1","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Jean Vester","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/"},"author":{"name":"Jean Vester","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/8f5ced3cdd77ba67c46aa8417b9c1aad"},"headline":"ReactJS Getting Started Example","datePublished":"2018-02-21T14:15:48+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/"},"wordCount":1441,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-logo.jpg","keywords":["javascript","React","web app"],"articleSection":["React.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/","name":"ReactJS Getting Started Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-logo.jpg","datePublished":"2018-02-21T14:15:48+00:00","description":"In this article we will start our adventures in React. We will cover the set up of our local development environment, the various ancillary technologies","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/02\/react-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/react-js\/reactjs-getting-started-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"React.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/react-js\/"},{"@type":"ListItem","position":4,"name":"ReactJS Getting Started Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/8f5ced3cdd77ba67c46aa8417b9c1aad","name":"Jean Vester","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9c7eb5a98aedd6421eb285eea1b5e8991789024a35e415108b292edb81a37c3f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9c7eb5a98aedd6421eb285eea1b5e8991789024a35e415108b292edb81a37c3f?s=96&d=mm&r=g","caption":"Jean Vester"},"description":"Jean-Jay Vester graduated from the Cape Peninsula University of Technology, Cape Town, in 2001 and has spent most of his career developing Java backend systems for small to large sized companies both sides of the equator. He has an abundance of experience and knowledge in many varied Java frameworks and has also acquired some systems knowledge along the way. Recently he has started developing his JavaScript skill set specifically targeting Angularjs and also bridged that skill to the backend with Nodejs.","sameAs":["https:\/\/za.linkedin.com\/in\/jean-jay-vester-b135906","https:\/\/x.com\/jeanjayvester1"],"url":"https:\/\/www.webcodegeeks.com\/author\/jean-vester\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/20832","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/2474"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=20832"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/20832\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/20786"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=20832"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=20832"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=20832"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}