Bootstrap a create-react-app project with React, Redux, and redux-form

Instructor: [00:00] We're going to use Create React App to bootstrap our new application. Let's call it "Awesome Form." Then, we can open that in our text editor.

[00:13] Firstly, let's get rid of some files that we're not going to need that were provided to us by Create React App. We're not going to need app.css, app.test.js, index.css, or logo.svg. Next, let's head into app.js and we can remove the reference to the logo and the CSS file. We can remove the image from the render method.

[00:40] Now, we're going to need to install some dependencies. Let's add Redux, React Redux, and Redux Form. Now, let's hook up Redux and Redux Form to our application. We're going to head to source/index.js. We can remove the reference to the CSS file. Let's import provider from React Redux. Also, createStore and combineReducers from Redux and reducer from Redux Form.

[01:30] Next, we need to specify Redux Forms form reducer as one of our reducers. Const reducers contains form, form reducer. In a realistic situation, there would be other reducers inside this object because a large application is likely to make use of several reducers, but for the sake of this example, we're just going to use what we need, which is the form reducer.

[02:03] We still need to use Redux's combineReducers method. Const reducer = combineReducers. We're pass in the reducers object. Next, let's set up our store using Redux's createStore method. We need to pass in the reducer that we just made.

[02:25] Let's also hook up Redux dev tools. To do this, we first need to check that the extension is available and then invoke it if it is. If we haven't done so already, we can install Redux dev tools from the Chrome web store.

[02:42] Finally, we need to wrap our app inside React Redux's provider component, passing in the store. Now, we're set up and ready to use Redux and Redux Form inside our React application.