آموزش کامپوننت ها در react و بررسی آن

کامپوننت ها : نمونه Stateless

محتوای فایل App.jsx:

import React from 'react';

class App extends React.Component {

   render() {

      return (

         <div>

            <Header/>

            <Content/>

         </div>

      );

   }

}

class Header extends React.Component {

   render() {

      return (

         <div>

            <h1>Header</h1>

         </div>

      );

   }

}

class Content extends React.Component {

   render() {

      return (

         <div>

            <h2>Content</h2>

            <p>The content text!!!</p>

         </div>

      );

   }

}

export default App;

محتوای فایل main.js:

به مثال زیر توجه کنید:

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

کامپوننت ها : نمونه Stateful

محتوای فایل App.jsx:

import React from 'react';

class App extends React.Component {

   constructor() {

      super();

      this.state = {

         data: 

         [

            {

               "id":1,

               "name":"Foo",

               "age":"20"

            },

            {

               "id":2,

               "name":"Bar",

               "age":"30"

            },

            {

               "id":3,

               "name":"Baz",

               "age":"40"

            }

         ]

      }

   }

   render() {

      return (

         <div>

            <Header/>

            <table>

               <tbody>

                  {this.state.data.map((person, i) => <TableRow key = {i} 

                     data = {person} />)}

               </tbody>

            </table>

         </div>

      );

   }

}
class Header extends React.Component {

   render() {

      return (

         <div>

            <h1>Header</h1>

         </div>

      );

   }

}

class TableRow extends React.Component {

   render() {

      return (

         <tr>

            <td>{this.props.data.id}</td>

            <td>{this.props.data.name}</td>

            <td>{this.props.data.age}</td>

         </tr>

      );

   }

}

export default App;

کامپوننت ها : محتوای فایل main.js:

به مثال زیر توجه کنید:

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));