React - Inroduction and Fundamentals.pdf

This slide gives the introduction on react if you are new to react + how to set up react on your systems.

1. Introduction
REACT

2. React is a popular JavaScript library used to build
user interfaces (UIs), especially for web applications.
It was developed by Facebook and is widely used
by developers around the world to create
interactive and dynamic websites.
React helps you create web pages that can update
and display information quickly without needing to
reload the entire page.
What is React?

3. Component-Based: React allows you to break down
your UI into small, reusable pieces called components.
Each component is a building block that can be reused
throughout your application, making development more
efficient.
Virtual DOM: React uses a virtual DOM to manage
updates efficiently. When the state of an application
changes, React updates only the parts of the DOM that
need to be changed, rather than reloading the entire
page. This results in faster performance, especially for
complex applications.
Why React?

4. Declarative Syntax: React allows developers to write
code in a declarative style, meaning you describe what
you want the UI to look like, and React handles the
updates. This approach simplifies the development
process and makes code easier to understand and
debug.
Strong Ecosystem and Community: React has a large
and active community, which means there are plenty of
resources, libraries, and tools available to help you with
development. This strong ecosystem makes it easier to
find solutions to problems and integrate with other
technologies.
Why React?

5. Install Node JS.1.
2. Verify Installation To make sure Node.js and npm are
correctly installed.
Open your terminal or command prompt.
Type node -v and press Enter. You should see the
Node.js version number.
Type npm -v and press Enter. You should see the npm
version number.


Setting up React?

6. 3. Create a New React Project
In your terminal, navigate to the folder where you want to
create your project using the cd command and run the
following command:
npx create-react-app my-app
Replace my-app with your project name.
This command will create a new folder with your project’s
name and set up everything you need to start working with
React.
Setting up React?

7. 4. Start the Development Server to see your React app in
action.
In your terminal, run:
npm start
Setting up React?

8. Identify and Remove Unnecessary Files:
You don’t need all the files that come with the default React
setup. Here's what to remove:
setupTests.js: Used for testing, but you can delete it for
now.
reportWebVitals.js: Used for performance monitoring,
not needed at the moment.
logo.svg: The default React logo image, which you won't
use.
index.css: The default CSS file, which you’ll remove to
keep things simple.
App.test.js: Another testing file you can delete.
Setting up React?

9. Since you deleted some files, you also need to remove
their import statements in the index.js file.
Delete the line that imports index.css and
reportWebVitals.js:
import './index.css';
import reportWebVitals from './reportWebVitals';
In App.js, remove the code that imports the React logo
and any unnecessary content.
Delete the line that imports logo.svg:
import logo from './logo.svg';
Setting up React?

10. Replace it with:
function App() {
return (
<div>
Hello World
</div>
);
}
export default App;
This code will display "Hello World" on your webpage.
Setting up React?

11. Thank You