Summery:
As I recently completed learning React JS and initially I had a lots of questions like what , why and how n all then I started it from Why ? why we need to use React ? and the here is the answer , we can use it on vast variety of platform to build a quality UI. Its library approach allowed react to evolve into such a remarkable tool.
Initially I just started with a reading documentation part then I took a scrimba course for reference then I learnt most of the topics of React from that course just like Introduction, why use React, ReactDOM, Functional component, class component, JSX, Props, Props in constructor, State, some part of conditional render, lifecycle etc with the hands-on experience. while learning this sometimes found difficulties but with the help of team members and other reference I completed learning and also apart from just theory or documentation part I tried to build some real life application just like Sign Up page and To Do App.
While learning I didn’t learn only React JS I learnt a other lots of thing when I got some difficulties then I searched a lots of thing tried to solve lots of problem and learn a lot, I learned time management also
React JS:
Intro:It’s an efficient and flexible JavaScript library for building user interfaces. It is an open source and component based library which is used only for view layer of application. React is popular as a front-end web development tool.
There are more topics which includes in React JS learning process React pros, and Cons, React JSX, React components, React Forms, React State, React Hooks, React Lifecycle, React Hooks etc.
The main objective of React JS is to building a user interface that improves the performance of app. The two main features make React more than a library JSX and Virtual DOM (Document Object Model).
What is React Components and Props?
In React we can define component as function and class. To define class Component we have to extend React.Component .you must define only one method in React.Component called render().
class Demo extend React.Component {
render(){
return<h1>This is my first blog</h1>;
}
}
Pass Props to the class component
class Parent extends React.component{
render(){
return(
<child example = “REACT”/>
)
}
}
class Child extends React.component{
render(){
return(
<div>
<h1>{this.props.example}</h1>
</div>
)
}
}
To define functional component lets take same example as above but created using functional component
function Demo(){
return<h1>This is my first blog</h1>;
}
Pass Props to functional component
In React we can pass props or properties into child components so we can create a App component that can render a welcome
function welcome (props) {
return ()
<h1>Hello, {props.name}</h1>;
} function App () {
return()
<div>
<h1>Welcome name = “Megha”</h1>
</div>
);
}
ReactDOM.render(
</App>
document.getElementById(‘root’)
);
Introducing JSX
JSX is a JavaScript extension syntax used in React. we use JSX to write HTML and JavaScript code together.
class Demo extends React.Component{
render(){
return
<h1>This is my first blog</h1>;
}
} ReactDOM.render (<Demo/>, document.getElementById(‘root’));
Introducing state
The state object is where you store the property values that belongs to the component. State object can initialize in the constructor method. We can refer state object anywhere in the component using this.state.property_name.
class Demo extends React.component{
constructor(props){
super(props);
this.state = {
name :“Megha”
};
}
render(){
return(
<div>
<h1>My name is {this.state.name}</h1>
</div>
);
}
}
Reasons to use React:
I have recently completed learning about React .As far as I understand why we use React or the things which I like about the React those are
React is simple and easy to learn its important as a learning perspective because if a technology is hard to learn we will probably find difficult to start
React JS works in a component based structure in React we can start with small component like text button and combine them into large and each component has its logic and behave differently
Virtual DOM(Document Object Model) is a programming concept in that an ideal or virtual representation of UI is kept in memory and synced with the real DOM by a library such as React DOM. Rendering the virtual DOM is actually faster than rendering the UI in the actual browser Dom.
JSX(JavaScript XML) allows us to write HTML elements in JavaScript and place them into DOM without any createElement().JSX makes it easier for us to write React application
Things which I don’t like in React:
Just like React have a some reasons to use there are some reasons not to use or I don’t like, those are
Its Slow sometimes page load speeds are reduced this happens because javascript functions are running in the browser to lead the content from the server and render it through react functions
Application using React
1.Online Code Editor Product Architecture based on tools used:
• Creating the structural aspect of code editor using HTML, CSS
• Implementation of front features using React
2.Social Media App
3.To Do App
4.Productivity App
Top comments (0)