Tutorial REACT "Paling Masuk Akal" untuk PEMULA π€©π
Web Programming UNPASγ»69 minutes read
Sandika Galih is starting a new React tutorial series emphasizing official documentation for beginners, comparing old and new React resources while suggesting Next JS for comprehensive learning. Understanding React involves transitioning from JavaScript, simplifying UI development through declarative programming, JSX syntax, components, props, event handling, and state management with hooks like useState.
Insights
- Starting a new series on React tutorials, Sandika Galih emphasizes learning from official Indonesian React documentation for beginners, highlighting the importance of understanding React's purpose and usage.
- React, created in 2013 by Jordan Walk at Facebook, is an opinionated library designed for creating user interfaces with flexibility for developers, named for its reactive nature that dynamically responds to data changes.
- React simplifies UI development through declarative programming, streamlining the process compared to imperative methods, requiring knowledge of HTML, CSS, JavaScript, and essential concepts like components, props, states, and event handling before delving into React's intricacies.
Get key ideas from YouTube videos. Itβs free
Recent questions
What is React?
React is a JavaScript library for creating user interfaces.
How does React simplify UI development?
React enables declarative programming for streamlined development.
What are the key concepts in React?
Components, props, and event handling are core concepts in React.
How can React components be reused?
Components can be reused by creating reusable UI elements.
What is JSX in React?
JSX is a syntax extension for JavaScript, resembling HTML.
Related videos
Summary
00:00
"Indonesian React tutorials for beginners"
- Sandika Galih on WPU channel starting a new series on React tutorials
- Emphasizing learning from official documentation for React technology
- Recommending Indonesian React documentation for beginners
- Highlighting the importance of understanding React's purpose and usage
- Comparing old and new React documentation for clarity
- Suggesting Next JS for comprehensive React learning for beginners
- Explaining React as a JavaScript library for creating user interfaces
- Describing React as an opinionated library with flexibility for developers
- Tracing React's history back to its creation in 2013 by Jordan Walk at Facebook
- React's development due to Facebook's integration needs and mobile app management
13:42
"React: Declarative UI Development for Applications"
- React documentation features a community and video section explaining React, with the newest video at the top and the first video discussing React.
- React is named for its reactive nature, designed to dynamically respond to data changes for quick application reactions.
- The React team comprises engineers from Meta, Facebook, and Next.js, with widespread global contributors.
- React has been downloaded over 19.3 million times and has over 200,000 stars on NPM, indicating its popularity.
- Understanding React involves transitioning from JavaScript, with React offering unique features beyond JavaScript capabilities.
- The browser interprets HTML coding to create a DOM tree, representing the website's structure.
- DOM manipulation involves changing the UI based on HTML coding using JavaScript, demonstrated by inserting an H1 tag.
- Imperative programming involves step-by-step instructions, while declarative programming focuses on what needs to be achieved, akin to React's approach.
- React simplifies UI development by enabling declarative programming, streamlining the process compared to imperative methods.
- To start working with React, two main scripts are needed, accessible via a CDN, allowing for the utilization of React in creating applications.
27:07
"Setting up React in HTML with JSX"
- React can be run via a simple HTML file without the need to compile or bundle it using React's module system.
- Two scripts are essential: one for the main React library and another for React Dome to manipulate the DOM easily.
- In an HTML index file, create a basic structure with an empty Dev element, renaming the app ID to 'root' for React 18.
- To set up React, create a JavaScript file calling 'root' as a container, or refer to React's documentation for guidance.
- Prepare a folder, name it appropriately, and create an index.html file with the necessary scripts from React's documentation.
- Use React Dome's 'createRoot' method to specify the container for the application and the 'render' method to display elements like H1.
- JSX is a syntax extension for JavaScript, resembling HTML but with stricter rules, allowing dynamic content display.
- JSX rules include always returning one element when rendering, closing all tags, and using camel case for attributes.
- JSX simplifies component creation, ensuring one element is returned during rendering and all tags are closed properly.
- JSX attributes should use camel case for consistency and proper functionality.
- Utilizing JSX in React applications streamlines element manipulation and reduces code duplication compared to vanilla JavaScript.
40:23
Essential Steps Before Learning React
- In HTML, event attributes like onClick can be written in lowercase, but in JSX, they must be in uppercase.
- Attributes like class in HTML should be changed to className in JSX to avoid conflicts with JavaScript classes.
- Before delving into learning JSX deeply, understanding the attributes that can be used and how they may change is crucial.
- To prepare for learning React, mastering HTML, CSS, fundamental JavaScript, data types, variables, functions, DOM manipulation, modern JavaScript techniques, CLI usage, Git, package managers, and ES6 is essential.
- Understanding variables, functions, arrow functions, objects, classes, arrays, higher-order functions, destructuring, template literals, ternary operators, and module systems in JavaScript is crucial before learning React.
- Setting up an editor like Visual Studio Code, installing necessary extensions, and configuring linters and code formatters are vital steps before starting to learn React.
- Components, props, and handling events are the core concepts in React that need to be mastered before moving on to more complex features.
- Components in React are essentially JavaScript functions that return JSX elements, allowing for the creation of reusable UI elements.
- Nested components can be created by placing components within other components, enabling the creation of complex UI structures.
- Reusing components in React involves creating components that can be used multiple times, with the ability to pass different information to them using props for dynamic behavior.
54:07
Manipulating Elements and Data in React
- Elements can have their behavior changed by assigning them classes, IDs, sources (src), styles, and more.
- In HTML, changing the src attribute in an Image element alters the image displayed.
- React components can receive properties known as props, which are captured as objects when the component is created.
- Props can be used to display different text in components, with each instance having unique values.
- JSX syntax is used to access props in React components.
- Refactoring props can be done using destructuring techniques and ternary operators for default values.
- Repetitive data display, like lists, can be achieved using array methods like map in React.
- When using map to display elements, each element must have a unique key property to avoid errors.
- Adding interactivity in React involves using states and event handlers to manage data changes.
- React hooks, like useState, allow for state management and logic addition in components.
01:07:54
Creating Interactive Buttons in React Components
- To handle an event, create a regular button with props onClick, ensuring the event name is written in JSX rules with a capital C, and the button will display the number of likes.
- The button component has props onClick, which, when executed, calls the click handle function without using brackets to ensure the function runs only when clicked, displaying the likes state.
- Terms to understand include state as a variable that changes, a state updater function to alter the state value, props as component attributes, events as triggers for actions, and components themselves.
- In the homepage component, variables and state updates are part of the useState Hook, with a click handle function running setLikes to increment likes by one when the button is clicked.
- To practice, create a simple counter application with three buttons to increase, decrease, or reset a central number display, using two components - one for buttons with different props and one for text display.
- Modify the counter to limit the number to 10, preventing further increase beyond 10 and decrease below 0, with only the reset button functional at these limits, encouraging further practice and sharing of solutions for learning and improvement.
