Scribd
Upload
20 views

React Texas

Uploaded by

nabeanrokaya123
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

React Texas

Uploaded by

nabeanrokaya123
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

React – App

Npm (Node Package Manager): vs Npx (Node Package Executor)

npm is the default package manager for it will first check if the package is installed
Node.js. It allows you to install, update, locally or globally. If not found, it will
and manage packages (libraries or temporarily download the package,
modules) from the npm registry. execute the command, and then remove
the package.

1. Introduction to React
React is a popular JavaScript library for building user interfaces. Developed by Facebook, it
allows developers to create reusable UI components, manage component state, and
improve the performance of applications.
2. Creating a React App
Open the terminal (Command Prompt or Git Bash on Windows).
Install the Create React App CLI tool globally:

• npx create-react-app ‘NAME’


• npm start
------------------------
Folder Structure
node_modules: This folder contains all the dependencies and packages installed using
npm or yarn.
public: This folder contains static files like index.html, favicon, and other static assets.
The index.html file is the main HTML file where the React app is rendered.
src: This folder contains the source code for the React application, including components,
styles, and other JavaScript files.
styles: This folder contains the CSS files for the application, such as App.css and
index.css.
index.js: This is the main entry point for the React application. It imports the root
component (usually App.js) and renders it into the index.html file.
.gitignore: This file specifies the files and folders that should be ignored by Git version
control.
package.json: This file contains metadata about the project, such as its name, version,
dependencies, and scripts.
-------------------
Useful Extensions:

------------------
Asset Images Config!

-------
Connected Files:
Index.html – App.js- Index.js
Figure 1: Index.html

1. Remove unnecessary files.


---

• Real Project Files


Setting up the path
1. Install react router dom
npm i react-router-dom

import {
BrowserRouter as Router,
Routes,
Route,
} from "react-router-dom";

function App() {
return (

<Router>
<Routes>
<Route path="/" element={<h1>Homepage</h1>} />
</Routes>
</Router>
);
}

export default App;

Separate Pages:
→ Rafce
Separate Components
Separate page rendering,

Separate Component rendering in page:


Navbar

Homepage carasoul:

.carousel{
width: 100%;
height: 50vh; /* Change the height to 50% of viewport height */
background: #000;
position: relative;
}

.carousel img {
object-fit: cover; /* Use object-fit to cover the image within the carousel */
width: 100%;
height: 50vh; /* Set the height of the image to 100% to fill the carousel */
}

Register page:

<h1 className='pt-4 px-4'>Create an Account!</h1>


<form className='w-25 align-items-center p-4'>
<label htmlFor="">Enter firstname</label>
<input onChange={handleFirstName} className='form-control mb-3' type="text"
placeholder='First Name' />
<label htmlFor="">Enter lastname</label>
<input onChange={handleLastName} className='form-control mb-3' type="text"
placeholder='Last Name' />

<label htmlFor="">Enter email</label>


<input onChange={handleEmail} className='form-control mb-3' type="email"
placeholder='Email' />

<label htmlFor="">Enter password</label>


<input onChange={handlePassword} className='form-control mb-3' type="password"
placeholder='Password' />

<button className='btn btn-primary w-100'>Create an Account!</button>

</form>
Variable to save local state:

On Changing in input box:


Assign on Change function.

on Click on button:
Fix the responsive
Register user:

Collecting data and sending to homepage


Try in UI
Login api test
1. REDUX SETUP
npm install @reduxjs/toolkit react-redux
https://redux-toolkit.js.org/tutorials/quick-start
Create Store

Create Slice
Slice is the piece of redux store.
userSlice.js
import in store.

2. Wrap index.js
Install redux extension:
UseEffect and Dispatch:

UseEffect is for triggering action, automatically


Dispatch is for triggering redux action to store fetched data to redux storage.
Get data from redux
Mapping the array:
Props:
Result:

1. Define the state


2. Make a function:

3. Pass data while clicking button:


Template for your modal:

import React from 'react';

const EditUserModal = () => {


return (
<div className="modal" style={{ display: 'block' }}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h1 className="modal-title fs-5">Edit
User</h1>
<button type="button" className="btn-close"
></button>
</div>
<div className="modal-body">

{/* Your Content */}

</div>
<div className="modal-footer">
<button type="button" className="btn btn-
secondary">Close</button>
<button type="button" className="btn btn-
primary">Save changes</button>
</div>
</div>
</div>
</div>
);
};
export default EditUserModal;

Receiving the props from Homepage

Using value in UI
Model will be shown on homepage:
Pass the required props.
For editing/updating:
1. Make a state
2. on Change function
3. Submit function

Assign to input:
Update user API:

Deleting:
When button is clicked, Pass the ID
Searching:
1. Create a UI

2. State for, search result and initial users


3. Searching with firstname
Showing result:
1. if user length is 0
2. Mapping the array
3. If no user, show ‘no user’
Search function

User Components:

Use it in homepage:
Sorting users in table:
1. Make a sort Config!,

2. Reversing the direction on each click,


Down arrow in firstname,
Change the mapping with sortedUsers
Loading Components:
npm I react-loading-skeleton

Changes in UI, when loading show skeleton loading


Time out, 2s

Result:

You might also like