💻 Getting started

• Make sure you have Node installed
  • You can download Node from https://nodejs.org/en/
  • Having trouble? Ask a helper for assistance! 🙂
• Open up a terminal
• Create a new React app with npx create-react-app [app-name]
  • This creates a new project folder [app-name] in the current directory
  • You can move into your new project folder with cd [app-name]
• Inside the project folder, you’ll find a number of miscellaneous files in the src folder that we won’t need
  • Delete the folder and replace it with the src folder from our provided starter files
  • Find the files here: https://learn.csesoc.org.au/opendev
    • ReactJS Part 1: Exercises Starter Code
• Start your app with npm start
  • This opens up a new page in your web browser

👶 Exercise 1: A simple counter

After running npm start, you should see a bare webpage with only a counter (at 0) and an increment button. This is the Counter component being rendered to the screen.

The Counter component is exported from src/components/Counter.js and imported to src/App.js, where it’s rendered by the App component. (The App component itself is rendered in src/index.js.)

Task

You only need to edit src/components/Counter.js in this exercise. Implement the Counter component by completing the following:

1. Declare a new state variable for the counter with useState
2. Edit the JSX in the component’s return statement so that it renders the current value of the counter, not just 0
3. Edit the handleOnClick event handler so that it increments the counter by 1 whenever it’s called (i.e. whenever the increment button is clicked)

Before any clicks

After clicking Increment once

After clicking Increment twice

🌏 Exercise 2: Capital Finder

Next, let’s take a look at the CapitalFinder component in src/components/CapitalFinder.js. This component displays a message that tells you what the capital city of a given country is, with the country set to Australia by default.

The CapitalFinder component is already included in src/App.js, except it and its import statement have been commented out. You can uncomment them now and see the change in your web browser. As you can see, the features don’t entirely work yet.