Skip to main content

pelatihan.orgLearn. Practice. Grow.

Sign in Sign up

pelatihan.org

Learn web development with a clear roadmap, code practice, and quizzes with instant feedback.

Catalog Sign in Subscription

React Curriculum: 3 Chapters, 45 Lessons — pelatihan.org

Home/Catalog/React/Curriculum

Curriculum

React Curriculum

Learn React online with 45 structured lessons, code examples, and 225 quiz questions.

45 lessons 3 chapters 225 questions

Summaries and key points are free to preview. Full lessons, code examples, and quizzes require a subscription.

01

React Tutorial

36 lessons

01React HomeThis page is the entrance to React material, from displaying the first element to Hooks and routing. React is a JavaScript library for building a component-based user interface.…

02React IntroReact is an open source JavaScript library developed by Meta (formerly Facebook) to build a component-based interface. React works declaratively: you describe the view for each…

03React Get StartedTo start writing React, you need Node.js and npm as its package manager. The easiest way is to create a new project with a tool like Vite, and then run the development server…

04React First AppThe React project results in a generator containing important files such as index.js as the input point and App.js as the main component. The application input point renders the…

05React Render HTMLTo display JSX on the screen, React provides the createRoot API from the react-dom/client package. You create a root from an existing DOM element, then call a render method with…

06React UpgradeWhen the latest React version is released, your project can be updated by changing the version to package.json and running the npm install. Make sure the react and react-dom…

07React ES6React makes great use of the modern JavaScript features of the ECMAScript 2015 or ES6 standards. Features such as const and let, arrow function, template literal, destructuring,…

08React JSX IntroJSX is short for JavaScript XML, which is a syntax that allows you to write HTML-like markup directly into JavaScript code. The JSX-containing files were compiled by Babel into a…

09React JSX ExpressionsIn JSX you can put a JavaScript expression in it by wrapping it in curly braces. Expressions can be variables, calculations, function naming, or arrays rendered into a list of…

10React JSX AttributesAttributes on JSX elements are similar to HTML, but some names must be changed to be valid in JavaScript, for example class to className and for to htmlFor. The style attribute…

11React JSX If StatementsJSX does not support the syntax if in curly braces, so the logic of the branching should be written in a different way. Common options are ternary operators, && operators to…

12React ComponentsThe React component is a JavaScript function that returns JSX markup and can be reused in many places. You just write a function with a capital name and then call it an HTML…

13React ClassIn addition to functions, the React component can be written as a class that extends React.Component. The class component stores internal data on the state object and accesses it…

14React PropsProps are a way of passing data from the parent component to the child component, similar to attributes in HTML. Props are read-only, meaning the component cannot change the…

15React Props DestructuringDestructing allows you to take props properties directly into the function parameters so that the code is more concise. Instead of writing props.name many times, just write…

16React Props ChildrenProps children contain elements or text that are placed between the opening and closing tags of the component. This pattern is useful for creating packaging components such as…

17React EventsReact provides an event handler in the form of camelCase attributes such as onClick and onChange that accepts JavaScript functions. On a functional component, you simply pass the…

18React ConditionalsConditional rendering makes the components display different displays according to specific conditions. Commonly used patterns are if or else outside JSX, ternary operators, and…

19React ListsThe array array is rendered into a set of elements using the map method. Each element generated should have a unique key property value so that React can track changes properly.…

20React FormsForms in React are generally written as controlled components, where the value of each input is stored at the state and is always synchronized via onChange. In doing so, React…

21React Forms SubmitHTML forms are inherently refreshing pages when submitted, so React uses an onSubmit event that calls e.preventDefault(). After that prevention, the data from the state can be…

22React TextareaThe textarea elements in React follow the same controlled component pattern, i.e. the attribute value is bound to the state and changed by onChange. Unlike HTML, the initial…

23React SelectDropdown select on React is also controlled by the value attribute on the select tag, rather than the selected attribute on each option. The selected value is stored in the state…

24React Multiple InputsWhen a form has a lot of inputs, you don't need to create separate states for each column. Just one state object with the property according to the input name, then one general…

25React CheckboxThe checkbox on React represents the boolean status, so its main attribute is checked and changes through onChange. The checkbox value is taken from the property…

26React RadioThe radio button is used to select one option from several options. All the radios in a group must have the same name attribute, whereas the value of each option is…

27React PortalsReact Portal allows components to render their children to DOM elements outside their parent hierarchy, such as capital attached to a document body. This feature is useful for…

28React SuspenseReact.Suspense displays temporary fallback when the components in it are not ready, for example when a file is being loaded. You wrap the part with Suspense and then render the…

29React CSS StylingReact supports a variety of styles, from external CSS imported into JavaScript files to inline styles in the form of JavaScript objects. External CSS is suitable for global…

30React CSS ModulesCSS modules allow you to write a regular CSS file that is automatically named unique so that the classes do not clash between the components. You import the extension file as an…

31React CSS-in-JSCSS-in-JS writes styles directly into JavaScript through a library such as styled-components. You make the component that already carries the underlying style, so the style moves…

32React RouterReact Router is a client-side library routing that maps the URL to the React component without reloading the page. You set up the BrowserRouter at the root and then you declare…

33React TransitionsReact Transition Group helps add inbound, outbound, and moving animations to the React element. The CSSTransition component adds a CSS class according to the enter or exit…

34React Forward RefForwardRef allows the component to forward the ref received by the user to the DOM element in it. This is useful when packaging components such as custom inputs need to expose…

35React HOCA Higher-Order Component is a function that accepts one component and then returns a new component with additional behavior, similar to the higher-order pattern function in…

36React SassReact supports Sass by adding sass packets and importing the .scss extension file into the component. Sass carries features such as the $ variable, nesting, mixin, and partial…

02

React Hooks

9 lessons

01What is Hooks?Hooks are built-in React functions that allow functional components to use state and life cycle without writing class. useState, useEffect, and useContext are the most common…02React useStateUseState allows functional components to store data that persists between renders. You declare the pair as the state value and the setter function, then call the setter to…03React useEffectUseEffect runs side effects after a component is rendered to a DOM, such as retrieving data, subscribing to an event, or changing a page title. The dependency list determines…04React useContextUseContext reads the value of React Context without having to write the layered Consumer component. You create context with createContext, wrap the application part with the…05React useRefUseRef returns a mutable object that survives for the life of the component without causing a re-rendering when the contents are changed. The object .current is very useful for…06React useReducerThe useReducer is a useState alternative to the more complex state, consisting of a state and a dispatch function. The dispatch sends action to a pure reducer that calculates a…07React useCallbackUseCallback memoizes the function to not be recreated on each render, as long as its dependence remains unchanged. This is important when the function is passed to the wrapped…08React useMemoUseMemo returns the value of the already-memoized computation result so that it is only recalculated when the dependencies change. It's great for expensive processes like…09React Custom HooksCustom Hook is a common JavaScript function that calls other Hooks in, so that repeating logic can be reused in many components. A custom hook can return multiple values at once…

All-course subscription

$5.00 / 30 days

Access every course, lesson, and quiz. Progress is saved automatically.

This curriculum is free to browse. Activate a subscription to unlock full lessons, code examples, and quizzes.

Activate subscription Back to course