The fundamental concepts of React.js, scrambled in this one-time article.
If you want to learn the basics of React in the time it takes you to drink a cup of coffee, this post is for you.
This article aims to provide a beginner-friendly introduction to React, what it is, and why we need it and how to use it. It assumes you have some understanding of?basic JavaScript.
We will also discuss some code, but the overall goal is to gain an intuitive understanding of what React is all about so that you get comfortable with the basics.
What is React?
React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. It breaks down complex UIs into small, isolated code called “components”.?
Components are independent and reusable. They can either be JavaScript functions or classes.
Here’s an example of a function component that renders a?<p>?element onto the page:
function Print() {
return <p>Hi, my name is Pooja!</p>;
}
And here is a class component doing the same rendering:
class Print extends React.Component {
render() {
return <p>Hi again, my name is Pooja! !</p>;
}
}
function component is mostly plain JavaScript, whereas class components provide certain critical functionalities that function components lack, for now we are going ahead with class components.
you may have noticed the stranger mix of JavaScript and HTML in each component that's called JSX?which stands for JavaScript XML. React Uses JSX?to easily write HTML and JavaScript together but browser does not understand this JSX because it's not valid JavaScript code.
So to convert it to browser understandable JavaScript code, we use a tool like Babel which is a JavaScript compiler/transpiler.
Basic React Concepts
We have already discussed how React uses components to break down complex UIs and JSX to render those components.
In this section we will talk about some more fundamental concepts of React.
State
As mentioned previously, React updates the UI based on the application state. This state is actually stored as a property of a React class component:
class HandleClick extends React.Component {
state = {
value: 0
};
handleIncrement= () => {
this.setState(state => {
value: state.value + 1
});
};
handleDecrement= () => {
this.setState(state => {
value: state.value - 1
});
};
render() {
return (
<div>
<h2>{this.state.value}</h2>
<button onClick={this.handleDecrement}>Decrement</button>
<button onClick={this.handleIncrement}>Increment</button>
</div>
);
}
};
We updated the state by calling?setState?in each of the functions handling a button click. The counter displayed on the page will update in real time. Thus, React gets its name because it?reacts?to state changes.
In short, React automatically monitors every component state for changes and updates the DOM appropriately.
wondering what's setState method do?
setState()?enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.
Props
We can use props (short for "properties") to allow components to talk to each other.
领英推荐
Assume the HandleClick is The quantity of a product a consumer intends to purchase is represented by the click in our previous example. The store would like to set a limit of two products per customer. If a consumer tries to buy more than two items at the same time, we want to show an appropriate notification at checkout.
Here’s how we may do it with props:
const?Display?=?(props)?=>?{
??let?message;
??if?(props.number?>?2)?{
????message?=?"You’re?limited?to?purchasing?2?max!";
??}
??else?{
????message?=?"All’s?good.";
??}
??return?(<p>message</p>);
};
class?Timer?extends?React.Component?{
??state?=?{
????value:?0
??}
??render()?{
????return?(<Display?number={this.state.value}?/>);
??}
};
We create a functional component called?Display?and pass props as a parameter. When we render this component, we pass to it number as an attribute set to the value of the product a customer wants to purchase. This is similar to setting an attribute of an HTML tag. We call this value with?props.number?in?Display?to determine what message to return.
For now we are not getting into deep concepts like component lifecycles and others, till now we know what is react, what is its need? & simple basic syntax of React.
now we are directly diving into the code to get a kickstart, so we have two ways to use react.
1)Either we use React CDN in our script tags into our HTML pages.
2)second way of doing it as the authentic way by doing npx create-react-app (project_name)
although we can use CDN of react into html pages but in that case we will be needed further dependencies like babel to write code in JSX & webpack for bundling modules, which is quite cumbersome task, but the second way is much much convenient and it gives you lots of features and 0 configuration needed to kickstart your project.
when you write npx create-react-app my-app it will give you--
Probably you might be thinking what is this npx? is it a typo?
so telling you its not a typo it's a package runner tool that comes with npm 5.2+.
After running this command successfully you will see folder structure like this:
When your project is created successfully do "npm start" to see your first CRA in your browser.
although this article is not enough to get to know what react is but it gives you a initial idea to just dive into the code also don't forget to read React JS official docs for getting more information in depth.