1.
Write steps involved in creating a react component
Create a React application: Create a new React application using the command: npx
create-react-app project-name. Replace project-name with the name of your project.
Move to the project folder: After creating your project folder, move to it using the
following command: cd project-name.
Creating and defining a new component: Create a new component by creating a new
JavaScript file in the src folder. Eg: Create a file called file.js. In the file.js file, define
the component by extending the React.Component class. For example: class file
extends React.Component { ... }.
Add methods and props: Add methods and props to the component as needed. For
example, you can add a render method to render the component’s UI.
Use the component: Use the component in your application by importing it and
rendering it in a parent component. For example: import file from './file'; <file/>
—-------------------------------------------------------------------------------------------------------------
2. How the react hooks help in managing the state of react components
Functional Components with State: With useState, you can directly add state to functional
components. This eliminates the need to convert to class-based components for state
management, keeping your components functional and potentially simpler.
State Declaration and Update: useState returns an array with two elements: the current state
value and a function to update it. This provides a clean separation between accessing the
state and modifying it.
Component Re-renders based on State: When the state update function is called, React
knows the state has changed and triggers a re-render of the component, ensuring your UI
reflects the latest state
—-------------------------------------------------------------------------------------------------------------
3. Differentiate between react native and hybrid frameworks
React Native: Considered a "write-once, run-anywhere" approach. Developers use
JavaScript and React syntax to build the core app logic, but the framework translates this
code into native components (Swift or Java) for each platform (iOS or Android). This allows
for a more native feel and performance.
Hybrid Frameworks: These frameworks like Cordova or Ionic use web technologies (HTML,
CSS, JavaScript) to build the app's user interface and functionalities. The code runs within a
webview container, a native component that displays web content.
—-------------------------------------------------------------------------------------------------------------
4. Highlight the different navigation components provided by react router
NavLink: This component is used to create a link that can be used to navigate between
different routes. It provides useful context for assistive technology like screen readers and
provides a “transitioning” value to give you finer-grained control over View Transitions.
Navigate: This component is used to change the current location when it is rendered. It’s a
component wrapper around the useNavigate hook and accepts all the same arguments as
props. This makes it easier to use this feature in a React.Component subclass where hooks
are not able to be used.
—-------------------------------------------------------------------------------------------------------------
5. Identify the main features of redux form
Field values persistence via Redux store: Redux Form stores form field values in the Redux
store, which allows for easy persistence and retrieval of form data.
Validation (sync/async) and submission: Redux Form provides built-in support for validation,
both synchronous and asynchronous, as well as submission of the form data.
Formatting, parsing, and normalization of field values: Redux Form provides functionality for
formatting, parsing, and normalizing field values, making it easier to work with form data.
—-------------------------------------------------------------------------------------------------------------
6. Build the internal structure of react components with a simple example
A React component typically consists of three main parts:
JSX: This is the HTML-like syntax used to define the component’s UI.
JS: This is the JavaScript code that defines the component’s behavior and logic.
CSS: This is the CSS code that styles the component’s UI
Eg: A Button component is defined as a function that returns a JSX element. The JSX
element is a button element with the text “Click me!”.
import React from 'react';
const Button = () => {
return (
<button>
Click me!
</button>
);
};
export default Button;
—-------------------------------------------------------------------------------------------------------------
7. Outline the steps involved in setting up the react environment and demonstrate how
to display hello world message in a react component
First, ensure you have npm installed on your system. Next, create a new project directory
and navigate to it in your terminal or command prompt. Run the following command to create
a new React project: npx create-react-app my-app
This will create a new React project with the basic folder structure and necessary
dependencies. Open the project directory in your code editor and navigate to the src folder.
Create a new file named HelloWorld.js and add the following code:
import React from 'react';
function HelloWorld() {
return (
<div>
Hello World in React JS
</div>
);
}
export default HelloWorld;
This code defines a new React component called HelloWorld that renders a “Hello World”
message.
Now, open the App.js file and add the following code:
import React from 'react';
import HelloWorld from './HelloWorld';
function App() {
return (
<div>
<HelloWorld />
</div>
);
}
export default App;
This code imports the HelloWorld component and uses it within the App component.
Finally, open the index.js file and add the following code:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
This code sets up the React DOM and renders the App component to the #root element in
the HTML file. Start the development server by running the following command: npm start
This will start the development server and open the React app in your default web browser.
You should see the “Hello World” message displayed on the screen.
—-------------------------------------------------------------------------------------------------------------
8. Construct a react component and apply different styles of styling to the react content
import React from 'react';
import './App.css';
import './AppInline.css';
import './AppJSS.css';
function App() {
return (
<div>
<h1 className="App">React Component with different styles</h1>
<p>Inline Styles:</p>
<p style={{ backgroundColor: 'lightblue', fontSize: '24px' }}>This text is styled with inline
styles</p>
<p>CSS Styles:</p>
<p className="App-styles">This text is styled with CSS styles</p>
<p>JSS Styles:</p>
<p className="App-jss">This text is styled with JSS styles</p>
</div>
);
}
export default App;
App.css (CSS Styles)
.App-styles {
color: green;
font-size: 36px;
}
AppInline.css (Inline Styles)
.App {
background-color: lightgray;
padding: 20px;
}
AppJSS.js (JSS Styles)
import { createUseStyles } from 'jss';
import { jss } from 'jss';
const useStyles = createUseStyles({
AppJSS: {
color: 'red',
fontSize: '30px',
},
});
function App() {
const classes = useStyles();
return (
<div className={classes.AppJSS}>This text is styled with JSS styles</div>
);
}
In this example, we have a React component that displays three paragraphs of text. Each
paragraph is styled differently using three different methods:
Inline Styles: We use the style attribute to apply styles directly to the paragraph element.
CSS Styles: We use a CSS class to apply styles to the paragraph element.
JSS Styles: We use the JSS library to create a styled component and apply styles to the
paragraph element.
—-------------------------------------------------------------------------------------------------------------
9. Identify the process of creating a single page application using react router and its
parameters with an example
React Router - javatpoint
—-------------------------------------------------------------------------------------------------------------
10. Differentiate controlled and uncontrolled forms with suitable code snippets
What are controlled and uncontrolled components in React? (codedamn.com)
—-------------------------------------------------------------------------------------------------------------
11. Apply validation techniques for a simple react redux form
Redux Form Validation Tutorial (codingame.com)
—-------------------------------------------------------------------------------------------------------------
12. Develop a react application for implementing simple counter operations using redux
action and combining reducers
To start, you need to install the necessary dependencies. Run the following command in
your terminal: npm install react-redux react. Create a new React application using the
following code:
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import CounterReducer from './reducers/counterReducer';
import App from './App';
const store = createStore(CounterReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
Next, create the CounterReducer.js file:
const initialState = {
count: 0
};
const CounterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};
export default CounterReducer;
Create the actions.js file:
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export function increment() {
return { type: INCREMENT };
}
export function decrement() {
return { type: DECREMENT };
}
Create the App.js file:
import React, { useState, useDispatch } from 'react';
import { increment, decrement } from './actions';
import { useSelector } from 'react-redux';
const Counter = () => {
const dispatch = useDispatch();
const count = useSelector((state) => state.count);
const handleIncrement = () => {
dispatch(increment());
};
const handleDecrement = () => {
dispatch(decrement());
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleIncrement}>+</button>
<button onClick={handleDecrement}>-</button>
</div>
);
};
export default Counter;
Wrap the app with the Provider component from react-redux to connect it to the store:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
—-------------------------------------------------------------------------------------------------------------
