sudheerj / reactjs-interview-questions Goto Github PK
View Code? Open in Web Editor NEWList of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!
List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!
'm using node and I tried to create a simple react-app by using the following commands:
npm install -g create-react-app
create-react-app project-name
npm start
I had no issues in creating an app and my app got created successfully.
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd appname
npm start
Happy hacking!_**
But when I tried to run my start script I'm facing an error
events.js:292
throw er; // Unhandled 'error' event
^
Error: spawn cmd ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:267:19)
at onErrorNT (internal/child_process.js:469:16)
at processTicksAndRejections (internal/process/task_queues.js:84:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:273:12)
at onErrorNT (internal/child_process.js:469:16)
at processTicksAndRejections (internal/process/task_queues.js:84:21) {
errno: 'ENOENT',
code: 'ENOENT',
syscall: 'spawn cmd',
path: 'cmd',
spawnargs: [ '/s', '/c', 'start', '""', '/b', '"http://localhost:3000/"' ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ADMIN\AppData\Roaming\npm-cache_logs\2020-07-01T09_26_11_748Z-debug.log
E:\myreactapp\reactawesome>
please help me on this error..how to solve.
react
- What are the exceptions on React component naming?
- Are custom DOM attributes supported in React v16?
First one isn't in a table of contents
This is a great list. Not only for interviews but also for just getting up to speed with React, so thank you. If I can piggyback on #22, here are some suggestions I thought about while browsing the list:
autofocus
?Hello! Is there are any plans for it? I think I can contribute to Russian version.
Return promise
in useEffect
is forbidden. The right way should be
useEffect(() => {
(async () => {
const result = await axios(
'http://hn.algolia.com/api/v1/search?query=react',
);
setData(result.data);
})()
}, []);
is there a way to generate automatically questions with answers to anki / quizlet flashcards app ? Could be useful for devs who want to learn based on spaced repetition.
Some links in table of contents are broken. (233, 249, 267, 306 )
Fix the typo in question 244. Convert demonistration->demonstration in the 4th line of the answer statement.
The answer written here is wrong. I think it is taken from this stack overflow link https://stackoverflow.com/questions/40199151/cant-set-state-in-componentwillmount. There reason behind setState not working was some parsing error. I think the answer for it need to be updated. I have tested it with the below code and it working properly with componentWillMount.
import React, { Component } from 'react';
import { Text } from 'react-native';
class Cat extends Component {
constructor(props) {
super(props)
this.state = {
name: 'Anand'
};
}
componentWillMount() {
setTimeout(()=> {
this.setState({name:'anand Kumar jha will'})
}, 3000)
}
componentDidMount() {
setTimeout(()=> {
this.setState({name:'anand Kumar jha did'})
}, 1000)
}
render() {
return (
Hello, I am your cat! {this.state.name}
);
}
}
export default Cat;
How to pass a parameter to an event handler or callback?
There is another way I think you need to add this as well, It is quite simple and easy to understand.
methodName = (parameter) => () => {
//Do something with parameter.
console.log("parameter", parameter)
};
<button onClick={this.methodName('value you want to pass')} >Click</button>
getDerivedStateFromProps
static method is now called on every re-render including any changes in the internal state.
Please Guide..
JSX elements will be transpiled to React.createElement() functions to create React elements which are going to be used for the object representation of UI. Whereas cloneElement is used to clone an element and pass it new props.
We have the following 2 issues:
User
function component isn't accepting any props.this.props.<prop_name>
.Prop Drilling is the process by which you pass data from one part of the React Component tree to another by going through other parts that do not need the data but only help in passing it around.
How to solve it? Using state management tools such as Redux
Hello @sudheerj , thank you for this wonderful collection of questions! Here are some of my comments to improve the document:
class Component extends React.Component {
....
}
Component.propTypes = {...}
Component.someMethod = function(){....}
Hooks are a new feature proposal that lets you...
Hooks are no more a proposal
Hi @sudheerj
in Q11, u wrote
Note: The only place you can directly assign to the state object is in constructor.
but u can remove the constructor from the component and access the state object
class Hello extends Component {
state= {
a:"hello",
b:" react"
}
render(){
const {a,b} = this.state;
return(
<div>{a + b}</div>
)
}
}
Problem: State mutation
happens when you try to update the state of a component without actually using setState
function.
This can happen when you are trying to do some computations using a state variable and unknowingly save the result in the same state variable.
This is the main reason why it is advised to return new instances of state variables from the reducers by using Object.assign({}, ...) or spread syntax.
This can cause unknown issues in the UI as the value of the state variable got updated without telling React to check what all components were being affected from this update and it can cause UI bugs.
Ex:
class A extends React.component {
constructor(props) {
super(props);
this.state = {
loading: false
}
}
componentDidMount() {
let { loading } = this.state;
loading = (() => true)(); // Trying to perform an operation and directly saving in a state variable
}
....
Resolution: Make sure your state variables are immutable by either enforcing immutability by using plugins like Immutable.js, always using setState
to make updates and returning new instances in reducers when sending updated state values.
replace 500 with 300
Hello @sudheerj
Thank you for awesome project. I just wanna ask you for licence for using your questions in my pet project. What do you think about add Licences to all your question repos?
These questions are great, and I'm translating them into Chinese
https://www.yuque.com/3crazyone_/chaos/react-500-questions
I hope this repo can help more people learn React
Link in table of contents is broken (325)
as stated in the title, the comparison of react to angular and vuejs is fairly opinionated and serves no real benefit for interviews. at most, these notes will confuse interviewees.
devs should base the answer to these two questions on their experience, not heresy or find themselves in trouble explaining further.
I'd recommend removing these two questions.
Can I fork and translate the ask/questions to portuguese? XD
It seems like 44, 87, 118 are duplicating.
I think I have already saw questions that are also duplicating.
Probably it is better to separate categories to subcategories to avoid that?
As of today, I believe that we can use Function Component for almost every use case, except when implementing Error Boundaries. Could you please share your opinion about this?
I want to translate a Chinese version,Whether the request can then merge into PR。
event name should be in lowercase
statement is not correct.
HTML attribute names are not case-sensitive, so ONCLICK works as well as onClick and onCLICK… But usually, attributes are conventionally lowercased: onclick.
I am the blogger of juejin(A community that helps developers grow).
I want a translation authorization.
For example, question related to React lifecycle: 33, 34, 74 - 78.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.