编程知识 cdmana.com

If you're still having a headache with front-end layout and JS, you should take a look at this serial article

This is how novices get started React, I think you should start learning from the following points , Today I want to share with you the first issue , Follow up will continue to update and share the actual combat .

One , understand React
  1. declarative (React Make creation interactive UI Make it easy . Design a simple view for each state of your application , When data changes React Can effectively update and render components correctly . Written in a declarative way UI, Make your code more reliable , And easy to debug )

2. Componentization ( Create components with their own states , And then these components make up a more complex UI. Component logic uses JavaScript Write not a template , So you can easily transfer data in the application and make the state and DOM Separate .

3. Efficient (React Through the and DOM The simulation , Minimize and DOM Interaction )

4.JSX(javascript The extended language of , It is suggested that React Used in development JSX)

5. flexible (React It can work perfectly with known libraries or frameworks )

6. One-way response data flow (React A one-way response data flow is implemented , This reduces duplication of code , That's why it's simpler than traditional data binding )

Whatever technology stack you're using right now , You can always bring in React To develop new features , Without having to rewrite the existing code .React You can also use Node Server rendering , Or use React Native Develop native mobile applications .

 If you're still in front of the layout and JS Have a headache , You should look at this serial article


Two , first React example

The page is as follows
<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>Hello React!</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script><script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script></head><body> <div id="example"></div><script type="text/babel">ReactDOM.render(    <h1>Hello, world!</h1>,    document.getElementById('example'));</script> </body></html>

explain :

html Three libraries are introduced into the page of ,
  1. react.min.js(React The core of the library )
  2. react-dom.min.js( Provide with DOM Related functions
  3. babel.min.js (ES6 Code conversion to ES5 Code , And support JSX)

3、 ... and ,React Element operation of

The elements are in React The smallest unit in an application , The main function is to describe the output on the screen .
  const = element = <h1>n Hello ,hello world</h1> 

But we're introducing React The operation is as follows ,
   <div id="example"></div> 

Define a heel node ,div All content of will belong to example Of React DOM To manage , We also call this “ root ”DOM node .

The next step is to React The elements of , const Render to DOM In nodes , The method is as follows :
const element = <h1>Hello, world!</h1>;ReactDOM.render(    element,#  Elements     document.getElementById('example') #  node );

explain : The method used is :ReactDOM.render(), Two important points of this method are Elements and nodes .

This is when we have a problem , We need to show multiple elements in the same node. What should we do ?

Actually in React The characteristics of , The elements are immutable , But we can achieve what we need to achieve by updating , For example, recreate an element and render to the same node , So the content of the element is updated .
  const element = (    <div>      <h1>Hello, world!</h1>      <h2> I'm a front-end engineer A.</h2>    </div>  );  ReactDOM.render(    element,    document.getElementById('example')  );}

 If you're still in front of the layout and JS Have a headache , You should look at this serial article


a verbal statement without any proof , We can sum up with a practical example React The first chapter of learning
<!DoCTYPE html><html><head><meta charset="UTF-8" /><title>Hello React!</title><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script><script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script></head><body><div id="example"></div><script type="text/babel">function tick() {  const element = (    <div>      <h1>Hello, world!</h1>      <h2> Now it is  {new Date().toLocaleTimeString()}.</h2>    </div>  );  ReactDOM.render(    element,    document.getElementById('example')  );}setInterval(tick, 1000);</script></body></html></html>

What about? ? Does it feel React It's simple , Of course, through a simple hello world I really can't see anything , But we can clearly feel React Pay more attention to js Compiling , All can be used js You don't have to go to “ trouble ”html, efficient DOM It's the best example .

In the next article, we'll explain React JSX(javascript Extended grammar of English )

 If you're still in front of the layout and JS Have a headache , You should look at this serial article

版权声明
本文为[cool breeze]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225071625944U.html

Scroll to Top