Course Content
Mastering React
1. Introduction to React Fundamentals
2. Styling in React Apps
3. React Hooks and Context
Mastering React
Starting the Project
Step 6: Initialize the Project
To start the project, we'll use the terminal. Follow these steps:
- Open the terminal in your code editor (if not already open);
- Run the following command and press
Enter
:
The npx
command is used to run the create-react-app
package without needing to install it globally. The dot (.
) at the end specifies that the project should be set up in the current directory.
Note
The project initialization may take some time. Let your machine handle the setup process.
![content](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-in-real-world/npx.png)
When it's finished, you'll see the message in the terminal: Happy hacking!
.
![content](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-in-real-world/happy+hacking.png)
In addition to the confirmation message, the project root directory will have the following structure:
![content](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-in-real-world/roote+of+the+project+folder.png)
Step 7: Begin Customizing
With the project set up, it's time to start coding and customizing it to your needs. Here's what you need to know:
- Your primary focus will be inside the
src
folder; - Within the
src
folder, you'll find various files. To create your personalized project, you can delete all of them; - Follow the project architecture you used in CodeSandbox. Create an
index.js
file as the main entry point, and build the entire project inApp.jsx
; - Organize your components and styles by creating new folders as needed.
Step 8: View Your Project
To view the live page of your project, execute the following command in the terminal and press Enter
:
![content](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-in-real-world/npm+start.png)
This will launch your React app, and you can access it in your web browser.
![content](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-in-real-world/standart+react+app.png)
Everything was clear?
Course Content
Mastering React
1. Introduction to React Fundamentals
2. Styling in React Apps
3. React Hooks and Context
Mastering React
Starting the Project
Step 6: Initialize the Project
To start the project, we'll use the terminal. Follow these steps:
- Open the terminal in your code editor (if not already open);
- Run the following command and press
Enter
:
The npx
command is used to run the create-react-app
package without needing to install it globally. The dot (.
) at the end specifies that the project should be set up in the current directory.
Note
The project initialization may take some time. Let your machine handle the setup process.
![content](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-in-real-world/npx.png)
When it's finished, you'll see the message in the terminal: Happy hacking!
.
![content](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-in-real-world/happy+hacking.png)
In addition to the confirmation message, the project root directory will have the following structure:
![content](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-in-real-world/roote+of+the+project+folder.png)
Step 7: Begin Customizing
With the project set up, it's time to start coding and customizing it to your needs. Here's what you need to know:
- Your primary focus will be inside the
src
folder; - Within the
src
folder, you'll find various files. To create your personalized project, you can delete all of them; - Follow the project architecture you used in CodeSandbox. Create an
index.js
file as the main entry point, and build the entire project inApp.jsx
; - Organize your components and styles by creating new folders as needed.
Step 8: View Your Project
To view the live page of your project, execute the following command in the terminal and press Enter
:
![content](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-in-real-world/npm+start.png)
This will launch your React app, and you can access it in your web browser.
![content](https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-in-real-world/standart+react+app.png)
Everything was clear?