notes of reactjs

1. ReactJS

2. INTRODUCTION
 React is a popular JavaScript library for building user
interfaces.
 It was developed by Facebook and is widely used in web
development.
 React allows you to create reusable UI components

3. Applications of ReactJS
 Instagram is completely based on the ReactJS library
 geolocations, Google Maps APIs, search engine
 Netflix
 Yahoo Mail
 Whatsapp uses ReactJS for building user interfaces

4. ReactJS installation in ubuntu
If We've previously installed create-react-app globally via
npm install -g create-react-app
We can can create react project as :
create-react-app my-app
cd my-app
npm start
In Lab Systems npm install -g create-react-app is already installed in all the systems.
create-react-app my-app needs internet connection to download the packages
(around 100MB).
So myapp project is shared in all the systems React-Node.zip file in Desktop which
needs to be extracted

5. Installation in Windows

6. nodejs.org/en

7.  After installation
 All programs->nodejs folder-> open command prompt
 Type node –v
 It will display the version
 npm install –g create-react-app
 After installing create-react-app create new project
 Create-react app demo-project
 Use npm start to run the program

8. Video demo of installation (windows)
 https://www.youtube.com/watch?v=0twjvW0c1r0&t=1s

9. Features of React:
• Components are like functions that return HTML
elements.
• Types
1. Class components
2. Function components

10. 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.
It also require render() method, this method returns HTML

11. Example
class Car extends React.Component {
render()
{
return <h2>Hi, I am a Car!</h2>;
}
}

12. Function Component
A Function component also returns HTML
Behaves much the same way as a Class component
But Function components can be written using much less code, are
easier to understand

13. Example
function Car()
{
return <h2>Hi, I am a Car!</h2>;
}

14. Props
Components can be passed as props, which stands for properties.
Props are like function arguments, and you send them into the
component as attributes.
function Car(props)
{
return <h2>I am a {props.color} Car!</h2>;
}

15. What is JSX?
JSX allows us to write HTML in
React.
JSX makes it easier to write and
add HTML in React.

16. Nested Elements in JSX
you need to wrap it with one
container element.
Here, we use div as a container
element which has three nested
elements inside it.

18. JSX uses camelcase naming
convention for attributes
JSX allows us to use comments
that begin with /* and ends with */
and wrapping them in curly braces
{}

19. Arrow Functions
Before:
hello = function() {
return "Hello World!";
}
With Arrow Function:
hello = () => {
return "Hello World!";
}

20. import React, { Component } from
"react";
In this import statement, the code is importing the Component
class from the "react" module or package.
The curly braces {} are used to destructor the named import,
allowing you to selectively import specific elements from a
module.

21. Components in React can contain the following elements:
1.JSX (JavaScript XML) Markup: JSX allows you to write HTML-like
markup within your JavaScript code,
2.State: State allows a component to keep track of and manage changes
to its data over time.
3.Props (Properties): Components can receive data and configuration
through props
4.Event Handlers:

22. </button>{" "}
The {" "} following the closing </button> tag is optional and is
used to add a space between the two buttons for visual
separation. It doesn't affect the functionality of the button or the
event handling.

23. The return statement in the render method of a React
component is used to define and specify the structure and
content of the component's rendered output. It determines what
will be displayed on the screen when the component is
rendered.

24. JSX Styling
React always recommends to
use inline styles.
To set inline styles, you need to
use camelCase syntax.

26. Inside the render method, there is a variable declaration var
myStyle which defines a JavaScript object.
This object represents the CSS styles that will be applied to the
<h1> element.