Hello, space explorers! Get ready for an exciting journey into the React universe. Today, we'll learn what React is, how to create a simple functional component, understand the Virtual DOM, dive into JSX, and explore the basic structure of a React project. So, let’s buckle up and get started!
React is a JavaScript library developed by Facebook. As opposed to a framework, React gives you the flexibility to use only the parts you need, thereby making it a "library". If you were to imagine your React application as a house, the components would be its building blocks.
Think of a React component as a piece of Lego that is reusable and can be used to build different shapes. Here’s how to create a functional component:
JavaScript1function WelcomeMessage() { 2 return ( 3 <div> 4 Welcome to React! 5 </div> 6 ); 7} 8 9export default WelcomeMessage;
We've composed a basic React functional component that returns JSX. It's like a Lego block that says, "Welcome to React!".
The WelcomeMessage function is a popular type of React component, known as a functional component. The return statement outputs JSX, while export default WelcomeMessage; allows us to use our component elsewhere, akin to attaching it to a larger Lego structure.
JSX allows us to write HTML-like syntax within our JavaScript code, bridging the gap between HTML and JavaScript.
JavaScript1const element = <h1>Hello, World!</h1>;
Although it looks like HTML, it's actually JavaScript with a special syntax.
Consider the Virtual DOM as an artist sketching their design before painting it on the canvas. React's Virtual DOM is a lightweight copy of the real DOM where React first applies changes. It then uses this to calculate the most efficient way to implement the same changes to the real DOM.
When you start a new React project using "Create React App" (CRA), it generates a simple project structure. Here's how the basic structure of a React project would look:
1my-app 2├── README.md 3├── node_modules 4├── package.json 5├── public 6│ ├── index.html 7│ └── favicon.ico 8└── src 9 ├── App.js 10 ├── index.js 11 ├── App.css 12 └── index.css
In this structure:
README.md is the documentation file.node_modules is the directory where all the modules from npm (node package manager) installer are stored.package.json is the file that contains various metadata relevant to the project, including dependencies.public directory contains static resources. Among them are:
index.html which is the HTML file that is served when users visit your site.favicon.ico which is the icon that appears on the tab where your website is opened in a web browser.src directory contains all JavaScript, CSS and tests related to the application. Among them are:
App.js which is the main functional component in the application.index.js is the JavaScript file that sets up the ReactDOM and is a main entry point to the app.App.css and index.css are stylesheets for the App and overall application respectively.Rendering is the process of putting React elements into the DOM. In a typical React app, we'd write and export components in separate files, then import and use them wherever necessary.
We've created a functional component called WelcomeMessage in the previous sections. Let's continue with that:
JavaScript1import React from 'react'; 2 3function WelcomeMessage() { 4 return <div>Welcome to React!</div>; 5} 6 7export default WelcomeMessage;
This WelcomeMessage component can be thought of as a JavaScript function that returns a JSX element. To use this component and render its output (the JSX element) in the HTML document, we import it to the index.js file.
In your index.js file, you would import the WelcomeMessage component that we defined earlier and use ReactDOM's render method to render it into the DOM like this:
JavaScript1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import WelcomeMessage from './WelcomeMessage'; // assuming the WelcomeMessage is in the same folder 4 5ReactDOM.render( 6 <WelcomeMessage />, 7 document.getElementById('root') 8);
This specific way of rendering React Components is quite meaningful:
ReactDOM.render() is a method from the ReactDOM object that takes two arguments.<WelcomeMessage />, is our imported WelcomeMessage component.document.getElementById('root'), is the location in the real DOM where we want our component to be rendered.In simple terms, this code is taking our <WelcomeMessage /> component and rendering it into a div with an id of root in the actual DOM. The div with id root is typically defined inside public/index.html file in the generated project structure (from React CRA). This div serves as the root (hence the name) or the entry point for our React application.
Comments in your code are vital. They help other developers (and you as well in the future) understand what's happening in the code. Commenting in React is a bit different due to JSX, but it's still pretty straightforward.
In JavaScript, we typically use // for single-line comments and /* */ for multi-line comments. In JSX, since it's similar to HTML, we wrap our comments inside curly braces {} and then follow the JavaScript commenting style.
To leave a single line comment in JSX, wrap the comment inside {}:
JavaScript1// This is a single line comment in JavaScript 2<div> 3 Welcome to React! {/* This is a single line comment in JSX */} 4</div>
Similarly, for multi-line comments in JSX, we wrap the comment inside {}:
JavaScript1/* 2This is a multi-line comment 3in JavaScript 4*/ 5 6<div> 7 { 8 /* 9 This is a multi-line comment 10 in JSX 11 */ 12 } 13 Welcome to React! 14</div>
Remember, while commenting might seem insignificant now, it's a vital habit to form as your applications grow in complexity and are viewed by others. So make good use of comments in your code to ensure it's understandable to the wide range of developers who may interact with it. Happy coding! 🚀
Great job! We've unpacked the React suitcase and explored the essentials: React basics, creation of functional components, rendering of components, understanding JSX, React's Virtual DOM, and the basic project structure. Now, flex your muscles with some hands-on practice to reinforce what you've learned! But remember, this is just the beginning. Hang on tight, because we're about to go full throttle on this remarkable journey!