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>;
};
