React is an open-source JavaScript library created by Facebook. It’s a powerful Javascript User Interface (UI) Library and it’s a tool for building UI components that users can create interactive user interfaces. React uses a feature called JSX which means you can write Javascript code in an HTML-LIKE syntax. JSX allows you to use HTML elements within Javascript expressions. This improves the readability and writability of the code. Writing JSX in React is not mandatory. However many developers find JSX useful for React when working on their Javascript code. The core principle of React is components. A component is a structure with a state and props of its own and a self-consistent interface. Components can also be used inside other components, reducing code duplication and achieving a modular structure. React is not just an interface library. It is also used to develop more comprehensive web applications, used with Redux, React Router, Next.js, and many other tools. Redux helps manage the application state. React Router is the core package that contains standard components and functions to implement routing. Next.js is a flexible React (framework) framework that provides the building blocks for building fast web applications. React is used for the interface of many popular web applications. Facebook, Instagram, Netflix, Uber, Twitch, and many other platforms use React.
History of React Js
React, born from Jordan Walke’s early experiments named “F-Bolt” and “FaxJS”, found its roots in Facebook’s News Feed in 2011, later making its way into Instagram in 2012. It officially embraced open-source status in May 2013, a pivotal moment propelling its widespread adoption.
React’s evolution continued with React Native, announced in February 2015 and open-sourced the following month, enabling cross-platform development for mobile applications.
April 18, 2017, marked a significant milestone with the introduction of React Fiber, a revamped rendering algorithm designed to enhance performance and facilitate smoother animations. Fiber’s modular approach, breaking tasks into manageable segments called “fibers”, revolutionized React’s rendering capabilities, paving the way for future innovations.
How to Create a React App Step-by-Step
Step-1: open Command Prompt (CMD)
Step-2: go to the desktop by writing cd Desktop
Step-3: write npx create-react-app my-app(Your Project name)
Step-4: go to your app directory by writing cd my-app
Step-5: code . to open the project in vscode
Note: to open the project folder in vscode remember that you have already installed vscode
Now your react project is ready first of all let’s start the project by writing npm start in the vscode terminal.
Now we can see that our project has started successfully
Now let’s talk about the folders that are inside our project folder
What is the purpose of the node_modules folder ?
you can think of the node_modules folder as a cache for external modules that your project depends upon. like when you install some packages from NPM (Node js Package manager) it will download the packages from a website and copy them into the node_modules folder.
Note: 💡 you don’t need to upload the node_modules folder into your Github repository because it takes a lot of space.
What is the purpose of the public folder ?
In React, the “public” folder serves as a repository for static files like index.html, JavaScript library files, images, and various assets, which you prefer not to undergo processing by Webpack. These files are directly copied and pasted into the build folder, maintaining their original structure and content. Within React applications, files stored in the “public” folder can only be referenced from the HTML. To leverage files stored in the “public” folder within a React project, one effective approach involves utilizing the .env (environment) file. This file serves as a container for environment variables, including URLs pointing to the required files. By storing the URL in the .env file, it becomes accessible throughout the project, enabling components and JavaScript files located in the “src” folder to utilize these resources seamlessly. This method ensures straightforward to access and utilization of files stored within the “public” folder as per the project’s requirements.
What is the purpose of the src folder ?
The SRC folder is the place where I spend a lot of time when working on a project. src folder is the most important folder that entire The folder is css, js, and app.js, index.js files. The index.js file is where I render the App component to the DOM.
What is the purpose of the package.json ?
This file is used as a manifest, storing information about applications, modules, packages, and more. for more detail, you can visit the official NPM website blow about package.json
What is the purpose of the package-lock.json ?
The “package-lock.json” file in npm simply serves as a lock file that captures the exact versions of packages and their dependencies. It ensures that the same versions of packages are used across different installations or environments. This consistency prevents unexpected changes in package versions and helps avoid compatibility issues. When you install or update packages using npm, it checks the “package-lock.json” file to ensure the specified versions are installed. This lock file is especially important when collaborating on projects, as it guarantees that all contributors use consistent package versions.