Beginner guide for ReactJS
1.What is props in JSX?
Answer: Props is a special kind of keyword that actually stands for properties and used for doing a special task called passing data between components.
JSX props can be defined in several ways-
1.JavaScript Expressions2.String Literals3.Props Default to “True”4.Spread Attributes
2.Why need JSX?
Answer: We use JSX to write HTML elements in JavaScript without using any createElement() and appendChild() methods we can place them in the DOM. We can also use JSX to converts HTML tags into react elements. It is not essential to use JSX, we actually use JSX to write React applications in an easier way.
Instead of regular JavaScript React uses JSX for templating purposes. It is not necessary to use it, however, the following are some pros that come with it:
1.JSX works faster as it performs optimization during compiling code to JS.2.JSX is a type-safe and it caught most of the errors at the time of compilation.3.If someone has basic HTML ideas then he/she can easily write templates by using JSX.
3.Instance Properties.
Answer: Instant properties can be defined with props and state. Let’s explore props and states.
Props: this.props includes props keyword that were actually defined by the caller of this component. More specifically, this.props.children is a special type of props that is defined by the child tags in the JSX expression rather than in the tag itself.
State: The state includes data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.
If some value isn’t used for rendering or data flow, we don’t have to put it in the state. Such values can be defined as fields on the component instance.
Never mutate this.state directly, as calling setState() afterward may replace the mutation we made. Treat this.state as if it were immutable.
4.Error Handling Methods.
Answer: React supports mainly two types of error handling methods in React. These methods are used in the error boundary mechanism.
1.static getDerivedStateFromError(error): This is a method that is useful for rendering a fallback UI after an error is thrown.2.componentDidCatch(error, info): This is a useful method for logging the error information for debugging purposes.
5.What is the lifecycle method in React?
Answer: Lifecycle methods in Reacts are the series of events that happen during the entire life of a react component from birth to its death. There must have a lifecycle of events for every React component. We can Assume them as a series of cycles of birth, growth, and death. Lifecycle methods execute in the initial rendering or re-rendering phase.
Example:
componentDidMount(), shouldComponentUpdate(), componentDidUpdate() etc.
6.Why is unit testing needed?
Answer: Unit testing is a method of testing that is used to verify if the code works correctly or not. It is a great way to perform regression testing: It is a process to run them simply and change something by ensuring nothing breaks. Spotted a bug? Fix it and write a unit test in such a way that the bug doesn’t happen next time.
For identification of essential parts of code, write unit tests to make sure the code works correctly.
7.What is Browserify?
Answer: Browserify in react is a mechanism used to select JS modules for the browser. Browserify is used to arrange code and handle third-party libraries. Frequently, publishing modules to npm which are designed to work in both node and in the browser using browserify and many packages on npm are proposed for use in just the browser. npm is for all javascript.
8.What is Babel?
Answer: BabelJS is a JavaScript transpiler that transpires new features into the old standard. With this, the features can be run on both old and new browsers, hassle-free. Babel can do —
1.Transform Syntax.2.Polyfill Features that are missing in your target environment.3.Source code transformations.
9.Optimizing Performance
Answer: Inside React operation, it uses several tricky techniques which leads to minimizing the number of costly DOM operations required to update the UI. Many applications use React for the fastest UI without doing much work to specifically optimize for performance. Nevertheless, react application can be made faster in several ways.
Use the Production Build
If you’re benchmarking or experiencing performance problems in your React apps, make sure you’re testing with the minified production build.
By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app.
10.Why Not Use try / catch?
try / catch is great but it only works for imperative code:
try {
showButton();
} catch (error) {
// …
}However, react components are declarative and specify what should be rendered:
<Button />
Error boundaries preserve the declarative nature of React and behave as you would expect.
For example, even if an error occurs in a componentDidUpdate method caused by a setState somewhere deep in the tree, it will still correctly propagate to the closest error boundary.
