Creating Your First React App
Introduction
Now that you’ve set up the development environment, it’s time to build your first React app! In this lesson, we’ll walk through creating a simple application, explore the default code structure provided by React, and see how to customize it by adding a few basic components.
Step 1: Setting Up Your First React App
-
Open Your Terminal
- Navigate to the directory where you want to create your React project. You can use the
cd
command to change directories. - For example:
cd path/to/your/directory
- Navigate to the directory where you want to create your React project. You can use the
-
Run
create-react-app
-
Run the following command to create a new React app using
create-react-app
:npx create-react-app my-first-app
-
Replace
my-first-app
with your desired app name.
Note:
npx
runscreate-react-app
without needing a global installation. The tool sets up your project with the required React files and dependencies. -
-
Navigate to Your Project Directory
- Once the setup completes, navigate into your project directory:
cd my-first-app
- Once the setup completes, navigate into your project directory:
Step 2: Running Your React App
-
Start the Development Server
- Run the following command to start the app:
npm start
- This command will start a development server and automatically open the app in your default browser at http://localhost:3000.
- Run the following command to start the app:
-
View the Default React App
- In your browser, you’ll see the default React app interface, which includes a spinning React logo and some welcome text. This is the starter code generated by
create-react-app
.
- In your browser, you’ll see the default React app interface, which includes a spinning React logo and some welcome text. This is the starter code generated by
Step 3: Understanding the Default Project Structure
When create-react-app
creates a new project, it organizes your files into a standard structure:
- node_modules/: Contains all the libraries and dependencies installed by npm.
- public/: Contains the main HTML file (
index.html
) that serves your app and other static assets (images, fonts). - src/: This is the main folder for your app’s code. Important files include:
- App.js: The main component that defines your app’s structure and renders other components.
- index.js: The entry point of the app, where
App.js
is rendered to the DOM. - App.css: Default styling for the
App.js
component.
Key Files in src/
- App.js: A basic React component that currently displays a logo and some text.
- index.js: The entry file for the app. Here, React’s
ReactDOM.render()
method renders theApp
component inside theindex.html
file.
Step 4: Modifying the Default Code
Let’s make some changes to personalize the app and better understand React’s structure.
-
Open
App.js
- In your code editor, open
App.js
located in thesrc
folder. You’ll see a basic React component with JSX code rendering the logo and text.
- In your code editor, open
-
Edit
App.js
to Display a Custom Message- Replace the content in the
<header>
with a simple greeting, like so:function App() { return ( <div className="App"> <header className="App-header"> <h1>Welcome to My First React App!</h1> <p>This is a simple React application.</p> </header> </div> ); } export default App;
- Replace the content in the
-
Save and View Changes
- Save
App.js
. The React development server will automatically reload, and you’ll see the updated message on the browser.
- Save
Step 5: Adding a New Component
To learn more about React, let’s create a new component.
-
Create a New Component File
- In the
src
folder, create a new file calledGreeting.js
.
- In the
-
Write a Basic Greeting Component
- Inside
Greeting.js
, add the following code:import React from 'react'; function Greeting() { return ( <div> <h2>Hello, React Learner!</h2> <p>This is your first custom component.</p> </div> ); } export default Greeting;
- This is a functional component that returns some JSX.
- Inside
-
Import and Use the Greeting Component in
App.js
- Open
App.js
and importGreeting
at the top:import Greeting from './Greeting';
- Add the
Greeting
component within theApp
component:function App() { return ( <div className="App"> <header className="App-header"> <h1>Welcome to My First React App!</h1> <Greeting /> </header> </div> ); }
- Save the file, and you should now see the greeting message in your app.
- Open
Step 6: Styling Your App
To style your React app, you can edit the App.css
file.
-
Open
App.css
- Modify the
App.css
file to style your new elements:.App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; } h1 { color: #61dafb; }
- Modify the
-
Save and View Changes
- Save
App.css
, and the browser will refresh with your updated styles.
- Save
Troubleshooting Common Issues
- Error: Command Not Found: Ensure Node.js and npm are installed, and check the terminal path.
- Page Not Loading: Make sure you’re navigating to
http://localhost:3000
in your browser. - Live Reload Not Working: Check if your code editor is set up to save files automatically or press refresh manually in the browser.
Conclusion
Congratulations! You’ve successfully created, modified, and personalized your first React app. You’ve learned how to:
- Set up a new React project using
create-react-app
- Run a development server to view changes instantly
- Modify the default structure and create custom components
- Style your components using CSS
In the next lesson, we’ll dive into React components in detail, exploring the differences between functional and class components and learning how to build more interactive elements.