Introduction to React - Lesson 1

The DOM, or Document Object Model, is the browser’s tree-like representation of a web page, where each element such as a heading, paragraph, or button becomes an object the browser can work with. JavaScript can read that structure, change text, add or remove elements, and respond to user actions by manipulating those objects directly. React does not usually edit the DOM one manual step at a time; instead, you describe what the UI should look like based on data and state. When that data changes, React figures out what parts of the page need updating and applies those changes to the real DOM for you. This makes interface code easier to organize because you focus on the desired result, while React handles the DOM updates behind the scenes.

• The DOM is the page structure that the browser builds for a web page.
• Things like headings, buttons, and paragraphs are all part of the DOM.
• JavaScript can change the DOM to update what you see on the screen.
• React helps by deciding what parts of the page need to change.
• This makes it easier to build web pages without changing every part by hand.

• This Hello function is a small React function that makes something show on the page.
• It has a simple shape: first the function is named, then it gives back one thing to display.
• return React.createElement tells React to make an h1 heading with the words Hello, world!.
• render(Hello); is used so React can take that function and show its result on the screen.
• An alternative way is render(<Hello />);, which is shorter-looking.
• Render(<Hello />); is often easier for many people to read.

• This Bye function is a small React function that makes a heading for the page.
• Its structure is simple: it starts with the function name, and inside it gives back something to show.
• The () after Bye means this function does not need any input right now.
• return React.createElement tells React to create an h2 with the word Goodbye!.
• render(Bye); is needed so React will use the function and put the result onto the screen.
• If render() is left out, the function exists, but nothing will appear on the page.

• This Message function is a small React function that shows one short message on the page.
• Its structure is simple: the function is named, and inside it sends back one paragraph to display.
• The () means this function is not taking in any extra information right now.
• The word null means there are no extra settings being added to the paragraph.
• React can control many DOM parts by making lots of elements and updating the page when needed.
• If render() is omitted, the function is written, but the message will not appear on the screen.

• The () after Message means this function is not getting any input right now.
• The is an empty set of extra settings for the paragraph.
• You can also put things inside , like a title or id, when you want to add more information.
• If stays empty, changing nothing inside it will usually not change what you see on the page.
• React can control many DOM elements by creating and updating lots of page parts for you.
• If render() is omitted, the function is written, but nothing will be shown on the screen.

• { title: "hello" } gives the paragraph extra information called a title.
• The word return sends the paragraph back so React can show it on the page.
• If return is omitted, the paragraph is not sent back, so nothing will appear.
• Changing something inside { } often changes extra details, but may not change the main text you see.
• For example, changing title may change a small hover message, while the paragraph words stay the same.
• If render() is omitted, React will not place the message onto the screen.

React originally used both function components and class components, but class components were the main way to handle state and lifecycle features in earlier React apps. Class components are based on JavaScript classes, so they can feel heavier and require more code, such as extends React.Component, a render() method, and often more confusing use of this. One advantage of classes is that they made it possible to organize larger components in the early days of React, and many older codebases still use them. A drawback is that classes are often harder for beginners to read, harder to reuse cleanly, and easier to make mistakes in because of binding and this behavior. Function components started as the simpler option for display-only parts of the page, but they became much more powerful when React introduced Hooks, which let functions use state and other React features. Because of that change, function components are now the usual choice in modern React. Their main advantages are that they are shorter, easier to read, and usually easier to teach and maintain. Class components are still valid and important to recognize in older projects, but function components are generally preferred because they make React code feel simpler and more direct.

• React has used both function components and class components.
• Class components came first for many bigger React jobs, but they are often longer and harder to read.
• Function components are usually shorter, simpler, and easier for beginners to learn.
• Today, function components are the main choice in most modern React code.
• Class components still matter because you may see them in older React projects.
• A quick example of a class component is shown below, only make it easier to recognize function components. React class components are discussed in later lessons.

• This is a React class component, which is another way to build part of a page.
• Its structure uses a class name, and inside it has a render() part.
• The render() part tells React what should be shown on the screen.
• The word return sends back the heading so React can display it.
• In modern React, function components are often preferred because they are usually shorter and easier to read.
• React class components are discussed in later lessons.
• Is there an easier way to work with HTML tags and elements?? Continue to learn about JSX
• Are there other forms of React function components?