How to Build React Component using React, React DOM and Babel

How to Build React Component using React, React DOM and Babel

Now Let’s start discussing today’s topic.Today we’ll discuss about basic things you must know about React Library.It’s a famous front-end library which use in IT industry for business applications.Also day by day it’s getting updated.So, It will be much important for you to keep in touch with this library if you are willing/doing a job in IT industry as it’s already a trending front-end technology now a days.So we’ll discuss it in details now and create your first React Component.

Now Let’s start discussing today’s topic.Today we’ll discuss about basic things you must know about _**_React Library_.It’s a famous _front-end_ library which use in _IT industry_ for _business applications_.Also day by day it’s getting _updated.So, It will be much important for you to keep in touch with this library if you are willing/doing a_ job in IT industry _as it’s already a __trending front-end technology_ now a days.So we’ll discuss it in details now and create your _first React Component**.

What is React ?

Simply, React is a _**_JavaScript_ library that use to create _User Interfaces which runs on browsers _**_which was created by_ Facebook._(one of the most popular ones, with over 100,000 stars on [GitHub_](https://github.com/facebook/react)). It is the **_view_ layer of an _MVC application**_ (Model View Controller)_

NOTE: React is not a _**_framework_.It’s a _JavaScript library**.

For a business application(client application) to be extremely _**_successful_ it must be _maintainable,manageable_ and__ re-usable._Because when the business is expanding and when the customers asking for more improvement/changes the development team must be much responsible for making quick changes in the client application as soon as possible.That’s a more than __100%_ truth in _IT industry.So you must be a fast learner and a fast adapter when client requests rapid and complex changes in your business application.**

Does React helps to overcome implementation complexity of client’s business applications

Yes.This is the most valuable and important thing which helps you when implementing a _**_complex business application.React uses a concept called_ re-usable component__ which you may feel much comfortable with.It makes you _re-use_ the same code in several places.Only thing you need to do is make changes to your _props_ and _states.Using tiny components you could build your complex application in a simple way. __Also as this is a __view_ part of the application it doesn’t depend(isolated with) on the _server state.**

Components_ are like custom, **_reusable HTML elements, to quickly and efficiently build_ user interfaces_**

Now it’s time to try this with your own.I’m used __this online editor.It shows HTML, CSS, JavaScript sections clearly and separately.I recommend you to use it to make your first **_React Component.**

We’ll create a simple _**_HTML element_ which displays name and age of a _Person _**_using CSS styling as below(Image shows how a Person Component used to display information of two persons called Sanath and Pramod);

Image for post

person.figure

You only need both HTML,CSS files below to implement _**_Person component**_ using HTML and CSS.Use below code in editor to try this._

components react-dom programming react babel

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

How to use Functional Programming in your React app | React Next

In the past few years, the buzz around functional programming has been growing, but it can be challenging to apply theoretical concepts to everyday work. How can we make the code we work on more functional? What advanced patterns can you use, and why should you do that? And what do React hooks have to do with all this? In this talk we’ll have a look at real-life examples and patterns you can use to make React apps more functional.

 Component Life Cycle in React

Every component in React goes through a lifecycle of events. You can think is of going through a cycle of birth, growth, and death the…

Learn about components in programming and React's functional component

In this video tutorial, you'll learn about components in programming and React's functional (stateless) component with an example.

10 Best React Loading Component for Your App

If you are unable to shorten the process, you should at least try to make the wait pleasant for your users. Here are 10 react loading components for your react.js application