Now Hiring: Are you a driven and motivated 1st Line IT Software Developer?

React JS Development

  • Home
  • React JS Development

React JS Development

images (12)

React.js is a powerful, declarative, and efficient JavaScript library used for building user interfaces, primarily for single-page applications. It lets you build complex UIs from small, isolated pieces of code called “components.”

Key Concepts in React:

1. Components

  • React apps are made of components. Components can be either class-based or functional, though with modern React, functional components combined with hooks are the preferred approach.
  • Functional Components: These are simpler and mainly use hooks (like useState, useEffect, etc.).
  • Class Components: Older components that use lifecycle methods, like componentDidMount and componentWillUnmount.

2. JSX (JavaScript XML)

  • React uses JSX, which looks like HTML but is actually JavaScript. JSX allows you to write HTML elements in JavaScript, making it easier to build the structure of your UI.

Example:

jsx
const MyComponent = () => {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
};

3. State and Props

  • State: Represents data that can change over time within a component. It’s mutable and triggers a re-render when it changes.
  • Props: Short for “properties,” props are used to pass data from a parent component to a child component. They are immutable from the child’s perspective.

Example using both:

jsx
const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};const App = () => {
const [name, setName] = useState(‘John’);
return (
<div>
<Greeting name={name} />
<button onClick={() => setName(‘Jane’)}>Change Name</button>
</div>
);
};

4. Hooks

  • useState: Allows you to add state to functional components.
  • useEffect: Lets you perform side effects (like fetching data) in functional components.
  • useContext: Shares data across the component tree without having to pass props down manually.

Example using useState and useEffect:

jsx

import React, { useState, useEffect } from 'react';

const App = () => {
const [data, setData] = useState(null);

useEffect(() => {
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => setData(data));
}, []); // Empty dependency array means this runs only once after the first render

return (
<div>
{data ? <p>Data: {data}</p> : <p>Loading…</p>}
</div>
);
};

export default App;

5. React Router

  • If your app has multiple pages, you’ll need a way to navigate between them. react-router-dom is the library React uses to handle routing.

Install it using:

bash
npm install react-router-dom

Example of routing:

jsx

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;

const App = () => {
return (
<Router>
<nav>
<a href=“/”>Home</a>
<a href=“/about”>About</a>
</nav>
<Switch>
<Route exact path=“/” component={Home} />
<Route path=“/about” component={About} />
</Switch>
</Router>
);
};

export default App;

6. State Management

  • React’s state management with useState is great for simple apps, but for larger applications, you may want to use context or state management libraries like Redux or Recoil to manage global state.

Example of using Context API (React’s built-in state management):

jsx

import React, { createContext, useState, useContext } from 'react';

// Create a context
const MyContext = createContext();

const ProviderComponent = ({ children }) => {
const [value, setValue] = useState(‘Initial value’);
return (
<MyContext.Provider value={{ value, setValue }}>
{children}
</MyContext.Provider>
);
};

const ConsumerComponent = () => {
const { value, setValue } = useContext(MyContext);
return (
<div>
<p>{value}</p>
<button onClick={() => setValue(‘Updated value’)}>Update Value</button>
</div>
);
};

const App = () => {
return (
<ProviderComponent>
<ConsumerComponent />
</ProviderComponent>
);
};

export default App;

Step-by-Step Guide for Creating a React App

  1. Install Node.js and npm: You need these installed on your computer. You can download them from here.
  2. Create a React Application: Use the following command to create a new React app using the create-react-app tool:
    bash
    npx create-react-app my-app
    cd my-app
    npm start
  3. Write Your Components: Create .js files in the src directory and start writing your components.
  4. Start the Development Server: Your React app will run at http://localhost:3000/ by default. You can test and see the changes live as you develop your app.

Resources to Learn React:

Let me know if you want any specific guidance on a React feature or concept!

images (13)
© 2019-25 AST APP Invent Pvt. Ltd.. All Rights Reserved

Newsletter

* Be the first to learn about our latest trends and get exclusive offers.
Newsletter Image
Newsletter sign-up
Sign up to our newsletter for regular updates and more.