This content originally appeared on DEV Community and was authored by Drishti Saraf
ReactJS is a powerful JavaScript library for building user interfaces. Created by Facebook, it's widely used for its component-based architecture and the ability to build fast and interactive web applications.
Step 1: Prerequisites
Before diving into React, make sure you have the following installed:
- Node.js and npm
React relies on Node.js and npm (Node Package Manager) to manage dependencies. To check if they’re installed, run:
node -v
npm -v
If not installed, download and install the latest version of Node.js from nodejs.org.
- A Code Editor
I recommend using Visual Studio Code for its features and extensions tailored to JavaScript and React development.
Step 2: Setting Up a React Project
There are two primary ways to set up a React project: using Create React App or Vite. Here, we'll use Create React App for simplicity.
- Install Create React App
Run the following command to globally install Create React App:
npm install -g create-react-app
- Create a New React Project
Create a new project named my-react-app:
npx create-react-app my-react-app
- Navigate to Your Project Directory
cd my-react-app
- Start the Development Server
Run the following command to start your React app:
npm start
This will open a new tab in your browser at http://localhost:3000, where you can see the default React app running.
Step 3: Understanding the Project Structure
Your new React project will have the following structure:
my-react-app
├── public
├── src
│ ├── App.css
│ ├── App.js
│ ├── index.css
│ ├── index.js
├── package.json
├── node_modules
public: Contains static files like index.html.
src: Contains your React components and styles.
package.json: Manages project dependencies and scripts.
Step 4: Creating Your First Component
React apps are built with components. Let’s create a simple HelloWorld component.
- Create a New File
Inside the src folder, create a file named HelloWorld.js:
src/HelloWorld.js
- Write the Component
Add the following code to HelloWorld.js:
import React from 'react';
function HelloWorld() {
return (
<div>
<h1>Hello, World!</h1>
<p>Welcome to your first React component.</p>
</div>
);
}
export default HelloWorld;
- Import and Use the Component
Open App.js and modify it to include your new component:
import React from 'react';
import HelloWorld from './HelloWorld';
function App() {
return (2. Write the Component
Add the following code to HelloWorld.js:
import React from 'react';
function HelloWorld() {
return (
<div>
<h1>Hello, World!</h1>
<p>Welcome to your first React component.</p>
</div>
);
}
export default HelloWorld;
<div className="App">
<HelloWorld />
</div>
);
}
export default App;
Save the file, and your browser should display the "Hello, World!" message.
Step 5: Styling Your Component
React allows you to style components using CSS. Let’s style the HelloWorld component.
- Create a CSS File
Create a file named HelloWorld.css in the src folder:
src/HelloWorld.css
- Add Styles
Add the following CSS:
h1 {
color: #61dafb;
font-family: Arial, sans-serif;
}
p {
color: #282c34;
font-size: 18px;
}
- Apply the Styles
Import the CSS file in Helloworld.js
import React from 'react';
import './HelloWorld.css';
function HelloWorld() {
return (
<div>
<h1>Hello, World!</h1>
<p>Welcome to your first React component.</p>
</div>
);
}
export default HelloWorld;
Save the file, and you’ll see the updated styles in your browser.
Step 6: Adding More Components
You can continue building your app by creating more components and importing them into App.js. Each component can have its own logic, structure, and styles.
Conclusion
Congratulations! You’ve just set up your first React project and created your first component. This is just the beginning of your React journey. As you grow, you’ll explore more advanced topics like state management, routing, and API integration. Happy coding!
If you found this tutorial helpful, share it with others and stay tuned for more React tutorials!
This content originally appeared on DEV Community and was authored by Drishti Saraf
Drishti Saraf | Sciencx (2025-01-23T05:32:09+00:00) Getting Started with ReactJS. Retrieved from https://www.scien.cx/2025/01/23/getting-started-with-reactjs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.