Hands-On Application Development with React and Bootstrap

Getting Started With Create-React-App 4 lectures 14:40 Course Overview This video gives glimpse of the entire course. Prerequisites and Software Cover the technologies and software the user needs to have installed for the course. • Check the version of Node.js • Install if necessary • Verify Installation Exercise Files Talk through the exercise files and point out how they are used. • Download the exercise files • Put them someplace you can remember • Review the contents of the exercise files folders Previewing the Finished App In this video we will have a look at the final output • Look into the package.json file • Install node package • View the website that will be created in the course Getting Started With Create-React-App 4 lectures 14:40 Course Overview This video gives glimpse of the entire course. Prerequisites and Software Cover the technologies and software the user needs to have installed for the course. • Check the version of Node.js • Install if necessary • Verify Installation Exercise Files Talk through the exercise files and point out how they are used. • Download the exercise files • Put them someplace you can remember • Review the contents of the exercise files folders Previewing the Finished App In this video we will have a look at the final output • Look into the package.json file • Install node package • View the website that will be created in the course Course Overview This video gives glimpse of the entire course. Course Overview This video gives glimpse of the entire course. Course Overview This video gives glimpse of the entire course. Course Overview This video gives glimpse of the entire course. This video gives glimpse of the entire course. This video gives glimpse of the entire course. Prerequisites and Software Cover the technologies and software the user needs to have installed for the course. • Check the version of Node.js • Install if necessary • Verify Installation Prerequisites and Software Cover the technologies and software the user needs to have installed for the course. • Check the version of Node.js • Install if necessary • Verify Installation Prerequisites and Software Cover the technologies and software the user needs to have installed for the course. • Check the version of Node.js • Install if necessary • Verify Installation Prerequisites and Software Cover the technologies and software the user needs to have installed for the course. • Check the version of Node.js • Install if necessary • Verify Installation Cover the technologies and software the user needs to have installed for the course. • Check the version of Node.js • Install if necessary • Verify Installation Cover the technologies and software the user needs to have installed for the course. • Check the version of Node.js • Install if necessary • Verify Installation Exercise Files Talk through the exercise files and point out how they are used. • Download the exercise files • Put them someplace you can remember • Review the contents of the exercise files folders Exercise Files Talk through the exercise files and point out how they are used. • Download the exercise files • Put them someplace you can remember • Review the contents of the exercise files folders Exercise Files Talk through the exercise files and point out how they are used. • Download the exercise files • Put them someplace you can remember • Review the contents of the exercise files folders Exercise Files Talk through the exercise files and point out how they are used. • Download the exercise files • Put them someplace you can remember • Review the contents of the exercise files folders Talk through the exercise files and point out how they are used. • Download the exercise files • Put them someplace you can remember • Review the contents of the exercise files folders Talk through the exercise files and point out how they are used. • Download the exercise files • Put them someplace you can remember • Review the contents of the exercise files folders Previewing the Finished App In this video we will have a look at the final output • Look into the package.json file • Install node package • View the website that will be created in the course Previewing the Finished App In this video we will have a look at the final output • Look into the package.json file • Install node package • View the website that will be created in the course Previewing the Finished App In this video we will have a look at the final output • Look into the package.json file • Install node package • View the website that will be created in the course Previewing the Finished App In this video we will have a look at the final output • Look into the package.json file • Install node package • View the website that will be created in the course In this video we will have a look at the final output • Look into the package.json file • Install node package • View the website that will be created in the course In this video we will have a look at the final output • Look into the package.json file • Install node package • View the website that will be created in the course Laying the Foundation: Building Out the Navigation 16 lectures 01:41:02 Install and Run Create-React-App 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 Introduction to JSON Server 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 Using Faker to Generate Random Test Data 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 React Component State We need to understand what React’s “state” is and how to manipulate it. • Explain State • Demonstrate sample code in the slides React’s Component Life Cycle 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 Creating a React Component with ES6 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 Fetching Data with Axios 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 Testing Our Code 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 Reviewing the Site’s Structure 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 Adding the Navbar Placeholder 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 Stubbing the Home Component 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 Stubbing the Image Carousel 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 Stubbing the Vehicle Browser 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 Creating the Footer 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 Introduction to React Router 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 Working with React Router 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 Laying the Foundation: Building Out the Navigation - Quiz Laying the Foundation: Building Out the Navigation. 16 lectures 01:41:02 Install and Run Create-React-App 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 Introduction to JSON Server 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 Using Faker to Generate Random Test Data 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 React Component State We need to understand what React’s “state” is and how to manipulate it. • Explain State • Demonstrate sample code in the slides React’s Component Life Cycle 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 Creating a React Component with ES6 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 Fetching Data with Axios 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 Testing Our Code 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 Reviewing the Site’s Structure 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 Adding the Navbar Placeholder 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 Stubbing the Home Component 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 Stubbing the Image Carousel 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 Stubbing the Vehicle Browser We need a way for our users to select a vehicle model so they can learn more about it ng We need a way to test the code we’ve written so...