Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
React · Question Set
React Project Setup & Architecture interview questions for placements and exams.
Questions
14
Included in this set
Subject
React
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for React.
Group code by feature: `components/`, `pages/`, `hooks/`, `context/`, `services/`, and `assets/`. Keep reusable components separate and avoid deep nesting. Use index.js barrels for cleaner imports.
For complete preparation, combine this set with full subject-wise practice for React. You can also explore other subjects and sets from the links below.
You can create a new React project using Create React App or Vite. For CRA, run `npx create-react-app my-app`, then `cd my-app` and `npm start`. For Vite, run `npm create vite@latest my-app -- --template react`, install dependencies, and start with `npm run dev`. Both provide an optimized development setup with hot reload and bundling.
npx create-react-app my-app # or npm create vite@latest my-app -- --template react
A typical React app contains `src` for code, `public` for static assets, `package.json` for dependencies, `node_modules` for installed packages, and configuration files like `.gitignore` and `README.md`. Inside `src`, you’ll find `index.js` and `App.js` as entry points.
package.json lists your app’s metadata, scripts, and dependencies. It tells npm which libraries to install and how to run build or start commands. Dependencies are runtime libraries; devDependencies are for development tools like ESLint or Webpack.
JSX isn’t understood by browsers directly. The build tool (Babel) transpiles JSX into `React.createElement()` calls that produce virtual DOM objects. This keeps code readable while still working with standard JavaScript.
<div>Hello</div> ➜ React.createElement('div', null, 'Hello')Keep the input value in state and filter a list based on it. Controlled inputs keep the displayed value in sync with React state, enabling instant updates and validation.
const [search,setSearch]=useState('');
const filtered=data.filter(i=>i.name.includes(search));A custom hook like `useForm` can manage form state and validation logic. It tracks values, errors, and touched fields. You can combine it with Yup for schema-based validation.
You can build a custom hook that syncs state with localStorage. Whenever state changes, save it to storage and initialize from storage on load.
function useLocal(key,init){
const [val,setVal]=useState(()=>JSON.parse(localStorage.getItem(key))||init);
useEffect(()=>localStorage.setItem(key,JSON.stringify(val)),[val]);
return [val,setVal];
}Call the API inside useEffect after the first render, update state with results, and handle errors gracefully. Axios simplifies HTTP requests and error handling.
useEffect(()=>{axios.get('/api').then(r=>setData(r.data)).catch(e=>setError(e));},[]);Use three pieces of state: data, loading, and error. Set loading true before fetch, update data on success, and show fallback UI on error.
if(loading)return <p>Loading...</p>;
if(error)return <p>Error!</p>;
return <DataList data={data}/>;Map over an array and render a child component for each item. Provide a unique key prop to help React track changes efficiently.
{users.map(u=><UserCard key={u.id} user={u}/>)}ReactDOM.render() (or createRoot in v18) mounts your root component into the DOM at the specified element ID.
`index.js` is the main entry that renders the root component into the DOM using `ReactDOM.createRoot`. `App.js` is the top-level component where you compose routes and layout.
ReactDOM.createRoot(document.getElementById('root')).render(<App />);useState manages component state; useEffect runs side effects after render. For example, updating the document title when count changes.
function Counter(){
const [count,setCount]=useState(0);
useEffect(()=>{document.title=`Count ${count}`;},[count]);
return <button onClick={()=>setCount(count+1)}>Add</button>;
}