- Open your command line and navigate to your repos directory (if you do not have a repos folder, then you can use mkdir repos to create one)
- Use this template repository to start a new project in your repos folder: git clone <repo_name> cd repo_name to navigate into your new repo directory
- Make sure to run
npm install
to fetch the dependencies for the project - Start Visual Studio Code and select 'Open Folder'. Then select repo_name to open the folder in the editor (or just type code . in your terminal inside the repo directory)
- Follow the instructions on the README.md file to complete exercises
- Open the app.js file to get started
- Here is a basic App class component rendered in the browser through index.js.
-
Initialize state in the App class component, and define a new property called "text" with some string as the value.
-
Add an input element to your App.
- Use the
text
state to define its placeholder attribute.
- Use the
-
Create a method
handleInput
that takes a HTML change event as a param (e
) and callsthis.setState
, setting the event target value as thetext
state -
Add an
onChange
event to the input that callsthis.handleInput
.
- Notice how this changes the ReactDOM. Why might that be important?
- Create a method
handleClick
that toggles the boolean valuehasLoaded
in the App state - Add a button beneath that input with an
onClick
event that calls thehandleClick
method - Change your
render
method. Write a conditional statement that checks whether or not the hasLoaded property is true. If it is, return the elements that you have already define. If false, return a new heading with the text "Loading...". - Add a button beneath it that is identical to the one you created earlier.
- Save and reload the browser. Which React elements are displayed first? Do you know why?
- Write a new method with the name
componentDidMount
, that will set the state property "hasLoaded" to true.
- Now what happens when the application re-renders? Which React elements are displayed first, and why?