Web Design with React

UI User Interface Library

Web Development 4.3(91)9h 42m34 lectures6 sections

What you'll learn

Understand what React is
Install the tools and create your first project
Use JSX and the Babel compiler
Create components
Work with Props
Use the Map method and arrow functions
Control the display with conditions
Manage state with the useState hook
Handle events and work with forms
Complete a final project

About this course

This course teaches web design with React JS, a JavaScript library for building interactive user interfaces for web applications. It starts by defining React, installing the tools, creating your first project and using the Code SandBox tool. Next you learn JSX and the Babel compiler, working with values, styles and properties, then components, working with modules, Import and Export. Then you cover Props, the Map method, arrow functions and controlling what is displayed through conditions. You also learn State and the useState hook, handling events and working with forms. At the end you carry out a final project in several stages and download its files. The course suits anyone who wants to learn how to build modern website interfaces, and it is best to know the basics of HTML and JavaScript before you start. Afterward you will be able to build reusable components and create an interactive web application on your own. The teaching is practical and gradual, and you follow the lessons in order to move from the idea to the application step by step.

Expected outcomes

Deep understanding of React concepts with practical application.
Ability to create interactive and modern web applications.
Mastery of tools like JSX, Hooks, and components.
Build a final project that reflects the skills acquired during the course.

Learner reviews

These reviews are from learners who bought the content and completed at least 50% of it — there are no reviews from anyone who hasn't gone through the material.

4.3

★★★★☆

91 reviews

5★

4★

3★

2★

1★

Course content

Introduction to React

4 lectures

What is ReactIntroduces the React library and why it is popular, explains components with a burger sandwich example, splitting the interface into components, and updating the DOM by changing only the affected part.6:55
Installing ToolsExplains installing the tools needed for the React course: Visual Studio Code, Node.js with NPM and Git, and enabling IIS from Windows features to run a local web server.8:50
Creating Your First ProjectExplains creating the first React project, the npm commands for running and building, the contents of the public folder and index.html, and the index.js file that connects the app to the root element and renders Hello World.22:16
Code SandBox ToolIntroduces CodeSandbox for running React projects in the browser, its advantages such as working from any device, team collaboration and installing packages, and explains its interface parts, font settings and sharing a project.16:22

Using JSX with React

6 lectures

Explanation of JSX and Babel CompilerExplains JSX in React and how it relates to plain JavaScript, comparing creating an H1 element through the DOM directly with using JSX, and the role of Babel in converting the code into JavaScript the browser understands.24:07
Simple Practical ApplicationA practical React exercise on a simple program that takes two numbers from the user and prints the result of an operation on them, then rendering the interface through one element that wraps all the parts.5:25
Handling ValuesExplains writing JavaScript values inside JSX between curly braces, noting that only an expression that yields a value is allowed, not a full statement, with template literals and a small exercise showing a name and copyright.15:23
Handling Style and PropertiesExplains JSX element attributes and styling: using className instead of class, writing attributes in camelCase, adding an external CSS file, along with the React warning when a wrong attribute name is used.24:13
Adding Custom Style to ElementsExplains inline style in JSX: the style attribute does not accept a string but a JavaScript object, property names are written in camelCase, and values can be changed with conditions inside the JavaScript file.14:48
Practical ApplicationA hands-on challenge applying the earlier JSX concepts by creating a React app from scratch, writing a file that imports the library and renders a single element on the page.21:39

Component

14 lectures

What is the Component?Explains the React component concept hands-on, separating page parts such as the header and the list into their own files and reusing them, while fixing a reference error through imports.29:53
Code Modification for the New UpdateExplains updating code for the newer React version: using createRoot from react-dom/client instead of ReactDOM.render to remove the console warning, then calling render on the root.5:21
Embedding the Component with the Previous Practical ApplicationApplies the component concept to the time-based greeting example, moving the heading logic into its own component file, exporting it with export default, and using createRoot to reduce lines of code.11:09
Handling the Model and Explaining Import and ExportExplains import, export and modules in ES6: exporting a value or function with export default or by name, and importing it in another file under a name of your choice, with a double and triple example.25:52
Practical Application on the ModelA practical exercise on modules, import and export: building a file that exports four arithmetic functions for addition, subtraction, multiplication and division, and importing them in the main file to display their results.10:19
Explanation of PropsExplains React Props and how to pass different values into a single component so it displays them, instead of hard-coding values inside it, and how the component reads them through props.24:48
Practical Application on PropsA practical Props exercise building a player card component that receives its data from a separate data file, then reusing the card in the App component and styling it with CSS.33:17
Using React DevToolsUses the React DevTools browser extension to inspect the component tree and props, and uses it to spot and fix a wrong property name when adding an image to the card.15:32
Explanation of the Map MethodExplains the map function for rendering the items of a data array at once, writing the component once and repeating it, and why each element needs a unique key.16:24
Practical Application on the Map MethodA hands-on map exercise building an emoji dictionary: a data file of symbols and meanings, and a card component showing the symbol, name and description for each item.30:47
Explanation of Key Functions UsedExplains the array methods map, filter, reduce, find and findIndex, and how each one processes array elements and returns a result based on a condition or an accumulation.19:17
Explanation of Arrow FunctionExplains ES6 arrow functions and how to convert the functions used with map, filter, reduce and findIndex into a shorter syntax that makes the code easier to read.10:19
Controlling Display Through ConditionsExplains conditional rendering in React to show a different screen depending on the user's state, building a login form and using the ternary operator to choose what to display.19:56
Practical ApplicationA practical conditional rendering exercise toggling between login and register screens based on a userIsRegistered variable, passed from App down to the Form component.12:15

Explaining Hooks

5 lectures

Introduction to StateIntroduces the concept of state in React: when state data changes, the UI changes, illustrated with an ice cube and water example and with a counter that increases and decreases using two buttons.12:53
Explaining the UseState HookExplains the useState hook in React: why changing a plain value does not update the UI, and how useState returns an array holding the value and a setter function that triggers a re-render.29:29
Practical ApplicationA practical useState exercise: a clock showing the current time as the initial state, and a button that calls a function through onClick to update the state with the new time so the UI re-renders automatically.17:00
Event HandlingExplains event handling in React, such as hovering over a button, leaving it and clicking it, and changing the background color with state and the onMouseOver, onMouseOut and onClick events.12:56
Working with FormsExplains handling input fields and forms in React: reading the value from event.target with the onChange event and storing it in state, then displaying it when the submit button is pressed with onSubmit.19:01

Final Project

4 lectures

Stage OneStarts the first stage of the Keeper App project, similar to Google Keep, by building the Header, Note and Footer components, assembling them in App and rendering them on the page.25:34
Stage TwoExplains the second stage of the Keeper App using dummy data in a notes.js file, and displaying the set of notes in App with the map function, passing key, title and content to each component.8:01
Stage ThreeBuilds the third stage of the Keeper App by creating a CreateNote component with a form containing a title field, a three-row text area and an add button, plus a delete button on each note, styled with CSS.10:31
Stage FourBuilds the fourth stage of the Keeper App by adding state to make the app interactive: capturing the title and content from the fields with handleChange, and adding new notes and deleting them from the list.21:31