If you wish to add React into an existing app refer to steps here

If you wish to add react into an existing app refer

This preview shows page 5 - 8 out of 15 pages.

Note that with the above steps, we have created a new React app. If you wish to add React into an existing app, refer to steps here: - app.html . Lab Exercise 1: Understand the Project File Structure Step 1 : The HTML file loaded after you launched the app using “npm start” is index.html under myreactapp/public/ , together with image and configuration files. In index.html , a <div> element with id “ root ” is created as follows, in which React elements will be rendered: <div id="root"></div> Step 2 : The JavaScript files to render React elements are located under myreactapp/src/ . Find index.js and App.js in this directory and open them in a text editor. Step 3 : In index.js , it first loads React and ReactDOM modules: import React from 'react'; import ReactDOM from 'react-dom'; and css file:
Image of page 5
import './index.css'; and exported components from other JavaScript files ( App.js and registerServiceWorker.js ): import App from './App'; import registerServiceWorker from './registerServiceWorker'; index.js mainly renders the App component in the ' root ' <div> element (in index.html ). registerServiceWorker() is used in production environment to register a service worker to serve assets from local cache (i.e., to allow the app to load faster on subsequent visits in production environment — see ). ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker(); Step 4: In App.js , it creates a class component App : class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1> </header> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); } } The component returns a <div> element of class “App”, and the styling rules on this class (given in App.css ) are applied to this <div> element. Note that the class attribute becomes className in React. The <div> element contains a <header> element of class "App-header" and a <p> element of class "App-intro". Within the header, there is an <img> element and a <h1> element. All these elements render the page view in Fig. 6. At last, App.js exposes the App component to other modules using the following statement: export default App; Lab Exercise 2: Create our Web Page Using React We are going to modify index.js and App.js to create the page as shown in Figures 1-5. Step 1 : In index.js , replace the content by the following code: import React from 'react'; import ReactDOM from 'react-dom'; import CommodityPage from './App';
Image of page 6
).
Image of page 7
Image of page 8

You've reached the end of your free preview.

Want to read all 15 pages?

  • Fall '13
  • Dr. C. Wu
  • World Wide Web, component, react app, CommodityPage component

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture