Basic React.js is a beginner course in React 19, from creating a project with Vite, writing JSX and splitting pages into components with props and state, to loading data from a REST API, building multi-page apps with React Router and handling forms. It suits students and web developers who know basic JavaScript, and you leave able to deploy your own React app.
Today's web applications need to respond quickly, feel as smooth as a mobile app and be easy to extend as the system grows. React is one of the most widely used libraries for building user interfaces because it splits a page into reusable components, and it underpins many other tools such as Next.js and React Native.
This course is a first step into writing current React the right way. Learners create a React 19 project with Vite, write JSX, split pages into components, pass values with props, handle state and events, and style their work with CSS Modules and Bootstrap. They then load data from an API with useEffect and custom hooks, build multi-page apps with React Router, create forms with form actions and React Hook Form, and carry out CRUD operations against a REST API. The course closes with building and deploying the app to the web. (2 days, 6 hours per day, 12 hours in total, Beginner level.)
Course Details
This course is the 2026 edition of Basic React.js for beginners. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures with labs. Beginner level. This edition moves to React 19 and teaches only function components and hooks, dropping class components. Projects are created with Vite instead of the deprecated Create React App, routing uses the current React Router,
React 19 form actions are added alongside React Hook Form and Zod, and a mock API on the learner's machine replaces the Strapi installation. Every lab uses open source or free tools. Learners take home a lab guide, starter and solution code for every lab, and a product management CRUD project. Those who want to go further can continue with the React and NodeJS with Docker Workshop course.
Section 1: Lab: Getting to Know React and Setting Up a Project
Section 2: Writing JSX
Section 3: Components and Props
Section 4: Lab: State and Events
Section 5: Styling Components
Section 6: Loading Data with useEffect and Custom Hooks
Section 7: Lab: Multi-page Apps with React Router
Section 8: Forms in React
Section 9: Lab: CRUD with a REST API
Section 10: Workshop: Building and Deploying a React App
JSX is a syntax for writing HTML-like markup inside JavaScript, which tools such as Vite turn into React function calls. Unlike HTML, it uses className instead of class and htmlFor instead of for, attributes are camelCase such as onClick, every tag must be closed and a component must return a single root element or wrap its content in a Fragment. JavaScript values and expressions go inside curly braces.
Props are values a parent component passes to a child; the child reads them but should not change them. State is data a component owns and can change itself, such as what has been typed into a form. You create it with useState, and calling the setter makes React re-render. When state holds an object or array, create a new value instead of changing the old one, and if a child needs to change the parent's data, the parent passes a function down through props.
Install the react-router package, which current versions use in place of react-router-dom, and wrap the app in BrowserRouter. Define routes with Routes and Route, matching each path to a page component. Use Link or NavLink instead of an a tag so pages change without a full reload, read URL parameters with useParams, share layouts with Outlet, navigate from code with useNavigate, and add a final route with the path * to show a 404 page.
It suits students and beginners who want to become front-end developers, web developers who want to start with React, teachers who want to teach modern web development, and IT staff who build pages for internal systems. You should be able to write basic HTML, CSS and JavaScript, including variables, functions, arrays and objects. Please bring a laptop that can run Node.js and VS Code.
You will be able to create a React 19 project with Vite, split pages into components, pass values with props, handle state and events, load data from a REST API, build multi-page apps with React Router, create validated forms, build a CRUD app and deploy it to the web. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
Yes. It can be run in-house for your team, with examples adapted to your work, such as building pages that connect to the APIs of systems your organisation already uses. You can request a quotation from this page, or contact us on LINE @itgenius or by phone on 02-570-8449.
JavaScript is the one language every browser understands, so it sits behind almost every button, menu, form and interactive screen on the web, and it is also the foundation of React, Vue, Node.js and many other modern tools. Yet many beginners learn from…
jQuery is still part of many websites, back-office systems and plugins in organisations, and jQuery 4, released in 2026, removed a number of old APIs and dropped support for old browsers. Work that once relied on older plugins, such as jQuery Templates or…
Ajax lets a web page send and receive data from the server without reloading the whole page, so it underpins instant forms, search boxes with suggestions, shopping carts and almost every back-office system. Browsers now provide the Fetch API as standard, many…
