Steps to create Component files

For creating component file, import the ‘react’ at starting and by using JavaScript function or by using arrow function we need to return HTML to display output to the user. If you learnt arrow function then it is easy to understand.

Step 01:  Type below code

                                import React from ‘react’

Step 02: Create function that will return (HTML tag/JSX).

function <function_name>()
{
return <HTML>
}
export default <file_name>

By using Normal Function

export const <file_name>=()=>{ return <HTML> }

By using Arrow function

JSX

JavaScript XML (JSX) is the extension to the JavaScript syntax, XML-like code for element and components. JSX tags   have a tag_name, attributes and children. JSX is not necessary to write react application. JSX made your react code simpler and elegant. JSX ultimately transfer to pure JavaScript which is understood by the browsers.

JSX differences

HTML attributesReact attributes
classclassName
forhtmlFor

Camel case property naming convention

  1. onclick -> onClick
  2. tabindex -> tabIndex

Installation

For using React needs Node JS software and to write react code and run needs VS code editor (It is optional you can use as feel sufficient).

Links to download the required software

Node JS:  www.nodejs.org

VS Code Editor:  www.code.visualstudiocode.com

Install nodejs.exe by clicking: Next –> Next –> Next –> Install

Path set permanently:  Right click on My Computers /Properties / Advanced system settings /Environment variable /User setting / Path /New / (type or copy below address)

C:\\Program Files\nodejs\

Ok —> Ok —> Ok

Set path

To check nodejs open command prompt and type

npm – v (It will show version of node js)

Leave a Reply

Your email address will not be published. Required fields are marked *