How to set up a React project from scratch?
The thrill of creating a React project from scratch is incomparable. This process not only allows us to customize the development to our needs, but also to understand in depth each piece of the puzzle that makes up our application. Let's explore how you can do it in an orderly and effective way, making sure to prepare all the essential configuration.
How to clone and prepare the startup repository?
The first essential step when starting a new project is to clone the startup repository. This repository will act as the base of our project. To do this, use the following command in your terminal:
git clone <URL_REPOSITORY_URL> .
Remember to position yourself in a directory where you have easy access and control of the cloned repository. Once cloned, access the cloned directory to continue with the configuration.
What dependencies do we need to install first?
With the working directory ready, the first task is to install the basic dependencies for React, which are react
and react-dom
, as shown below:
npm install react react-dom --save
Use the --save
argument to register these libraries as core project dependencies. This is crucial, as React and React DOM will be the core of the UI development.
How to initialize the project with npm init?
After the previous installations, we need to perform the npm project initialization that will set up our package.json
. This file plans the project's dependencies and scripts:
npm init -y
The -y
argument serves to automatically answer the default npm init questions, creating a basic package.json
immediately.
Structuring the React project
A well-defined structure of our project is essential for a coherent and effective organization. Here are the steps to set up a basic structure in React.
How to structure the main folders and files?
Start by creating the most important folders and files to organize your React project:
-
Folder src
: Contains the source code of the application.
-
Index.js
file: It will serve as the entry point.
-
Components
folder: It will store the various React components.
-
App.jsx
file: It will be the main component of our application.
-
Public
folder: It will store publicly accessible files, such as the base HTML file:
- File
index.html
: The main HTML document.
How to set the entry point and main component?
Open the index.js
file in the src
folder and set up the initial imports. The basic structure should look as follows:
import React from 'react';import ReactDOM from 'react-dom';import App from './components/App';
ReactDOM.render(<App/>, document.getElementById('app'));
In App.jsx
, define the component:
import React from 'react';
const App = () => <h1>Hello React</h1>;
export default App;
This will be the main component that will load when you start the React application.
How to create the initial index.html
file?
Inside the public
folder, create index.html
with a simple structure. Use this base in the file:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ReactApp</title></head><body> <div id="app"></div></body></html><body> </html>.
The app
id is crucial as it will be the point where your React application will be assembled.
Preparing and compiling the project with Webpack
Now that the React base is defined, it is time to configure Webpack to manage the compilation and preparation of the project for production.
What are the steps to configure Webpack?
Configuring Webpack can be tricky, but by following these basics, you will be able to prepare your project for production efficiently, allowing the code to compile and optimize properly. Keep practicing and feel free to explore the additional materials to boost your React and Webpack skills!
Want to see more contributions, questions and answers from the community?