Hands-On Application Development with React and Bootstrap

We need a way to quickly set up our application structure and manage dependencies.

   •  Use NPM to install create-react-app

   •  Create a folder to house your project

   •  Run create-react-app and supply the folder path

We need a way where we can develop and test our data-driven application, but we don’t have time to build a back-end.

   •  Install json-serverglobally if you didn’t in Section 1

   •  Copy the data files from the exercise assets folder into your app

   •  Run JSON server and specify the port

We need a way to generate potentially hundreds of test database records, but we don’t want to type it all out in JSON and maintain it.

   •  Install Faker using NPM

   •  Copy the generate.js script from the exercise files assets folder

   •  Add data generation code and then run the server

We need to understand what React’s “state” is and how to manipulate it.

   •  Explain State

   •  Demonstrate sample code in the slides

We need to understand the important parts of component lifecycle so we can manage the creation of our components.

   •  Explain constructors

   •  Explain onComponentDidMount

   •  Explain Render

We need to learn the structure of a React component written in ES6.

   •  Create Folder

   •  Create index.js, Class file, and CSS file

   •  Edit each as needed

We need to retrieve data from our json-serverback-end.

   •  Install Axios with NPM

   •  Add the code for a get request

   •  View the results in the chrome dev tools

We need a way to test the code we’ve written so far.

   •  Start the server using npm start

   •  Once Chrome opens press F12 to open the developer tools

   •  Switch to the network tab, click the XHR button and reload the page

The site structure is somewhat complex consisting of nested components several layers deep.

   •  Understand that App component is the top level component

   •  Know that the app component holds the Navbar and footer components

   •  Explore the area between the Navbar and the footer for content

We need to add a navigational menu to our application to allow us to move around the application.

   •  Create a standard component

   •  Alter the files to contain a basic H tag

   •  Review the results

We need a container component to contain three components used in the site’s home page.

   •  Create a standard component

   •  Alter the files to contain placeholder text

   •  Review the results

We need an image carousel on our home page, because everyone else already has one.

   •  Create a standard component

   •  Alter the files to contain the basics

   •  Copy the sample code from the documentation

We need a way for our users to select a vehicle model so they can learn more about it.

   •  Create a standard component

   •  Add files to contain placeholder text

   •  Review the results

We need a footer visible at the bottom of every page containing a link to a form.

   •  Create a standard component

   •  Copy the footer example from the documentation

   •  Modify the example code

We need a way to determine which components we should render in our app based on the URL.

   •  Install react-router using NPM

   •  Import it into app.js

   •  Add routes to the app.js file

We need to actually use React router to render our home component.

   •  Add a render attribute to the Navbar replacing the component

   •  Add the JSX mark-up for the component you want to render

   •  Test the results by reviewing in the browser

We have some React components built, but they don’t do anything. We’ll use reactstrap, a React “version” of bootstrap to add style and functionality to our app.

   •  Install reactstrap and bootstrap using NPM

   •  Review bootstrap’s documentation

   •  Review the documentation for reactstrap

Right now, our navigational menu at the top of the page doesn’t do anything. We’d like it to display a menuing system.

   •  Locate the Navbar component in the reactstrap documentation

   •  Copy the sample code

   •  Paste the code into our Navbar component

The Navbar now contains the sample code from the documentation, but we want to customize it for our app.

   •  Open the Navbar component

   •  Take out the sample code for the drop down

   •  Use a map to generate the elements from data

We’d like to add font-awesome, a library containing hundreds of SVG icons for use in our site.

   •  Navigate to the font-awesome web site in the browser

   •  Find the link for the content delivery network

   •  Paste the link into the index.html file in the app’s public folder

We need to be able to send data and functions down into our components.

   •  Realize this is exactly like parameters on normal HTML tags

   •  Add your properties to your JSX in parent component

   •  Consume the property data in the child component

We want data to drive everything on our site. To accomplish this, we’ll need to alter the nav bar component so it uses a map to render the drop-down list of vehicles.

   •  Remove the default elements from the drop down list in the Navbar

   •  Use a map function to iterate over the vehicle data passed in from the parent component

   •  Return markup with embedded expressions and a key

Pretty much every website out there uses an image carousel on their home page. We should add one to ours.

   •  Visit the reactstrap documentation web site

   •  Copy the sample code

   •  Modify the constructor and the add any needed functions

Now that we have an image carousel, we need some images.

   •  Locate the assets folder in the exercise files

   •  Copy the images folder into your app’s public folder

   •  Take a quick look at the contents of the folder

We need the ability to send data as properties down to child components that are displayed using react-router.

   •  Change the route to the site root to use a render parameter

   •  Add the mark-up for the component to be rendered

   •  Use the spread operator for properties

We’d like our image carousel to be driven by data rather than by static mark-up.

   •  Alter the home component to send vehicle data into the carousel

   •  Alter the carousel code using map to iterate over data

   •  Within the map, return each element to appear in the carousel

Every automotive web site has some visual way of selecting a vehicle to learn more about it.

   •  Open the vehicle browser component

   •  Add row and column tags to control layout

   •  Replace the stub mark-up with reactstrap cards

