Technical Tips And Tricks: ReactJS

ReactJS Important links:
https://github.com/facebook/react
https://en.wikipedia.org/wiki/React_(JavaScript_library)
https://facebook.github.io/react/docs/react-component.html

What is ReactJS?
React is an open source JavaScript front end UI library developed by Facebook for creating interactive, stateful and reusable UI components for web and mobile app. It is used by Facebook, Instagram and many more web apps. ReactJS is used for handling view layer for web and mobile applications. One of React’s unique major points is that it perform not only on the client side, but also can be rendered on server side, and they can work together inter-operably.

ReactJS Advantages:

React uses virtual DOM which is JavaScript object. This improves application performance as JavaScript virtual DOM is faster than the regular DOM.

-React can be used on client and as well as server side too.
-Using React increases readability and makes maintainability easier. Component, Data patterns improves readability and thus makes it easier for manitaing larger apps.
-React can be used with any other framework (Backbone.js, Angular.js) as it is only a view layer.
-React’s JSX makes it easier to read the code of our component. It’s really very easy to see the layout. How components are interacting, plugged and combined with each other in app.

ReactJS Limitations:

- React is only for view layer of the app so we still need the help of other technologies to get a complete tooling set for development.
-React is using inline templating and JSX. This can seem awkward to some developers.

<!DOCTYPE html>

<head><title>React Example</title></head>

<body>

var helloworld = React.createClass({

render: function() {

return ( <p>Hello, World</p> )

}

});

ReactDOM.render( <helloworld/>, document.getElementById('hello-world'));

</script>

</body>

</html>

ReactJS Interview question and answeres:

Question: What is ReactJS?
React is front end library developed by Facebook.

Question: Why ReactJS is used?
React is used to handle the view part of Mobile application and Web application.

Question: Does ReactJS use HTML?
No, It uses JSX which is simiar to HTM.

Question: When ReactJS released?
March 2013

Question: What is current stable version of ReactJS?
Version: 15.5
Release on: April 7, 2017

Question: What are the life Cycle of ReactJS?
Initialization
State/Property Updates
Destruction

Question: What are the feature of ReactJS?
JSX: JSX is JavaScript syntax extension.
Components : React is all about components.
One direction flow: React implements one way data flow which makes it easy to reason about your app

Question: What are the Advantages of ReactJS?
React uses virtual DOM which is JavaScript object. This will improve apps performance
It can be used on client and server side
Component and Data patterns improve readability.
Can be used with other framework also.

Question: How to embed two components in One component?
import React from 'react';
class App extends React.Component {
render() {
return (
           <div>
         <Header/>
         <Content/>
         </div>
    );
}
}
class Header extends React.Component {
render() {
return (
      <div>
      <h1>Header</h1>
      </div>
     );
   }
}
class Content extends React.Component {
render() {
return (
        <div>
        <h2>Content</h2>
        <p>The content text!!!</p>
        </div>
      );
    }
}
export default App;

What is ReactJS?
What are the advantages/benefits and limitations of React?
What two things do you need to pull in on the main index.html file? ReactJS
What is the difference between ReactJS and AngularJS?
Is it true or false that ReactJS is an MVC based framework?
What do you understand by JSX? Explain it.
Write small code that will render a JSX expression?
Can Browsers read JSX? If not, Why?
Can you nest JSX elements inside of other JSX elements?
If a JSX expression takes up more than one line, what should you do?
A JSX expression must have exactly how many outermost elements?
In JSX why you can't use "class" word?
Under what circumstances would you choose ReactJS over AngularJS (etc)?
Explain what is Prop?
Explain Virtual DOM?
How Virtual DOM Works?
What is virtual DOM diffing?
What's a difference between a DOM object and a virtual DOM object?
What is the module loader of choice for React developers?
Why do we capitalize components?
What is a state? How to use state?
How you will update a Component's state?
Explain the concept of ownership in ReactJS?
How to assign form values to properties on the component object?
What is one of the core types in React?
What is the primary type in React? It's a light, stateless, immutable, virtual rep of a DOM element?
How can you set state initially (within the constructor() method)?
How can you access something inside state?
What are Synthetic events?
Explain what happens with React's "virtual DOM" whenever render fires, and why it's so great.
What are props? How to pass and read them?
What is the one method you need to know with state?
What do you understand by Controlled vs. Uncontrolled Component?
What are Lifecycle methods?
Within a component, how can you access props that have been injected from a parent component?
How could you use state and props together when passing data between components?
ReactJS scenario Based Interview Questions
When dealing with events in Javascript, how do you grab the value?
How event handling works in React?
What is the event listener (also property name) in the following code?
What is a Flux action?
What does "handling state" mean? What exactly are we trying to handle?
What are the two main problems with traditional MVC frameworks (like Backbone or Angular, for example)?
Describe what happens whenever state changes (in users, posts, UI state, etc) in a React app.
Describe the difference between imperative code (Backbone/Angular) and declarative code (React).
How does a prop relate to state?
What is redux?
How does the React Router work?
How can you access the currently selected React component in the console?
ReactJS Real time Interview Questions
What do we call to change the rendered output?
What is JSX and how is it used in React?
What is polling?
What is refs in ReactJS? When might you use refs?
What is the short way to display props on a parent component?
How to add a Router?
Name a React.createClass() object that returns HTML or Component.
Once you have a store set up (with actions, actionCreators and reducers), how do you make sure your app knows about the store? ReactJS Real time Interview Questions
How to pass props from a parent component to a child component?
Difference between props and state?
How child components communicate with parent components?
What's a compact way to write conditional statements in ReactJS? Give example?
What part of the MVC is React.js most concerned with?

Technical Tips And Tricks

Pages

Search This Blog

Saturday 10 June 2017

ReactJS

9 comments:

Jenkins Startup and Configuration