書名： Build Applications with Meteor
作者名： Dobrin Ganev
本章字數： 288字
更新時間： 2021-07-09 19:48:56

Building the application components

Let's start building the application from top to bottom. The first two entries in the app are the index.html and index.js files. You can name them main.js or app.js or anything you want. I have a preference of naming index (starting with lowercase) as the first entry of any directory in my apps. That said, all React components should be capitalized when you import them; otherwise, React will thread them as HTML tags. To keep it intuitive, you can have the component names and their files' names capitalized.

In the index.html file, we can have our root DOM element:

<head>
  <title>Shopping Cart</title>
   </head>
 <body>
 <div id="root"></div>
</body>

We have a pretty simple HTML with only the <head> and <body> tags, and one <div> that will be the root of the parent top-level component, App.

In HTML, we don't have to specify anything else; Meteor will load it and add all the necessary scripts for us:

You can investigate what Meteor added to the app in the browser's console.

Next is the index.js--the first entry point on the client:

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import App from './containers/App';
  Meteor.startup(() => {
     render(<App />, document.getElementById('root'));
});

We import the App component, then on Meteor.startup() execution, we mount it to the <div> tag with the root ID.

Moving to the containers directory, the first component we need to initialize is the App:

import React from 'react';
import Products from  './ProductsContainer';
import Cart from  './CartContainer';
class App extends React.Component {
render() {
   return (
      <div>
        <h2>Store</h2>
         <Products/>
         <Cart/>
       </div>
    )
  }
}
export default App;

The only thing this component will do is render the container components that will take care of the data and their children.

官术网_书友最值得收藏!

Build Applications with Meteor

Building the application components