We have part of a static structure. We need to use the vehicle data to duplicate this card structure, and fill in the details from the data.

   •  Add the vehicle data to the Vehicle Browser tag in the home component

   •  Add a map over the vehicle details

   •  For each iteration return the card structure with data filled in

reactstrap has form components, but it also has input groups which also appear to be form components. What’s the difference and when would you use either of them?

   •  Review documentation on form components

   •  Review documentation on the input groups components

   •  Compare and contrast the two sets of components

We need to start building the dealer locator component.

   •  Create the normal component structure

   •  Create the class and render some placeholder markup

   •  Create the index and CSS files

We’d like to use a “fancy” text box component for our search that includes a button with an icon.

   •  Review the code sample on the reactstrap site

   •  Copy the markup needed to make our “fancy” text box

   •  Alter the mark-up to suit our requirements

We need to be able to respond to interactions performed by our users when they type something into the search box.

   •  Add an event handler binding for dealing with input changes

   •  Add a class method to deal with input changes

   •  Update the state

Many apps need to display data in tables, and ours is no different. So how do we use the reactstrap table component?

   •  Review the code sample on the reactstrap site

   •  Copy the markup needed to make our table

   •  Alter the mark-up to suit our requirements

We need to be able to create a list of states in the United States where we have dealerships. This data comes from the dealerships table in the backend.

   •  Create an axios get request for the dealerships endpoint

   •  Perform a reduce to count each dealership

   •  Set up a list group component to hold each item

We need to display our search results in the list we created in the last video. Each list item will use a badge to show the number of dealerships in each state.

   •  Map over the reduced array

   •  Generate a List Item component for each state.

   •  Conditionally render the list is the user has typed a search

Every site needs a way to voluntarily collect information from its users. How can we build a form that allows potential customers to receive a call from sales?

   •  Create a component structure

   •  Add all the imports needed for cards, forms, and input groups

   •  Create an empty render method to be filled in later

We need to finish out the inquiry form by actually rendering all the form components.

   •  Add a card component to hold our form

   •  Add the form elements

   •  Add a route in App.js file

We have the form on the screen, but how do we post that data to our back-end?

   •  Add axios to the class imports

   •  Add a handler to record changes to the form into the state

   •  Bind the handler function to the class

We need to finish our post with axios.

   •  Add the handler to the form elements

   •  Add a function to handle the submit

   •  Construct and execute the axios post using data in the state

Earlier, we built a component that lists all the vehicles in our lineup. There’s even a link to view the details, but right now, it doesn’t go anywhere.

   •  Create a component structure including class, index, and CSS

   •  Use props.match.params to get the URL parameter passed in

   •  Add an image tag to display the selected vehicle

We have the basics, but we need to complete the vehicle detail component by adding the detail data.

   •  Add the model name

   •  Add the model description

   •  Add the fuel efficiency displayed using a font-awesome icon

The build and price tool is the heart of most automotive web sites. We need a way for users to pick and customize a vehicle.

   •  Create a component structure including class, index, and CSS

   •  Review the existing code for the component

   •  Install the classnames package requirement

We need to finish our build and price component tabs.

   •  Review the reactstrap documentation for the tabs component

   •  Create the text for the tabs

   •  Create stub content for the various tabs

We need a way to reduce scrolling in our model picker component. We can put the vehicle details in a collapsible component so the description is hidden unless the user asks for it.

   •  Locate the supplied starter code

   •  Use media tags to display images alongside our text

   •  Use numeral.js to format the MSRP as US currency

We need to finish building our collapsing media container.

   •  Add the code to display the vehicle details

   •  Add an font-awesome icon to the gas mileage value

   •  Add the nav elements needed to collapse the description

We need a way to pick the vehicle to customize, but we don’t want the exact same presentation as the model picker.

   •  Locate the supplied starter code

   •  Replace the placeholder code with a map

   •  Generate JSX mark-up for each vehicle

We need to finish the model picker.

   •  Add the code needed to handle the user selecting a vehicle

   •  Capture the selection and update the state

   •  Display the next tab in the build and price tool

We need a way for the user to pick from the available colors, which are different for each vehicle model.

   •  Create a component structure including class, index, and CSS

   •  Map over the available colors drawing a square for each

   •  Set the component’s state to contain the selected color on click

Most of our vehicles have engine options. You can pick an efficient engine, or a more powerful one. We need to create a way for the user to select the engine they want.

   •  Set up your initial state by copying the elements needed from documentation

   •  Map over the engine options and fill a dropdown with each option

   •  On click, set the component’s state to contain the selected engine.

We need to finish the engine picker drop down.

   •  Add an event handler to capture the user’s selection

   •  Update the state based on the selection causing a re-render

   •  Test and resolve any issues

We’d like to display a contact form, which we’ve already built, inside a modal dialog at the end of the build and price process.

   •  Research the structure of the modal reactstrap component

   •  Copy the sample code into the project

   •  Alter the sample so it displays our form component

During the development process, we have generated some warnings in our code. We need to clean those up.

   •  Review the log in the terminal window or developer tool console

   •  For each warning, go to the file and line listed

   •  Address the issue, then repeat until all warnings are gone

Since our project is written in ES6, and because not every browser supports all of ES6 yet, we need a way to generate a minified and optimized version of our site for consumption by a wide audience.

   •  Open the terminal

   •  Run the build command

   •  Examine the build file that is generated