Display this code in Visual Studio Code

I just started this course. I went thru the ‘Hello world’ chapter and I was able to view the results in the browsers using both with without tools and with tools approaches.

As I move forward, However, there was not an instruction how to execute the codes for components so I can view it in a browser the resulting page.

Below is the code.Where should I start in VS Code to show this in a browser.

Thanks

import React from 'react';
import CartItems from './CartItems';
import DisplayTotal from './DisplayTotal';
import CheckoutButton from './CheckoutButton';
import styles from './Cart.css.js';

function Cart(props){
  return(
    <div style={styles.cart}>
      <h2>Cart</h2>
      <CartItems items = {props.inCart}/>
      <DisplayTotal items = {props.inCart}/>
      <CheckoutButton/>
    </div>
  );
}

export default Cart;

Link to content: Beginning ReactJS Foundations Building User Interfaces with ReactJS: An Approachable Guide - Section 4

Hi @joevaldez85,

I am not an expert on React, but I believe this is the relevant section you need to look at

To start the application you type npm start in the terminal window.

When you created the app with npx create-react-app react-js-foundations the start script is written to the package.json file.

It says it will automatically open the browser, but if it doesn’t the address by default is usually
http://localhost:3000

I was able to do the following:
cd react-js-foundations
THEN I did npm start and the React App browser showed displaying “Hello” and an input box.
This is not what I want to do. I want to display the result of the code above.
Does that mean I have to create a new .JS file for this code?

No, in theory you should be able to just replace the ‘Hello World’ code in app.js with this new code — or backup the hello world version of app.js and replace it with a new app.js containing the new code.

I can’t talk for the imports though. Does CartItems etc already exist?

Thanks!

  1. Where will I look if CartItems exist or not?
  2. Can I rename Helloworld.js to something else to run the code above?
  3. Where are all the codes in this book?

Hi @joevaldez85, I had to do a bit of digging. There was information in the preface of the book, but that linked to a dead link on the wiley website.

I have found the github page for this book, which appears to contain all the relevant code.

This is the relevant chapter.

1 Like

I think that’s the whole code for the book. Thanks! The next challenge is how to execute those examples and arrived at the resulting display as it should be in the browser.

2 Likes