Hello word App and Components— React .js — L4

Start

Now this spinner is giving good vibe that you have started to learning react .

And open your app directory in VS Code . The code of the application resides in the src folder. There will be a file index.js

import React from 'react'
import ReactDOM from 'react-dom/client'

import App from './App'

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

and file App.js

const App = () => (
  <div>
    There will be something ...
  </div>
)

export default App

And there will some other files named as

App.css, App.test.js, index.css, logo.svg, setupTests.js ,reportWebVitals.js .

You can delete now and we will talk later about this . And also replace the App.js with above App.js.

Code sandbox preview

Components

As you have seen index.js file where App.js is imported .App is working as react -component. And it renders its contents into the div-element having the id value ‘root’. And this <div id=”root”> is present in the file public/index.html.

import App from './App'

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

public/index.html

Now we know that App.js is component , so try to change some thing in App.js and it will be reflected in browser.

const App = () => (
  <div>
    <p>Hello world</p>
  </div>
)

And this is javascript fuction , we can also modify and render the dynamic content within component .

const App = () => {
    const name = "Ram";
    const predicate = "is a good boy";
   return (
      <div>
          <p>{name} {predicate}</p>
      </div>
   );};
export default App;

And the javascript code will be evaluated and rendered as we expected .

Multiple components

Now there is only one component as App.js , we can work with multiple components .

Greet App

Passing argument to components

You are using javascript functions , It is possible to pass arguments in components . Take a look at this example -

props.

And we can do this using props. and we can evaluate this using curly braces with variable name.

Let’s take a look of reusability of a component.

Sum reuse

Here we are using Sum component two times . We can use this component anywhere in the project . So when this is required we can import this , we don’t have to write again.

Thanks for reading . If any error / doubt , please comment . I will share the solution soon.