REACT FOLDER STRUCTURE

File Structure <projectname>

• node_modules: includes node related modules and annotations i.e. @ 
• public: include index.html/html web-pages, favicon/images, manifest, robots.txt
• src: includes javascript and css files, eg: react.js, App.js, App.css etc.
• package.json: is a json format file containing  all the informations of your project
• readme.md: is a file having basic commands of npm.

Example: react.js

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello REACTJS</h1>,

  document.getElementById('root')

);

import React from 'react'; is a module used for inserting JSX/html elements.

import ReactDOM from 'react-dom'; is a module, used for accessing JS ids manipulation

and updation in the REACT.

ReactDOM.render(show what, show where, callback func); is a method used to render(to

show) informations.

<h1>Hello REACTJS</h1> is a jsx element.

document.getElementById('root') is a JS method which returns element that has the ID

attribute and 'root' is a ID of <div> in index.html

Babel is a JavaScript compiler.

Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines.

JSX is stands for JavaScript-XML, used by REACT that extends ECMAscript so that XML/HTML like text can co-exist with ReactJS code. It allow us to put html into JavaScript.