React Part 1 - Setup a new project.

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”.

Below tools required for this application setup

Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. (Wikepedia)

NPM is the default package manager for the JavaScript runtime environment Node.js. It consists of a command-line client, also called npm, and an online database of public and paid-for private packages called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website. (Wikepedia)

Development steps - Navigation to your local folder repository where you want to create the new app and run the below command.

npx create-react-app my-app
cd my-app
npm start        

the local directory will look like this one

The first default application will look like this

Let's understand the default structure of the app here-

A full tutorial is available on react side to follow, also codepen.io is a great tool to create some samples using HTML, javascript and CSS.

Package.json file holds all the dependencies for the project -

I cleaned the instance with a basic required file.

the flow is - the first page is called an index.html from the public folder and it has a div root

  <div id="root"></div>

from the src folder, the index.js will be called and that will basically inject the App into the div root.

All syntaxes are in JSX - a type of javascript with XML

Export of app and import of app is very important

function App() 
  return (
    <div>
      <h2>Sample App!</h2>
    </div>
  );
}


export default App;        

Import in index.js

import ReactDOM from 'react-dom'


import './index.css';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

;        

Note - why JSX is so important, it save our time, otherwise have to write all javascript to declare HTML tag and add etc, so with JSX we can simply define the component and get full freedom to define HTML within the component.

Creating the first component - it's recommended to create a separate file for each component. create a folder for the component keep it all lower case, basically, we build a component tree and root component app is important, A component in react is just a javascript (JSX) function with return the set of HTML, lowercase or HTML element and all react declarative component should start from the upper case.

More to come in the next article.