Fundamental React.js all concepts
React is a javascript library, not a framework.
React as a javascript library: React is not a framework it’s a library. for any work with react, we need many other libraries. when we work with a framework it’s very easy because there are a lot of designs ready for you. the framework also has a lot of disadvantages. when a senior developer works with the framework it tribble them. frameworks are so large and full of features. React is a small library and it follows Unix philosophy. React actually build that what we tell. without react UI design is not so easy. When react release everyone is very excited about it because it introduce itself smart idea of a virtual dom. Document object model is called DOM.
ReactDOM.render: it is an entry point of react application into a browser DOM. two arguments are
- First argument is Render to the browser is always a React element.
- Second argument is where it render in the browser DOM.
Rendering Siblings Components: Now we have to render two elements to rander.
The first is that we can put as many elements as we want inside an array. Ex:ReactDOM.render([<Cart />, <Customer />, < Order />])
The second is to put the react elements in another react element. Ex: ReactDom.render(
<div>
<Cart />
< Customer />
</div>);
The third is to put them in a new DOM parent node, like React.Fragment. Ex : ReactDOM.render(
<React.Fragment>
<Cart />
<Customer />
</React.Fragment>
);
Default Props: In Default Props If you do any style, you will get the default style if you do not give any style while sending the props. Ex:
class Article extends React.Component{
}
Article.defaultProps ={
Background:’yellow’}
Prop-Types: With props, a component receive data from outside this data may also come from an external API. React moved props types from another different package so we need to download it first and install it. Ex: name is string, age is number etc.
JSX: Although React Plain can be written with JavaScript, it also uses JSX
State: So far we have talked about the static react but the state is very important to make the react component dynamic. Will try to keep the state small all the time