React Components

 React Components,Components are like functions that return HTML elements.

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.

Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.

Using a component 

Now that you’ve defined your Profile component,

you can nest it inside other components. For example, you can export a Gallery component that uses multiple Profile components:

Class Component

A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component's functions.

The component also requires a render() method, this method returns HTML.

import React, { Component } from 'react'

 class Car extends React.Component {

  render() {

    return (

         <h2>Hi, I am a Car!</h2>

    )

  }

}

export  default Car

For example, you can export a Car component  into App.js File.

Create App.js file and the following code.

import React, { Component } from 'react';

import './App.css';

import Hello from './components/Hello';

function App{

  return (

   <div>

    <Hello/>

      

    </div>

  );

}

output is:--

Hello I m Car Class

Read More

 

Create a New React App

 

Install  NodeJS and NPM. NodeJS and NPM are the platforms need to develop any ReactJS application. ..

. Using the npm command

npm init -y  

Once the Installation of Node is complete. Open Node.Js Command Prompt and we can check the version as well.

Run the following command to check the NPM version in the command prompt.

Node –v

Npm -v

 

 

Visual Studio Code is a free IDE from Microsoft built for developing and debugging web applications. It has integrated Git control & terminal.

Install Visual Studio Code

Download and install Visual Studio Code from the following URL.

 

After the installation, open the Project we have created earlier using the VS Code.

 

2) Install Create-React-App Tool

The next step is to install a tool called create-react-app using NPM.

This tool is used to create react applications easily from our system.

Steps To Follow:-

 

 1) Open a terminal(Windows Command Prompt or PowerShell).

2) Create a new Folder React

3) change the directory for e.g cd React

4) npm install react-router

5) npm install react-router-dom

6) Install React using create-react-app

 

 

 

 

Let's create a new Project now using the command.

 

npx create-react-app myapp2

Running the React Application.

Let us Open the browser http://localhost:3000.

Let's do CD to the Project we have created and run it locally on our system using npm start.

Launch the browser and visit http://localhost:3000. We can then see our first React Application response in the browser.

 

cd Myapp

npm start

 

 

 

 

What does app js contain in React?

src/App. js : This is the file for App Component. App Component is the main component in React which acts as a container for all other components.

The root is where the application layout structure is defined. It is typically the first UI element a user interacts with.

 

What is index js in React?

Index. js file is just like index. html file, if no specification is provided a directory points to it's index file.

 

Components are like functions that return HTML elements.

 

Let’s say there is a <div> somewhere in your HTML file:

 

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

We call this a “root” DOM node because everything inside it will be managed by React DOM.

To render a React element, first pass the DOM element to ReactDOM.createRoot(), then pass the React element to root.render():

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

const element = <h1>Hello, world</h1>;

root.render(element);

components

The components folder in the simple folder structure is incredibly straightforward since it will contain every single component in your entire application

What is a App.css

CSS in React is used to style the React App or Component. The style attribute is the most used attribute for styling in React applications, which adds dynamically-computed styles at render time

 

Example Of Component Hello

Read More