What is React?
React is a javaScript library created by Facebook in 2013, React makes it painless to create interactive UIs. And the important thought of React is componentization .
-
Componentization
React build encapsulated components that manage their own state, then compose them to make complex UIs.
And also, If we want to change the data in one component, React provides us some ways to change the data easily, I will show u some demo later.
Why use React?
-
One-way Data Flow
As we seen before, every component has its own state, But How can they interact with each other? So The only way that it can get the data from other component is by its father component.
In react, The data flow is a top-down one-way from parent to child node，So component is very easy to be controlled, They only need to get data from its parent and render the data. If its parent component's data changed, React will traverses(遍历) all the components and rerender the component that using this data.
-
Fast Render With Virtual DOM
When some data change , and the page need to be updated , React will operate the virtual DOM not real DOM to update page(What is DOM, and What is virtual DOM, Because of the time, I'm not going to talk about it, but if you're interested in it, you can go down and learn about the relevant(相关的) information by yourself) , the result is that React will efficiently update and render just the right components when your data changes but not the whole page, and by this way , it will speed up the page rendering. So using react will refresh the partial(局部的)page not refresh the whole page.
-
Reusable Components
Sometimes in our website, We need to write some of the same ui in different place, So we need to write the same code in our project, But if we use React, We can wrapper these code to a component, Then when we need this ui in some place, we only need to compose this component to the original component. Reusing component is very good to maintain and extend your project.
How to use React?
-
JSX Grammar
JSX is a combination of JavaScript and XML(the difference between xml and html u can learn after session)，it allow us to write the html code into javascript. So we don't need to write like <script></script> in our code when we want to write some javascript. For example:
const nav = (
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
);
This is a javaScript variable, but the value of this variable is a unordered(无序) list(ul).
render() {
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
return <div>
{numbers.map((number) => {
return <span key={number}>
{number}
</span>;
})}
</div>;
}
This is a javascript function, but in this function, the return value is a html element <div> and in this div, we also use javascript function numbers.map().
So, As we can seen in this two examples，using jsx can help us easily write javascript and html anywhere if we want.
For now , I want to show you a very easy demo hello-world.demo
State
As we have mentioned above, every component has its own data and can manage its data, but how can each component manage its own data?
state is one of the most important concept for React, it is an attribute of component，its type is a javascript object. state is only used for manage its internal data， for example State-demo
From this demo, we can see that component use this.state to manage its data.
let us see another demo SetState-demo
from this demo, we can see that React use this.setState() to change its original data. After we use this.setState() to change the data,React will call render() method automatically, And rerender component.
Props
As we have mentioned above, Because One-way Data Flow, If one component wants to get data from other component, how can component get data from other component?
props is also one of the most important concept of React, it is also an attribute of component, props is used to get external data from other component, let us some demos:
the first demo: Get-father-date-demo
from this demo, we can see that we use this.props() to get the data from father component. when father component's data change, child's data also changed automatically.
let's see another demo: Get-other-component-demo
From this demo, we can see that we can also use props to get the data from another component.
This is all the contents that I want to share with you , By using this these knowledge, I think u can write some easy demo with React, But if you want to write a little difficult project with React， u need to learn more about React,
for example, Lifecircle of component, Stateless component，HOC and so on
