Hello, and welcome to your first journey into the world of React.js! So, what exactly is React.js? Simply put, it's a JavaScript library used to build user interfaces, specifically for single-page applications.

Websites today are not just simple pages with text and images anymore; they are full-blown applications that rerender, interact with the user, and update live without refreshing the page.

With regular HTML and JavaScript, when we want to update the user interface according to user action or other events, we manually manipulate the DOM and update the required elements. However, with React.js, we divide our user interface into separate reusable components, and React.js effectively decides what parts of the user interface need to be updated when the application's state changes. This approach makes the code cleaner, easier to understand and maintain, and more efficient.

Are you excited? We certainly are. Let's get started!

React introduces a syntax that looks like a combination of JavaScript and HTML. This syntax, known as JSX (JavaScript XML), allows developers to build HTML structures directly within their JavaScript code.

Consider this simple example:

In this code, element is not a string or HTML - it's a JSX element. It seems like a string of HTML, but technically, it's a JavaScript object representing a 'H1' HTML element in memory (often referred to as "Virtual DOM").

With JSX, you're not limited to static HTML-like tags, you can embed JavaScript expressions as well:

In this example, a + b is a JavaScript expression embedded in JSX. When React renders this component, it will replace {a + b} with the result of the expression, displaying 'The sum is: 30' on the screen.

JSX allows us to specify any HTML attribute as we normally would. However, some HTML attributes clash with reserved JavaScript keywords (like class attribute, which is written as className in JSX) or are kebab-cased, which is not an accepted naming convention in JavaScript.

To handle this, in JSX, we use camelCase property naming, which is consistent with JavaScript object properties. For example, HTML's tabindex becomes tabIndex in JSX and CSS's background-color changes to backgroundColor.

Let's see these in action with an object and a JSX element:

In the above example, elementStyle is a plain JavaScript object containing two properties: fontSize and backgroundColor. These properties are written in camelCase, per JavaScript convention.

In modern React applications, we use the createRoot function from the react-dom/client package to render or display a JSX element onto the webpage.

createRoot() requires a DOM element (usually a div with an id of root) as its argument. Once you have a root, you can call its .render() method to render your JSX element.

Let's look at this through an example. Here's the structure of an HTML file that often accompanies React applications:

In this HTML file, you'll notice a div with an id of root. This is where we tell React to render our application, in this case, our element. In our JavaScript code, we are telling React to render the element and to place it in the HTML element with id 'root'.

The output of the above code would be "Hello, John Doe" displayed on your webpage, inside the div with id root.

So in essence, createRoot() and its .render() method are responsible for rendering our JSX elements to the actual DOM, allowing us to visually see our application in a web browser. This method is essential in almost every React application as it bridges the gap between the virtual DOM in React and the actual DOM.

That's it for our first lesson on React.js! We've learned what React.js is, how it utilizes JSX, how to setup your first React.js app, and how to render it in the browser using createRoot() and .render().

Next up, we'll dive right into the practice tasks designed to reinforce what you've learned today. Remember, practice makes perfect, so let's get coding! Until next time!