Day 2 of MERN Stack Journey: Exploring Project Creation, Components, and File Structure
#learningreact #day2
The 90 Days+ Journey with MERN Stack. After completing the basic theory of React.js on day 1, I moved on to day 2 where I explored React.js project creation and its folder/file structure. I used the ‘npx create-react-app <projectname>’ command to create a new React.js application. It’s part of the React ecosystem and allows developers to quickly set up a new project with all the necessary configuration and dependencies. Additionally, I learned about creating components for projects, importing and exporting them, and familiarized myself with terms like stateless components, functional components, implementing JSX in a React app, and distinguishing difference between JSX elements and normal HTML elements. When I run ‘npx create-react-app <projectname>’ in my terminal, it sets up a new directory with a default React project structure, containing all the essential files and folders to start React development. The project’s file structure appears like this:
>>firstproject
> node_modules
> public
> src
.gitignore
package-lock.json
package.json
README.mdI explored each directory and file based on their functionalities, work, use, and purposes.
=> What is the `package.json` file? And what is its use?
The package.json file is an essential part of any Node.js project, including React projects. This file contains metadata about the project and specifies its dependencies or structure which helps the application to run in production. It includes information such as the project name, version, description, entry points, scripts, and dependencies. Developers can use npm or yarn to install dependencies listed in this file. Also, package.json allows us to define custom scripts that can be executed via npm or yarn. These scripts can automate common tasks such as building the project, running tests, starting a development server, or deploying the application. So, this file is very essential for react project for managing project metadata, dependencies, scripts, and configurations.
=> What is the `package-lock.json` file? And what is its use?
This package-lock.json file is generated by npm and contains the exact version of each dependency and packages installed in our project. The `package-lock.json` file stores information about the packages used in a project, including their sources, origins, and creators, while also locking them in place. When sharing a React application/project with other devices or systems, the `package-lock.json` file aids in swiftly re-downloading, installing, or updating the necessary packages to run and build the same project on another system. This accelerates the project transfer process between different systems. Additionally, there’s no need to transfer bulky online packages alongside the project because `package-lock.json` already contains the details of which packages were used in the project and specifies the exact versions to install same packages and dependency in new system based on the lock file. So, we can say package-lock.json file locks the source of packages and helps to update package on project when system lost the actual modules or packages from project.
=> What are the functional components in react?
React follows a component-based architecture to create web applications. In React, there are two popular ways to declare components for web applications: (i) Functional Components and (ii) Class Components. Class components are ES6 classes that extend React.Component. They have additional features such as state and lifecycle methods. For example:
class MyComponent extends Component {
render() {
return <div>{this.props.text}</div>;
}
}However, in today’s scenario, most developers follow the functional approach to declare components. Functional Components are essentially a way of defining components with JavaScript functions. These functions return JSX. They are also referred to as stateless components because they don’t have their own internal state management. Functional components receive props (data) as input and return React elements to describe the UI. They are simpler and more concise compared to class components. Nevertheless, React Hooks can be used to give a Functional Component state just like a Class Component. Moreover, it is recommended to use Functional Components over Class Components by React itself. Example:
// Functional component definition
function Welcome(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>Welcome to our website.</p>
</div>
);
}
// Usage of the functional component
function App() {
return (
<div>
<Welcome name="Mahendra" />
<Welcome name="Ajay" />
</div>
);
}=> Why Are Stateless Components Useful in React?
In React, stateless components, also known as functional components, are useful in react app development because it simpler and easier to understand compared to class components. They are also more performant because they don’t have the overhead of managing their own state or lifecycle methods. With the introduction of React Hooks in React 16.8, functional components gained the ability to manage state and side effects, blurring the line between stateless and stateful components. As a result, the use of stateless components has become more prevalent in React development.
=> What Are the Differences Between JSX Elements and HTML Elements?
JSX (JavaScript XML) elements and HTML elements are similar in many ways but have little bit of differences between both elements. One key distinction is in their syntax and attributes. For instance, a JSX component must return only a single element, while there is no such constraint in HTML. Additionally, JSX elements allow us to utilize JavaScript expressions within curly braces {} to specify attributes, as shown below:
<button className={isActive ? 'active' : 'inactive'} onClick={handleClick}>
Click me
</button>On the other hand, HTML elements use static attributes. JavaScript expressions cannot be directly embedded in HTML attributes. Furthermore, there are differences in attribute definitions between JSX and HTML. JSX supports the ‘className’ attribute, whereas HTML uses the ‘class’ attribute. JSX also supports inline styling in an object format (key:value pair), whereas HTML supports inline styling directly under the style attribute. Another distinction lies in the necessity of closing tags. In JSX elements, each tag must have its closing tag, which is compulsory. However, in HTML, it is not mandatory to define the closing tag. HTML can run without explicitly closing an element. In JSX, all attributes will have to be written in camelCase, like onclick as onClick, onmouseover as onMouseOver, and so on.
=> what is the difference between export and export default?
In React, both export and export default are used to export modules from a file to be imported and used in other files to achieve component based architecture but there is little bit of difference between both exporting ways:
First in export, this keyword is used to export one or more named exports from a module or file. With export, we can export multiple variables, functions, or classes from a single module. When importing such exports in another file, we need to use curly braces {} and specify the name of the exported entity.
// module.js
export const variable1 = 'value1';
export function myFunction() { /* function implementation */ }
export class MyClass { /* class implementation */ }
//while importing
import { variable1, myFunction, MyClass } from './module';Also, to import them in another file, we must specify their name as they were written. We can use export when we want to export multiple named entities from a module.
On other hand export default, this keyword is used to export a single default export from a module. There can only be one default export per module. When importing a default export in another file, we don’t need to use curly braces {}, we can directly specify the name where we want to assign to the default export.
// module.js
const defaultExport = 'defaultValue';
export default defaultExport;
//while importing
import myDefault from './module';we can use export default when we want to export a single default entity from a module.
=> shortly explaining React project structure:
>node_modules: This directory contains all the external libraries and dependencies that my project relies on. These dependencies are specified in the package.json file and are installed automatically when i run npm install or yarn install.
>public: This directory holds static assets such as HTML files, images, and other resources that don’t need to be processed by webpack or other build tools. The index.html file in this directory serves as the entry point for my React application.
>src: This directory is where I’ll write most of my project code. It contains all the source files for my React components, JavaScript files, CSS stylesheets, and other assets. The main JavaScript file, typically index.js or App.js, imports and renders my React components.
.gitignore: This file specifies which files and directories should be ignored by Git, the version control system. It typically includes files like node_modules and build artifacts to prevent them from being committed to my repository.
package-lock.json: This file is generated by npm and contains the exact version of each dependency installed in my project. It ensures that the same versions of dependencies are installed across different machines and environments.
package.json: This file contains metadata about my project and specifies its dependencies, scripts, and other configurations. It also includes scripts for running tasks such as starting the development server or building the production version of my application.
README.md: This file typically contains documentation about the project, including instructions for installation, usage, and contribution guidelines. It’s commonly written in Markdown format and displayed prominently on the project’s repository page on platforms like GitHub.
#MahendraMahara #JavaScript #MERN-Stack #React
Follow Me For More: https://www.instagram.com/trkmahendra/