React in easy steps with Node and Java Backend

Create your first React app by building an HTML page, injecting React, ReactDOM, and Babel via CDN links, and using Babel to convert JSX into browser-ready JavaScript.

Set the script charset to UTF-8 to fix the invalid regular expression error caused by certain babel versions; note that 6.26.0 does not trigger the issue.

Render the text 'First React' inside an h1 tag with ReactDOM.render and JSX. Babel transpiles JSX to JavaScript to generate the corresponding HTML in the document body.

Learn why rendering markup into document.body is discouraged and render into a root div instead, using getElementById or querySelector, with Babel transpiling JSX to React code.

Apply styles to React pages using CSS in HTML and JSX, define #root and #root h1 styles, and inspect the DOM to see styling changes.

See how React builds apps from reusable components, using JavaScript to create components and JSX to generate HTML, then render UI with a class that extends React.Component.

Create your first reusable React component named Hello that displays the message Hello to the end user. Organize scripts in a components folder and implement render to return JSX.

Learn to render a React component with JSX-like syntax using ReactDOM.render, reuse the Hello component within HTML-like elements, wrap components in a div, and render to the DOM’s root.

Learn how to pass attributes to React components using props, and access them in render with this.props. Render dynamic names in JSX by wrapping expressions in braces.

Learn how to nest and access child elements in React components using jsx, this.props.children, and proper closing tags to ensure error-free rendering.

Learn how to convert class-based React components to function-based components, pass props, and manage state and lifecycle with hooks.

Learn to build two React components, DisplayCustomer and DisplayAddress, to display a customer's name, email, and address by composing components, passing props, and ensuring a single root element for JSX.

Create a DisplayAddress component to show street and city, then compose it inside DisplayCustomer by passing an address prop. Hardcode two addresses to demonstrate prop-based rendering with JSX.

Learn how the DisplayCustomer and DisplayAddress components render customer details into plain HTML using React.createElement, producing a DOM structure that displays name, email, street, and city.

Create a simple login component in React using HTML form fields in JSX, including text and password inputs and a submit button, with rendering of a dynamic title.

Learn to render unordered lists in React by starting with a static list of courses and then generating JSX from arrays using a for loop and the map method.

Create a React component called ListCourses2 that uses an array of courses and a for loop to dynamically render li elements in JSX, with the title from props.

Learn to generate a dynamic list of courses by applying the map method with an arrow function to transform the courses array into li elements, simplifying code.

Create a static React component that renders an html table from an array of student objects (name, age, city), then prepare a dynamic version using array.map.

Create a React component named ListStudents2 that dynamically generates table rows by mapping an array of student objects, rendering name, age, and city in the tbody.

Split the ListStudents2 rendering by creating a RowCreator component and passing student data as a prop, then map through the students to render each row with the new reusable component.

Learn to handle a login submit in React by wiring an on click event to the component's handleSubmit function, and show an alert as feedback.

Learn how React wraps browser events into a synthetic event object, exposing properties like type and cancelable for use in event handlers.

Explore how this points to the current component in React event handlers, and learn to bind it so you can access component methods and properties from events.

Initialize React app state with a constructor that sets the courses and render the list with map, updating from four to two (Java web services and Spring Boot) on click.

Render a new React component to display the list of courses and render the state; prepare for an on-click update that changes the data.

Learn to update the state in a React component by handling the update button click, binding the event, and using setState so the UI re-renders with the new data.

Convert the static student table into a dynamic ListStudents component, render each row with the row creator, and initialize state with a constant student array for name and city filtering.

Display the student list by reflecting state in the UI, add a text filter for name or city, and implement an onChange handler to filter results.

Implement the filtering logic in a React app by reading the input from the event target, filtering students by name or city with toLowerCase and indexOf, and updating state.

Clone the original student array to keep the original data intact while filtering, define a students clone in the state, and render and filter with the clone for real-time results.

Learn to create a reusable text component in React, render child elements, and apply styles using the recommended approach to display country names in a simple HTML structure.

Demonstrate applying css to html with root and h1 selectors, define a style block, and use class name in jsx, yielding a yellow background with red text.

Learn to define styles as a JavaScript object inside a React component, using camelCase keys and the style attribute to create a self-contained, reusable styling approach.

Learn how to customize styles in JSX by passing a bg color prop to components, using props.bgColor to set background colors for different elements.

Discover that JSX must have only one root element, wrapped by the render, and see how React.createElement converts JSX to DOM elements via the JavaScript DOM API.

Discover why JSX inline styles require a style object rather than a string, and pass an object expression to the style prop to ensure React components render correctly.

Use block comments inside JSX by placing /* ... */ inside curly braces to explain code without rendering; they can span lines, unlike single-line JSX comments.

Capitalize component names in JSX and keep HTML elements lowercase to help React distinguish components from HTML, enabling correct rendering and easy reuse of JSX expressions.

Install node to run javascript outside the browser, use npm and yarn to install libraries like express and react, and verify with node -v for command-line boilerplate projects.

Install yarn to manage Node modules for your React and Node backend work, replacing npm. Download the installer or use the command line and verify with yarn -v.

Install Visual Studio Code, a free ide from Microsoft, to develop Angular, React, and TypeScript applications, and follow simple steps to download and install it on your system.

Install MySQL and MySQL Workbench to provide a GUI client; download the installer, install both, and configure a root password.

Launch MySQL Workbench, create a new local connection, test it with root and the configured password, then create a database named My DB.

Learn to download and install MySQL community server on Windows, including prerequisites like Visual C++ and choosing server only, with default port 3306 and a root password; install MySQL Workbench.

Install the MySQL Workbench GUI client on Windows, launch it, connect to a local or remote MySQL server, and create and use a database while viewing databases and tables.

Install the create-react-app CLI with npm, then use it to scaffold production-ready React projects, storing them in a dedicated folder for easy testing and deployment.

Learn to create a React app with the create react app CLI, explore project structure, and compare function-based components with class-based ones, including state management with hooks.

Learn to create and run a React project using the React CLI and create-react-app, install dependencies, and launch the development server on localhost:3000.

Understand the standard React project structure created by Create React App, including package.json, node_modules, public/index.html, and src with index.js and app.js for rendering the app.

Connects index.js in src to index.html through the html-webpack-plugin within create-react-app, building a single bundle and injecting it into the public html. Builds output into a build folder for production deployment.

Run and test a React app with yan start and yan test, then build a production ready deployment using yan run build and explore the build folder for deployment.

Learn to make ajax calls with the Axis library in a react app using rest services. Test get and post calls with postman: fetch country data and uppercase text.

Create a react ajax calls project from the command line, load it in vscode, clean the app render, and add a button to trigger a get countries request on click.

Add the axis library as a dependency to the ajax calls project to enable ajax and restful calls from within the React application.

Fetches country data by sending a get request with axios, logs response data to the console, and handles errors, all triggered by a button click in a React app.

Learn to perform an http post using the access library to hit the uppercase service, convert a message to uppercase, and send a JSON body via a post click handler.