Using React, Bootstrap, and AWS Amplify to Build Apps

Set up a React app by installing node.js and npm, create the project via a tutorial command, and explore the project structure including node_modules, public, src, and JSX in app.js.

Navigate to the project directory, run npm start, and open localhost to view your React app. Edit app.js to display a hello world header and an unordered list, with recompilation.

Learn how to refactor a crowded app component into a separate Hello World component in React by exporting and importing it, then rendering it in the app with JSX.

Rewrite your app by creating a custom app.js, serve it via index.js, add a css class, and build an about me component with your name, importing it into app.js.

Demonstrates building and wiring React components, creating an app custom file, updating index.js, and adding an about me component to showcase basic CSS styling and component composition.

Create a stock data app by converting the starter React app into a class component, managing state, and using render, then start the app with npm start.

Create a welcome component in React, export and import it, and demonstrate passing a name prop to customize the displayed message.

Create and manage state in a React app by using a constructor, super, and this.state, then pass state as props to a main component displaying stock data.

Create interactive state-driven controls by converting the main component to a class, wiring increase and decrease buttons to app functions, and updating the state with setState to reflect stock values.

Rewrite the welcome component to create a gradients component and pass the name prop to a greetings component, then add a jumble function to swap stock values on click.

Apply conditional rendering with if-then logic to display time-based greetings and adjust styling by time of day using css classes, and use a display boolean to show or hide elements.

Create a json array of company data, pass it as a prop, and render it dynamically in a React component using map to show each company and its value.

Apply conditional styling to stock values with value-based colors and render in the map over Jason object, then rewrite increase, decrease, and jumble functions to modify the array.

Learn to build and validate React forms using the standard library, formic and yup, update the home page display with first and last names, and handle submit to save data.

Learn to build validation-driven login forms in React with Formik and Yup. Create an email and password schema, define initial values, and handle submission to update app state.

Learn to pull real stock data with fetch from a free API by adding componentDidMount, calling the endpoint, parsing JSON, and storing it in state for dynamic rendering.

Add conditional formatting for the login form using isLoggedIn and render messages; create a standalone api data component with props and practice fetch with endpoints and bootstrap styling.

Build a polished startup landing page by integrating React Bootstrap components, installing Bootstrap, and constructing sections like about, product, and a four-user subscribe form.

Discover how to theme and style apps with Bootswatch and Bootstrap, add custom fonts from Google Fonts, and incorporate Font Awesome icons in a React and Bootstrap setup.

Build a full-screen landing page with a Bootstrap jumbo tron in React, centering a bold headline over a background image and the tagline we are an automated platform for humans.

Create an about us section using a bootstrap accordion to display team information inside a jumbotron, then map a json array to render headers, bodies, and unique event keys.

Build a responsive product cards section with react-bootstrap, using containers, rows, and columns to display product data with cards and list groups, plus layout challenges.

Build a subscription form in React with email validation using Formik and Yup, styled with Bootstrap for a centered, responsive layout, and show an alert after subscribing.

Build a workout generator app with routing and a navigation bar to switch between home, about, and generator pages, including a workout form, then deploy with AWS Amplify.

Build a polished home component as a full-height landing page with a background image and a white-text jumbotron. Add a button group linking to the about and generator pages.

Build an about page mirroring the landing page with bootstrap, a jumbo image, and list groups; then create a generator page with JavaScript functions and a form.

Develop a workout generator page with a form to select duration from 15 minutes to 1 hour, generate a random workout from an array, and display it on submit.

Build a React class component workout generator that manages form state, generates a randomized five-minute rounds workout from categorized exercises (abs, cardio, legs), and displays the current workout under the form.

display the workout by conditionally rendering a bootstrap card with a list group after form submission, passing current workout state (rounds, reps for cardio, legs, chest) to the UI.

Deploy your React app with AWS Amplify by configuring Amplify, creating an IAM user, and publishing to production or dev with CloudFront and SSL, delivering a live hosted link.

Learn to set up environments, build React apps with components, state, and events. Style with Bootstrap, create landing and work generator pages, and deploy with routing and a custom domain.