Learn React Js Basics

React JS is an open-source JavaScript library that is widely used for building user interfaces. It was created by Facebook in 2011 and has gained significant popularity among developers due to its simplicity, flexibility, and performance.

In this blog, we will cover some of the basics of React JS, including its core concepts, advantages, and how to get started with React.

Core Concepts of React JS

1. Components: Components are the building blocks of React. They are small, reusable, and independent pieces of code that can be used to build complex user interfaces. React components can be of two types: functional and class-based components.
2. JSX: JSX is a syntax extension that allows developers to write HTML-like code within JavaScript. It makes it easier to write and understand React components.
3. Props: Props are short for properties. They are used to pass data from parent components to child components. Props are read-only and cannot be modified by the child component.
4. State: State is a JavaScript object that stores data within a component. Unlike props, state can be modified by the component itself. When state changes, React re-renders the component to reflect the updated state.

Advantages of React JS

1. Declarative: React uses a declarative approach to building user interfaces. This means that developers only need to describe what they want the UI to look like, and React takes care of the rest.
2. Reusable: React components are reusable, which means that developers can create a library of components that can be used across multiple projects.
3. Performance: React uses a virtual DOM, which is a lightweight representation of the actual DOM. This makes it faster to update the UI since React only updates the parts of the DOM that have changed.

Getting Started with React JS

Get puja bhandari’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

To get started with React JS, you need to have a basic understanding of HTML, CSS, and JavaScript. You will also need to have Node.js installed on your computer.

1. Create a new React app: You can create a new React app using the Create React App tool. Open your terminal and run the following command:

npx create-react-app my-app

This will create a new React app named “my-app”.

2. Run the app: Navigate to the directory where your React app was created and run the following command:sqlCopy code

npm start

This will start the app in your browser.

3. Create a new component: Open the “src” folder in your React app and create a new file named “MyComponent.js”. Add the following code to the file:

import React from 'react'; 
function MyComponent(props) { 
return ( <div><h1>Hello, {props.name}!</h1> <p>Welcome to my React app.</p> </div> ); 
}
export default MyComponent;

This creates a functional component named “MyComponent” that takes a “name” prop and displays a greeting message.

1. Use the component: Open the “App.js” file in your React app and add the following code:

import React from 'react'; 
import MyComponent from './MyComponent';
function App() { 
return ( <div> <MyComponent name="John" /> </div> );
 }
export default App;

This imports the “MyComponent” component and uses it in the “App” component with a “name” prop of “John”.

2. View the component: Save the changes to the “App.js” file and refresh your browser. You should see the greeting message displayed on the screen.

Conclusion

React JS is a powerful and flexible library that makes it easy to build complex user interfaces. By understanding its core concepts and advantages,