From the course: React: State Management (2019)

Setting up your environment - React.js Tutorial

From the course: React: State Management (2019)

Start my 1-month free trial

Setting up your environment

“

- [Instructor] To get the most out of this course, you should be familiar with the fundamentals of React and Redux. I'll be setting up my Redux environment on a Mac, but everything I show you will also work on a PC or on Linux. As a prerequisite, make sure that you have at least npm 8 installed. If you don't have it installed, you can install it on the npm website. Let's get started by setting up our environment. I've provided exercise files for you to follow along with. I've downloaded them to the desktop, but you can download them to wherever you'd like. We'll be working with the simple book application that allows you to mark books as red. This is the modification of the Redux To-Do MVC example. First, from the command line, navigate to the first exercise file to do MVC 01-03 Start. Perfect. Now let's run npm install or npm i. This will install all of your dependencies. This may take a few minutes, so definitely be patient. Great. You might see this error saying that there's low security vulnerabilities. Don't worry about that. Let's go ahead and run npm start. This will start up our application and now it will navigate to local host 3000. If you set it up successfully, you should see a list of books like this. Awesome. You're all set and ready to go. Next, let's install a couple of browser extensions that will help with debugging and understanding our code better. First, let's install React Development Tools. Using the search for React Developer Tools in the Chrome web store. This allows you to click into React components and see which props and state belong to which components. We'll be working with Redux later in the course. To understand how state changes throughout the use of our application, we want to be able to also install Redux Dev Tools, which is similar to React Dev Tools. For example, now we can see exactly which actions are triggered when we click on a button and what the new state is. This will come in super handy when debugging. We'll go more into depth using these tools later in the course. For now, installing them and understanding what they're used for is good enough.

Contents