Today we will discuss about some basic and core part of react..
What is React??
=> In briefly we can say that React.js is A JavaScript library for building user interfaces.
React is a JavaScript “library”. It is not exactly a “framework”. It is not a complete solution and you will often need to use more libraries with React to form any solution. React does not assume anything about the other parts in any solution.
Component
Components are the heart and soul of React. Most simply component is just a function that accept some properties and return a UI element.
Component has 4 basic rule that you can understand…
- Similar in look different in data.
- Wrapper with a parent container.
- Single unit to make a header.
- Large unit to break-down a page.
React-bootstrap
React-Bootstrap replaces the Bootstrap in JavaScript. Which is the alternate the Bootstrap of cdn but the difference is you must import what you want to use.
UseState
useState is a Hook which is allows you to have state variables in functional components. There are two types of components in React: class and functional components. Class components are ES6 classes that extend from React.Component and can have state and lifecycle methods: class Message extends React.
React Context
This brings us now to React context which is just global state for components.
This is make the API allows to create global context object which can give by other component.
React Hook Form
React Hook Form supports schema-based form validation with Yup, Zod , Superstruct & Joi, where you can pass your schema to useForm as an optional config. React Hook Form will validate your input data against the schema and return with either errors or a valid result.
UseEffect
By using this useEffct Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API.
And also we can say that it work’s like a fetch is js.
JSX in ReactJS ???
At first, we should see a variable declaration below —
const intro = <h1>Hello, world!!</h1>;What happened ?? Isn’t it a funny syntax? It is neither a string nor HTML. Guess what!!! This funny syntax is called JSX. It is a syntax extension to JavaScript. It is recommended to use with react to describe the UI. It comes with the full power of JavaScript.
Why JSX ???
- It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript.
- It makes it easier for us to create templates.
- Instead of separating the markup and logic in separated files, React uses components for this purpose. We will learn about components in detail in further articles.
React Router…
React Router is the standard routing library for React. … “React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in.
