The LinkedIn Learning course React.js: Building an Interface

Overview

React.js: Building an Interface

This is the repository for the LinkedIn Learning course React.js: Building an Interface. The full course is available from LinkedIn Learning.

React.js: Building an Interface React is a JavaScript library with reusable components and a unique data rendering approach. Web interfaces that you create with React are flexible, fast, and lightweight. In this course, instructor Ray Villalobos reviews component architecture in React and covers key skills that you need to be able to build interfaces. Ray steps through how to install React and get started with components, debugging, and variables. He explains how you can pass data to a component, use the useState hook and conditional classes, and toggle items by passing the state to a sub-component and using values to hide or show sub-components. Ray describes how you can delete records, search with a filtered array, set up a sort, and more. He shows how you can finish up your application by creating the code for adding appointments.

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

yarn build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

Instructor

Ray Villalobos

Senior Staff Instructor at LinkedIn Learning

Check out my other courses on LinkedIn Learning.

You might also like...
React Translator is a Web Interface created for make the creation of locales.json more easier.

React Translator is a Web Interface created for make the creation of locales.json more easier. Theses locales files can be used in the package @oneforx/react-translator

A React Typescript search interface for the popular Giphy.com service.

giphy-search A React Typescript search interface for the popular Giphy.com service. Lets get to it Scope We want you to create a search interface for

Uses TypeScript and Proxy to dynamically construct a lens-like interface for your application state.

Lenses in React Uses TypeScript and Proxy to dynamically construct a lens-like interface for your application state. Example You can construct a lens/

User interface for Trunion web app

Tronion UI Run dev server: npm run dev Home page is in pages/index.js, the user pages are in pages/account directory, theme file utils/theme.js, modal

This is a Web User Interface Sample Project. Using ReactJs.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface
A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface

Trello Board 📌 A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface (basically a trello clone

 The react UI component for building complex filter criteria
The react UI component for building complex filter criteria

React Filter Control The React component for building the composite filter criteria Demo (JS) | Demo (TS) Together With Data Table Overview Installati

:fire: An extremely fast, React-like JavaScript library for building modern user interfaces
:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server. Description The main obje

A guide to building your own React stack, explaining options and tradeoffs along the way
A guide to building your own React stack, explaining options and tradeoffs along the way

Custom React Stack React has a very rich ecosystem. For anything you want to do, there is probably a library or a framework available for it. That's g

Owner
MOHAMMED KHORMI
ICSI | CNSS Certified Network Security Specialist. Certified Information Systems Security Professional | CISSP NSE_2_FORTINETS NETWORK Security EXPORT
MOHAMMED KHORMI
Pinterest website clone with React and Redux only for learning purposes

Pinterest website clone with React and Redux only for learning purposes. Pinterest is an image sharing and social media service designed to enable saving and discovery of information on the internet using images, and on a smaller scale, animated GIFs and videos, in the form of pinboards.

Sarvesh Mishra 3 Apr 6, 2022
A Preact task list app, mainly for the purposes of learning Preact.

Toiler This is a task tracking app, written with Preact, Go, and Postgres. This version is very basic and doesn't even properly support auth yet so do

Dean Davidson 1 Nov 11, 2021
This project is a frontend learning project that built with ReactJS.

CryptoArt-NFT Cryptopunk NFT is a frontend project which is built with ReactJS. The website displays the minted NFT Artworks by using OpenSea API. The

CallMeJaX 1 Feb 27, 2022
This is the FARM Stack course, where you are going to learn how to build an application from scratch using FASTAPI, React and mongoDB

This is the FARM Stack course, where you are going to learn how to build an application from scratch using FASTAPI, React and mongoDB

Bek Brace 115 Nov 19, 2022
Clone Coding Repository for "React WebGame" Course of ZeroCho

Clone Coding Repository for "React WebGame" Course of ZeroCho

Hyecheol (Jerry) Jang 1 Dec 4, 2021
Github-ci-cd-react - I followed CI/CD course from codedamn to learn how to implement github actions in a project, in this practical lesson with codedamn am using ReactJS

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Okechukwu Somtochukwu 1 Jan 2, 2022
Javascript Mastery Course

Javascript Mastery Course

Amigoscode 27 Nov 6, 2022
JavaScript course at the Udemy platform given by Professor Luiz Otávio Miranda

Javascript e TypeScript - front-end e back-end (Full Stack) - Node, Express, noSQL, React, hooks, Redux, Design Patterns Curso de JavaScript na platad

Lucas Celli 5 Jan 11, 2022
ReactJS-Spring-Boot-CRUD-Full-Stack-App - Course on YouTube

ReactJS-Spring-Boot-CRUD-Full-Stack-App - Course on YouTube

Nicole Bidigaray 4 Sep 30, 2022
a simple dapp login interface made it with react-ts-chakra-ui and usedapp

a simple dapp login interface made it with react-ts-chakra-ui and usedapp

Sergio 1 May 5, 2022