Welcome to
MRN TECHNOLOGIES
React – Introduction and Setup
What are the prerequisites for learning React?
To learn React, you should know JavaScript,
including arrays, classes, objects, and ES6
features like arrow functions. HTML is also
mandatory since React components involve
rendering HTML elements.
What is ReactJS?
ReactJS is a JavaScript library used to
build and arrange user interfaces for web
applications. It focuses on creating web
applications using components, which are
reusable building blocks of code.
What is a component in React?
A component in React is a self-
contained section of code that
functions as a reusable
building block.
What is JSX and how is it used in React?
JSX is a file extension of JavaScript
known as JavaScript XML. It allows you
to write HTML-like code within your
JavaScript files, making it easier to
integrate HTML with React components.
What is the Virtual DOM and why is it used in React?
The Virtual DOM is a lightweight version of the real DOM of a web page. It helps keep track of changes
made to it, and only applies those specific changes to the real DOM without needing to refresh the entire
web page, reducing rendering performance overhead.
How do you install [Link] and why is it necessary for React?
[Link] can be downloaded from [Link]. It is necessary for React because it provides a backend
JavaScript runtime environment and includes the Node Package Manager (npm), which is used to manage
packages and dependencies for React projects.
What is a text editor and why is it needed for React development?
A text editor is a program used for editing plain text files. For React development, a text editor like Visual
Studio Code (VS Code) is recommended as it provides features that aid in coding, such as syntax
highlighting and debugging tools.
How do you create a new React project using npm?
To create a new React project, you use the command `npm create vite@latest`,`npx create-react-app
demoProject --template typescript` in the terminal or command prompt within your project folder. This
command sets up a new React project with a development server.
What is the purpose of the 'node_modules' folder in a React project?
The 'node_modules' folder contains external libraries and packages that the React project relies on,
including build tools, utility libraries, and routing libraries.
What is the role of the 'public' folder in a React application?
The 'public' folder in a React application contains public assets such as fonts, images, and videos that are
not bundled during the final output and are typically available via a URL.
How do you create a new component in React?
To create a new component in React, you create a new .jsx file, define a function with the name of the
component, and export it using `export default`. Within this function, you can return a combination of
JavaScript and HTML to define the component's structure.
key-points:
The Virtual DOM in React is a lightweight
React is a JavaScript library for building user representation of the real DOM, enabling efficient
interfaces, not a framework. updates by only applying changes to the real DOM
when necessary.
Components in React are reusable sections of code, Prerequisites for starting with React include
akin to Legos, that can be assembled to form knowledge of JavaScript, HTML, and CSS, as well as
complex web applications. familiarity with ES6 features like arrow functions.
[Link] is required for React development,
JSX, or JavaScript XML, is a syntax extension that
providing a backend JavaScript runtime
allows writing HTML-like code within JavaScript
environment and the Node Package Manager
files.
(npm).
key-points:
React components can contain both JavaScript logic and
The project structure of a React application
HTML structure, and can be styled with CSS, either through
includes folders like 'node_modules' for external dedicated stylesheets or inline styles.
libraries, 'public' for public assets, and 'src' for
source code.
Install NodeJs (LTS).
To create a new React project, use the `npm create
vite@latest (create-react-app)`, `npx create-react-app
demoproject --template typescript`, command, which cd demoproject
sets up a development environment with a modern
toolchain.
npm install bootstrap
Components are imported and used within other
components by referencing them within the return
statement, allowing for a modular and
npm start
maintainable codebase.
Official Site for documentation and references:
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]
Thank You
All The Best!
