首页 > 代码库 > React入门

React入门

2024-09-20 16:19:34   220人阅读

http://www.ruanyifeng.com/blog/2015/03/react.html

 
ReactDOM.render 是React的最基本的方法，用于将模板转为HTML语言，并插入制定的DOM节点中。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <scriptsrc="../build/react.js"></script>
  5. <scriptsrc="../build/react-dom.js"></script>
  6. <scriptsrc="../build/browser.min.js"></script>
  7. </head>
  8. <body>
  9. <divid="example"></div>
  10. <scripttype="text/babel"><!--React独有的JSX语法，需要的type 为text/babel 凡是使用JSX语法的 type都是这个-->
  11. ReactDOM.render(
  12. <h1>Hello, world!</h1>,
  13. document.getElementById(‘example‘)
  14. );
  15. </script>
  16. </body>
  17. </html>
 
JSX语法，html语言直接写在 javascript代码中， 不加任何引号，支持html和js的混写，
遇到html标签（以   <  开头），就以html解析，遇到代码块 （以 {  开头 ） 则以JavaScript 规格解析；
  1. <script type="text/babel">
  2. var names =[‘Alice‘,‘Emily‘,‘Kate‘];
  4. ReactDOM.render(
  5. <div>
  6. {
  7. names.map(function(name){
  8. return<div>Hello,{name}!</div>
  9. })
  10. }
  11. </div>,
  12. document.getElementById(‘example‘)
  13. );
  14. </script>
 
JSX语法允许直接在模板插入 javascript变量，如果这个变量是数组，则会展开这个数组的全部成员；
  1. <script type="text/babel">
  2. var arr =[
  3. <h1>Hello world!</h1>,
  4. <h2>React is awesome</h2>,
  5. ];
  6. ReactDOM.render(
  7. <div>{arr}</div>,
  8. document.getElementById(‘example‘)
  9. );
  10. </script>
 
 
 
组件 
React允许将代码封装成组件（component） ，然后像插入普通HTML标签一样，在网页中插入这个组件。
React.createClass 方法就是用来生成这个组件类的；
 
  1. <script type="text/babel">
  2. varHelloMessage=React.createClass({
  3. render:function(){
  4. return<h1>Hello{this.props.name}</h1>;
  5. }
  6. });
  8. ReactDOM.render(
  9. <HelloMessage name="John"/>,
  10. document.getElementById(‘example‘)
  11. );
  12. </script>
上面代码中，变量 HelloMessage 就是一个组件类， 模板插入 <HelloMessage />变回自动创建一个这样的实例，
所有组件类都有自己的render方法，用于输出组件；
组件的第一个字母必须大写，否则会报错，另外 组件类只能保安一个顶层标签（只能有一个顶层标签，然后包含很多子标签） ，否则也会报错。
 
组件的用法和原生HTML标签完全一致，可以任意的加入属性，比如 name属性，组件的属性可以在组件类的this.props 对象上获取， 但是  class 属性和for属性 在组件属性中，名称分别改为了  className  htmlFor  因为 class 和for是javascript 的保留字。
 
 
this.props.children 
this,props 对象的属性与组件一一对应 但是有一个例外 就是 this.props.children 属性，它表示组件的所有子节点 
  1. <script type="text/babel">
  2. varNotesList=React.createClass({
  3. render:function(){
  4. return(
  5. <ol>
  6. {
  7. React.Children.map(this.props.children,function(child){
  8. return<li>{child}</li>;
  9. })
  10. }
  11. </ol>
  12. );
  13. }
  14. });
  16. ReactDOM.render(
  17. <NotesList>
  18. <span>hello</span>
  19. <span>world</span>
  20. </NotesList>,
  21. document.getElementById(‘example‘)
  22. );
  23. </script>
this.props.children 的值有三种可能，如果当前组件没有子节点，他就是 undefind ，如果有一个子节点，数据类型是object 如果有多个子节点  那么它就是 array 。。。
 
React 提供了一个工具方法， React.Children 来处理 this.props.children 我们可以用 React.Children.map来遍历子节点 
不用担心 this.props.children 的数据类型了~
 
 

React入门


联系
我们