Reactjs

Hello and Welcome to this tutorial on Reactjs . Here , we are going to learn Reactjs and also create a simple application .


Table of Contents

• Getting Started
• Components
• JSX
• props
• state

1. Getting Started

Finish up all the required software installation (nodejs , vscode..) and start with creating a simple application using the following command .

npx create-react-app your-app-name

start your app using the following command

npm start

2. Components

Components are basic building blocks of a React application . Let's create one .
Create a new  file , here is an example of a sample component . 

import React from 'react';

import './App.css';

function App() {

  return (

    <div  >

       Hello World !

    </div>

  );

}

export default App;

2.1  render()

returns the HTML part of the component .

3. JSX

JSX stands for Javascript XML . You would have notice that in the render function we return an HTML element , that's actually a JSX . A JSX should be a valid XML .It is translated to Javascript at runtime .You can use an expression {} in JSX .

4. props

We can access the data passed to a component using props .

5. state

A state can have multiple properties which will be used within an application . If any state property is changed the component is re rendered .

  6.LifeCycle : Mounting 

• Constructor
• static getDerivedStateFromProps
• render
• componentDidMount