Steps :

1) $ npx create-react-app part1

2) $ cd part1
3) $ npm start
-By default, the application runs in
localhost port 3000 with the address
http://localhost:3000
-Chrome should launch automatically.
-Open the browser console immediately.
-open a text editor so that you can view the code
as well as the web-page at the same time
on the screen.
4) goto the specified folder (i.e part1)
5) open the src folder
6) open/ edit the index.js file
default code such that the contents of the file index.js
look like:

import ReactDOM from 'react-dom'

import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(
<App />,
document.getElementById('root')
)
7) save it
8) open/ edit the app.js file with the following code
look like this
import React from 'react'
const App = () => (
<div>
<p>Hello world</p>
</div>
)
export default App
9) save it
10) once save the app.js file , the server will automatically
connect and display the ouput in browser.
----------------------------------------------------
Component

-components are like JavaScript functions.

They accept arbitrary inputs (called “props”) and return React elements describing
what should appear on the screen.
1) The file App.js now defines a React-component
with the name App.
The command on the final line of file index.js:
ReactDOM.render(<App />, document.getElementById('root'))
-ReactDOM is a package that provides DOM specific methods that can be
used
at the top level of a web app to enable an efficient way of managing DOM
elements of the web page.

2) open / edit app.js file then edit the content of the file in app part :
const App = () => (
<div>
<p>Hello world</p>
</div>
 )

3) save it and it automatically start the server to dispaly the ouput in

browser.

4) Again open / edit app.js file then edit the content of the file in app
part.
The function returns the value of the expression.
const App = () => {
return (
<div>
<p>Hello world</p>
</div>
)
}
5) save it and it will automatically start the server to dispaly the ouput in
browser.

-----------------------------------------------------------------------------------
---
Modify your component to be as follows and observe what happens in the
console:

1) open / edit app.js file then edit the content of the file in app part :
const App = () => {
console.log('Hello from component')
return (
<div>
<p>Hello world</p>
</div>
)
}

3) save it and it will automatically start the server to dispaly the ouput in
browser.
-----------------------------------------------------------------------------------
-----------
Dynamic Content -Component

It is also possible to render dynamic content inside of a component.

Modify the component as follows:

1) open / edit app.js file then edit the content of the file in app part :
const App = () => {
const now = new Date()
const a = 10
const b = 20

return (
<div>
<p>Hello world, it is {now.toString()}</p>
<p>
{a} plus {b} is {a + b}
</p>
</div>
)
 }

3) save it and it will automatically start the server to dispaly the ouput in
browser.
-----------------------------------------------------------------------------------
---------

JSX - javascript xml

-JSX is a JavaScript Extension Syntax used in React to easily write HTML and
JavaScript together.

The layout of React components is mostly written using JSX.

Although JSX looks like HTML, we are actually dealing with a way to write
JavaScript.
Under the hood, JSX returned by React components is compiled into JavaScript.

1) open / edit app.js file then edit the content of the file in app part :
const App = () => {
const now = new Date()
const a = 10
const b = 20
return React.createElement(
'div',
null,
React.createElement(
'p', null, 'Hello world, it is ', now.toString()
),
React.createElement(
'p', null, a, ' plus ', b, ' is ', a + b
)
)
}

3) save it and it will automatically start the server to dispaly the ouput in
browser.

-----------------------------------------------------------------------------------
------------------
Multiple components

modify the file App.js as follows

const Hello = () => {
return (
<div>
<p>Hello world</p>
</div>
)
}

const App = () => {

return (
<div>
<h1>Greetings</h1>
<Hello />
</div>
)
}
We have defined a new component Hello and used it inside the component App.
Naturally, a component can be used multiple times:

1) open / edit app.js file and modify it

const App = () => {
return (
<div>
<h1>Greetings</h1>
<Hello />
<Hello />
<Hello />
</div>
)
}

2) save it and it will automatically start the server to dispaly the ouput in
browser.

-----------------------------------------------------------------------------------
-------------------