React is a JavaScript library for building user interfaces. It is not a Framework.

It is also known as ReactJs and React.js , so don't get confused if you read different notations in different places.

Documentation of React - %[reactjs.org/docs/getting-started.html]

By studying the documentation you will get to know step by step beginner level understanding about React. The user Interface(UI) is the point of human-Computer interaction and communication in a device. This can include display screens, Keyboards , a mouse and the appearance of a a desktop .

React History

• React was first designed by Jordan Walke , a software engineer at Facebook.

• It was first displayed for Facebook News feed around 2011.

• In 2013, React was open sourced at Js conference.

About React

• Components based approach.

• A component is one of the core building blocks to React.

• In other words we can say that every application you will develop in React will be made of pieces called components. Components make the task of building UIs much easier.

Uses a Declarative approach

• Declarative programming is a programming paradigm that expresses the logic of a computation without describing it's control flow.
• Declarative programming is like asking your friend to draw a landscape. You don't care how they draw it, that's up to them.
• DOM updates are handled gracefully.
• Reusable code.
• React is designed for speed, speed of implementing the application simplicity and scalability.

React Installation

• Install Nodejs and NPM

• Install VS code / Sublime/Atom/Brackets

• Install React from terminal

npm install -g create-react-app
create-react-app --version
create-react-app <project name>

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render('kya dikhana hai', 'kaha dikhana hai', 'callback func');

Jsx -> JavaScript extension/ Javascript xml

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1> Hello world </h1>, document.getElementById("root"))

Render Multiple Elements in React

ReactDOM.render(
              <div>
                  <h1>Hi my name is 'Your Name' </h1>
                  <p>Today is a nice day </p>
            </div>,
  document.getElementById('root'))

React Fragment

<React.fragment>
          <h1> Hashnode</h2>
          <p> Today is good day </p>
</React.fragment>,

<>
     <h1> Hashnode</h2>
          <p> Today is good day </p>
</>,
  document.getElementById('root')

JavaScript Expressions in React

const fname = "your name";
ReactDOM.render(
<>
    <h1> My Name is {fname}</h1>
    <p> Add {2+3}</p>
</>,
  document.getElementById('root'));

Template Literals

const fname = "Your first name";
const lname = "Your last name";
ReactDOM.render(
<>
    <h1>{` My Name is {fname} ${lname}`}</h1>
</>,
document.getElementById('root'));

Jsx attributes

const name = "Your first name";
const img = "https://patterns.dev/img/reactjs/react-logo@3x.svg"
ReactDOM.render(
<>
    <h1 contentEditable = 'true'> My Name is name}</h1>
<img src={img} alt = "react-logo-img"/>
</>,
document.getElementById('root'));

Internal CSS and Inline CSS Styling

const heading = {
              color: "#fa9191",
              textTransform: "capitalize",
              textAlign: "center"
}
ReactDOM.render(
<>
    <h1 style = {heading}> My Name is ' your name'</h1>
</>,
document.getElementById('root'));

We will React components in next blog for that if you liked this article then follow me for more.

Remember you can't become expert in one day coding needs consistency. So stay consistent.