what are React and its components?

Learn about essential React concepts and related terms, React, JSX, components, and type of components.

what is react???

1-React is a JavaScript library — one of the most popular ones

2-React is not a framework.

3-React is an open-source project created by Facebook.

4-React is used to build user interfaces (UI) on the front end. it is responsible for making only rich user interfaces.

5-React is the view layer of an MVC application (Model View Controller)

6-React has a rich Echosystym and plays really well with other libraries and is more than capable of building full-fledged web applications

Q2- Why learn to react ??

React is an open-source project created and maintained by Facebook. it is an in-demand skill set & colossal/huge community support.

React has a component-based architecture. this lets you break down your application into small encapsulated parts which can then be composed to make a more complex UI.

• *Example **
• A traditional website can be broken down into Header, side nav, main content, and footer. each section represents a component that when makes up our entire website.

react is declarative means we just have to tell react what you want and React with react Dom library will build the actual UI.

React will handle efficiently updating and rendering of the components when your data is changing.

DOM updates are handled gracefully in React.

### more about React

React also makes no assumption about the rest of the technology stack. seamlessly integrate React into any of the applications. a portion of the page or a complete page or even an entire application itself. react will fit into it.

what is npx ?

NPX: The npx stands for Node Package Execute and it comes with the npm, when you installed npm above the 5.2.0 version then automatically npx will install. It is an npm package runner that can execute any package that you want from the npm registry without even installing that package.

what are React components?

React component is part of user interfaces.React JS is a component-based front-end library which means that all parts of a web application are divided into small component

every application you will develop in React will be made up of pieces called components.

components are also reusable the same components can be used with different properties to display different information.

components can also contain the other components. For example\

like side nav can contain the right-side nav.

How does a component translate the code in our application???

The component code is usually placed into javascript files. example-app component placed in app.js

A component basically a code into a js file. what does the code look like that depends on the type of the component more complex the application more the number of components?

JSX JavaScript XML

JSX is a syntax extension to javascript .it is used in React to describe what the UI should look like. JSX produces React “element”.JSX from the core syntax of React.

Why do we use JSX?

JSX makes it easier to write or add HTML in React. JSX can easily convert HTML tags to react elements. It is faster than regular JavaScript. JSX allows us to put HTML elements in DOM without using appendChild() or createElement() method.03

we have two-component types:-

1-A stateless Functional Component.

2-A stateful class component.

1-A stateless Functional Component => A functional componet literally a javascript functions.its return HTML thats describe the UI.

It accepts the input of props(properties) and returns an HTML that describes the UI.

2-A stateful class componet=> it is a regular ES6 class that extends the component class from the react library. It must contain the render method which in return HTML.

Advantages of using functional components over class components.

1- 1st advantage of using functional components over class components is the absence of the ‘this’ keyword which you will encounter in a class-based component.

2-we can force ourselves to think of a solution without having a state. functional components tend to do without any complicated logic and are mainly responsible for the user interface, this is why functional components are also called stateless components/Dumb components/Presentational component.

Advantage of using Class component over functional component

1-its a bit more feature-rich.

2-They maintain their own private data its also called state

3- They contain complicated UI logic and most importantly they provide life cycle hooks.

the class component is also called stateful/Smart/Container components.

Thank you for reading ….