React SetUps and File Structure
E.Tulasi Ram
Posted on September 3, 2024
1. Install Node.js and npm
Node.js is a JavaScript runtime that allows you to run JavaScript on the server side, and npm (Node Package Manager) is a tool for managing packages (libraries) for Node.js.
- Download and install Node.js from Node.js official website. The installation includes npm, so you don't need to install npm separately.
- Verify installation:
node -v
npm -v
These commands should print the versions of Node.js and npm if the installation was successful.
2. Create a New React Project
Using npx (recommended):
- Open a terminal (Command Prompt on Windows, Terminal on macOS/Linux).
- Run the following command:
npx create-react-app my-react-app
Replace my-react-app with your desired project name. This command uses npx to run create-react-app without installing it globally.
3. Navigate to Your Project Directory
Change to your project folder:
cd .\my-react-app\
4. Start the Development Server
- Run the development server:
npm start
This command starts the development server and opens your application in the default web browser at http://localhost:3000. The server will automatically reload the page whenever you make changes to the source code.
5. Explore the Folder Structure
Here’s a breakdown of the folder structure created by create-react-app:
my-app/
├── node_modules/
├── public/
│ ├── index.html
│ └── manifest.json
├── src/
│ ├── components/
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ └── reportWebVitals.js
├── .gitignore
├── package-lock.json
├── package.json
└── README.md
-
public/: Contains static files that are served directly by the server.
index.html: The main HTML file where your React app is injected.
favicon.ico:The icon displayed in the browser tab. src/: Source code of the React app.
index.js: Entry point that renders the root component.
App.js: Main React component to edit and display content.node_modules/: Installed npm packages.
package.json: Project metadata, dependencies, and scripts.
package-lock.json: Locks dependency versions.
.gitignore: Files and directories to be ignored by Git.
README.md: Documentation for your project.
Create a React Component
- React components can be either class-based or function-based. Function components are more common, especially with the use of Hooks. Here's an example of a simple function component:
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
- This component returns some JSX, which looks like HTML but is actually JavaScript.
Posted on September 3, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.