Scribd
Upload
12 views20 pages

React JS

This document provides a comprehensive guide on setting up a React JS project using create-react-app, creating components, and applying styles. It includes code snippets for creating a HelloWorld component, integrating it into the main App component, and demonstrates JSX syntax and rendering elements to the DOM. Additionally, it covers concepts like conditional rendering and updating rendered elements in real-time.

Uploaded by

collegedev77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views20 pages

React JS

This document provides a comprehensive guide on setting up a React JS project using create-react-app, creating components, and applying styles. It includes code snippets for creating a HelloWorld component, integrating it into the main App component, and demonstrates JSX syntax and rendering elements to the DOM. Additionally, it covers concepts like conditional rendering and updating rendered elements in real-time.

Uploaded by

collegedev77
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

React JS

: By Dr. Chintan Bhatt, CSE-SoT, PDEU


To change a paragraph of text in the browser
using jQuery…
$('#para1').html('<p>This is the new paragraph.</p>');
Setting Up Your React Project
Next, we move on to setting up your React project using create-react-app, a
tool to create a React JS application template with a well-organized
structure.

Open your terminal or command prompt and run the following command to
install create-react-app globally:

npm install -g create-react-app


Now, to create a new React project, use the command below:

npx create-react-app hello-world-react


Navigate to your project’s directory:

cd hello-world-react
Creating Your First React JS Component
1. Identifying Components And Props
2. Creating The HelloWorld Component
3. Integrating The HelloWorld Component
(1) Locate src/App.js
function App() {
return (
<div className="App">
{/* Your code will go here */}
</div>
);
}

export default App;


(2) Next, we create a new component called
HelloWorld. Create a new file named
HelloWorld.js in the src directory.

import React from 'react';

function HelloWorld() {
return (
<div>
Hello World in React JS
</div>
);
}

export default HelloWorld;


(3)
The next step is to integrate it into our App component. Open the src/App.js file again and modify it
to include the HelloWorld component by importing it at the top of the file and using it within the
JSX code.

import React from 'react';


import HelloWorld from './HelloWorld';

function App() {
return (
<div className="App">
<HelloWorld />
</div>
);
}

export default App;


Applying the styles defined in the CSS file to
our component

function HelloWorld() {
return (
<div>
<h1>Hello World in React JS</h1>
</div>
);
}

export default HelloWorld;


Create a new CSS file named HelloWorld.css in the
src directory and add the following styles to it:
.helloWorld {
color: green;
text-align: center;
margin-top: 20%;
}
Next, import this CSS file into your HelloWorld.js
file and apply the class to your div tag as follows:

import React from 'react';


import './HelloWorld.css';

function HelloWorld() {
return (
<div className="helloWorld">
<h1>Hello World in React JS</h1>
</div>
);
}

export default HelloWorld;


JSX
Element
const element = <h1>Hello, world</h1>;

Embedding JavaScript In JSX

const name = ‘Chintan Bhatt';


const element = <h1>Hello, {name}</h1>;

Self-Closing Tags In JSX

const element = <img src="path/to/image.jpg" alt="A description" />;

Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen.
Conditional Rendering In JSX
const isLoggedIn = true;
const element = (
<h1>
{isLoggedIn ? 'Welcome back!' : 'Please log in.'}
</h1>
);
Rendering an Element into the DOM
Let’s say there is a <div> somewhere in your HTML file:

<div id="root"></div>

import React from 'react';


import ReactDOM from 'react-dom/client';

function Hello(props) {
return <h1>Hello World!</h1>;
}

const container = document.getElementById("root");


const root = ReactDOM.createRoot(container);
root.render(<Hello />);
Updating the Rendered Element
const root = ReactDOM.createRoot(
document.getElementById('root')
);

function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
root.render(element);
}

setInterval(tick, 1000);
ParentC
class ParentComponent extends Component {
render() {
return (
<h1>
I'm the parent component.
<ChildC />
</h1>
);
} const ChildC = () => {
} return <p>I'm the 1st!</p>;
};

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy