1:08:14
ReactJS Full Course | What is ReactJS | React JS Tutorial for Beginners | ReactJS Full Course #1
Coder Army
Overview
This video introduces ReactJS by building it from scratch using fundamental JavaScript concepts, rather than relying on definitions or pre-built tools. The instructor presents a problem-solving approach, demonstrating how to create and manipulate DOM elements using plain JavaScript. This leads to the creation of a reusable `createElement` function, illustrating the core idea behind React's `createElement` and the role of libraries like React and ReactDOM. The video emphasizes that React itself is a JavaScript object responsible for describing the UI, while ReactDOM handles the actual DOM manipulation, explaining why these two are separate and how React can be used across different platforms.
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- Instead of defining React, the video focuses on learning by solving a problem.
- The initial setup involves a basic HTML file with a linked JavaScript file.
- A simple HTML structure with a `div` of `id='root'` is created.
- Basic JavaScript is used to create an `h1` element, set its content, class, and ID, and append it to the DOM.
This chapter grounds the learning in a practical, hands-on approach, showing how to manipulate the DOM with JavaScript before introducing React, making the subsequent concepts easier to grasp.
Creating an `h1` element with text 'Hello Coder Army', class 'element', and ID 'first', then appending it to the `div` with `id='root'`.
- JavaScript can be used to dynamically set element styles like font size and background color.
- Multiple elements can be created and appended to the DOM sequentially.
- The process of creating and appending multiple elements manually becomes repetitive and cumbersome.
- This repetition highlights the need for a more efficient, reusable solution.
This section demonstrates the limitations of manual DOM manipulation, setting the stage for why a library like React is necessary to streamline complex UI development.
Creating a second `h2` element with text 'Strike is Launched' and specific styling, then appending it to the DOM after the first `h1`.
- A `createElement` function is designed to abstract away the repetitive code for creating elements.
- The function accepts tag name, attributes (as an object), and children as arguments.
- It uses `document.createElement` to create the base element.
- It iterates through attributes to set properties like `className`, `id`, and `style` using `Object.assign` for styles.
Building a custom `createElement` function mirrors React's core functionality, helping learners understand how libraries abstract complex operations into simpler, reusable components.
A function `createElement(tag, attributes, children)` that takes 'h1', `{ className: 'element', id: 'first', style: { fontSize: '30px', backgroundColor: 'orange', color: 'white' } }`, and 'Hello Coder Army' to create and return a styled `h1` element.
- The custom `createElement` function is encapsulated within a `React` object, mimicking React's structure.
- React itself is presented as a JavaScript object with methods like `createElement`.
- This object-based structure allows for extensibility with other methods (like `useState`, `useEffect`).
- React's primary role is to describe the UI, not to directly manipulate the DOM.
This chapter demystifies React by showing it's fundamentally a JavaScript object, making it less intimidating and highlighting its descriptive nature for UI.
Creating a `const React = { createElement: function(...) { ... } };` object and then calling `React.createElement(...)` to create elements.
- ReactDOM is a separate library responsible for interacting with the browser's DOM.
- It takes the UI description (React elements) and renders them into the actual DOM.
- The `render` function (older method) or `createRoot` and `root.render` (newer method) are used for this purpose.
- ReactDOM handles the DOM manipulation, while React focuses on describing the UI structure.
Understanding the separation of concerns between React and ReactDOM is crucial for grasping how React applications are mounted and updated in the browser.
Using `ReactDOM.render(element, document.getElementById('root'))` or the newer `const root = ReactDOM.createRoot(document.getElementById('root')); root.render(element);` to display the created React element on the page.
- React's core `createElement` function returns a JavaScript object (a 'React Element') that describes the UI.
- This description is platform-agnostic and can be understood by different rendering engines.
- ReactDOM is the rendering engine for the web (browser DOM).
- Other platforms like React Native (for mobile) or React PDF use their own rendering engines to interpret React's UI descriptions.
This explains why React is so versatile, allowing developers to write UI logic once and deploy it across web, mobile, and other platforms using platform-specific rendering libraries.
The same React element object created by `React.createElement` can be rendered by `ReactDOM` for the web, or interpreted by React Native's engine for mobile apps.
- Complex UIs are built by creating parent elements that contain other elements as children.
- The `React.createElement` function supports passing multiple children as arguments or an array.
- The older `ReactDOM.render` method is deprecated in React 18+.
- The modern approach uses `ReactDOM.createRoot` to set up a container and then `root.render` to display the UI.
This chapter introduces how to structure nested components and adopts the current best practices for rendering React applications in the browser.
Creating a `div` element with `h1` ('Hello Coder Army') and `h2` ('Strike is Launched') as its children using `React.createElement`, and then rendering this `div` using `ReactDOM.createRoot` and `root.render`.
Key takeaways
- React simplifies UI development by abstracting away complex DOM manipulation.
- React itself is a JavaScript object that describes what the UI should look like, not how to render it.
- ReactDOM is the library responsible for taking React's UI descriptions and rendering them into the actual browser DOM.
- The separation between React and ReactDOM allows React to be platform-agnostic (web, mobile, PDF).
- Building a custom `createElement` function demonstrates the core principle behind React's element creation.
- Modern React applications use `createRoot` and `render` for mounting the application.
- Understanding JavaScript fundamentals is key to understanding React's underlying mechanisms.
Key terms
JavaScript LibraryDOM (Document Object Model)createElementAttributesChildrenObject.assignReact ElementReactDOMrendercreateRootVirtual DOMReact Native
Test your understanding
- What is the primary responsibility of React compared to ReactDOM?
- How does creating a reusable `createElement` function help in understanding React?
- Why are React and ReactDOM separate libraries, and what is the benefit of this separation?
- What does React.createElement return, and how is this different from what ReactDOM does?
- How has the method for rendering React applications in the browser changed with React 18?