Add React into Your Existing Project: A Step-by-Step Guide
If you’re looking for a JavaScript framework, React is your best bet. Quickly and easily create feature-rich web applications with its help. Additionally, it facilitates the integration of third-party components, such as the React image uploader, into your ongoing project.
It just takes a few lines of code. Because of this, things might become simpler for you. When attempting to incorporate React into an ongoing project, where does one even start, or should we hire reactjs team? This article has all the necessary information.
Would it really be that simple to incorporate React into an already-existing project?
Incorporate React into Your Current Project: Essential Resources
- Before you continue, make sure Node is installed on your computer. Feel free to get it from nodejs.org. You must be using Node version 10 or later.
- The following need is npm, the node package manager. Automatic installation on your PC will be done by Node. Make sure you’re using npm version 5.2 or later.
- Finally, a trustworthy code editor is a must-have. On the internet, you could discover a plethora of potential answers. Visual Studio Code is an intuitive editor. Its popularity among programmers is immense.
Use React in Your Existing Web App or Project
Applying a React component to an already-existing HTML page is the subject of this tutorial. Observe these procedures:
Step 1: Include the DOM container in the HTML
Start by opening the HTML page that you want to modify. Craft a div element devoid of any content. Show off the upgrades here by putting React to work.
Here we have the
<div id="medium_blog_container"> <!-- Here we will mount our component --> </div>
Step 2: Add script or react tags
Next, you need to add three <script> elements to the HTML page before to the closing </body> tag.
Through the first two tags, React is loaded.
Step 3: Create the component code
A file called medium_post_component has to be included in your HTML page
React may be built in JSX or in a non-JSX format.
<!DOCTYPE html> <title>Add React in One Minute</title </head> <body> <p>This page using React with no build tooling.</p> <p>React is loaded as a script tag.</p> <!-we will put our React component inside this div. -><div id="like > <!Load React. <h2>Add React in One Minute</h2> <! <script " <script " crossorigin -Note) when deploying, replace "development.js" with "production.min.js", <!-Load our React component, <script > </body>
Add React to Existing Project – Add JSX To A Project
No complicated tools, such as a bundler or development server, are required to incorporate JSX into a project. The method of including a CSS preprocessor is really very similar. However, Node.js has to be installed on your machine. It is very necessary.
Integrating JSX couldn’t be easier. Here are the basic procedures that must be adhered to:
Use the terminal to go to the folder where your project is saved.
Now, run the following command.
npm init -y
Execute the command npm init -y. In the event that the last attempt was unsuccessful, you may try this:
npm install babel-cli@6 babel-preset-react-app@3
That’s it! You now have a production-ready JSX setup in your project.
Add React to Existing Project – Run JSX Preprocessor
In order to start the JSX preprocessor, a folder called “src” has to be established. After that, type this into the terminal:
npm install babel-cli@6 babel-preset-react-app@3
Be wary of the following warning: “You have mistakenly installed the babel package”; it appears when you least expect it. You could have forgotten about the previous step. Running it in the same directory could make it work. It should fix the issue.
You are not need to remain still until the treatment is finished. With the aforementioned command, you may set up an automated watcher for JSX.
If you create a file in the src folder with the name like button.js, the watcher will produce that file. It will include simple JavaScript code that is compatible with browsers.
On top of that, you may use it to take advantage of the most recent syntactic advancements in JavaScript. You may use classes without worrying about compatibility issues with older browsers, for example.
Keep in mind that npx does not indicate an error. A package execution tool is pre-installed with npm 5.2+.
Add React to Existing Project – Using Fetch To Make HTTP Calls in React
The Fetch() API is available to browser users. With it, you may make HTTP calls. What follows is an analysis of the Fetch API’s standard syntax.
let response = fetch( API_URL, .... (some more options) );
In this case, you’re calling the getNames function. It is able to retrieve data. On top of that, it gets other parameters, like—
- It’s a great way to tell what sort of HTTP request you’re getting.
- You may use it to set content request headers or permission headers.
- The “mode” property tells us whether the mode is cors or no-cors.
- You may send extra information to the server using the “body” component of a request.
To illustrate how a React component may use Fetch, consider the following:
async getName(){
//With .then and .catch section
let response = await fetch("https://jsonplaceholders.com/users")
.then(resposne => {
return response.json();
setNames(response )
})
.catch(error => {
console.log(error);
});
}
Tips for Adding React to Existing Project
-
Reuse a Component
You would want to have React components shown in several places on an HTML page. Here are the measures to take in that direction:
Navigate to the HTML file that you own. Insert the lines that follow:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Add React in One Minute</title> </head> <body> <h2>Add React in One Minute</h2> <p>This page demonstrates using React with no build tooling.</p> <p>React is loaded as a script tag.</p> <p> This is the first comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="1"></div> </p> <p> This is the second comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="2"></div> </p> <p> This is the third comment. <!-- We will put our React component inside this div. --> <div class="like_button_container" data-commentid="3"></div> </p> <!-- Load React. --> <!-- Note: when deploying, replace "development.js" with "production.min.js". --> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <!-- Load our React component. --> <script src="like_button.js"></script> </body> </html>
-
Go to your JavaScript file. Insert this code:
const LikeButton = ({ commentID }) => {
const [liked, setLiked] = React.useState(false);
if (liked) {
return `You liked comment number ${commentID}`;
}
return (
<button onClick={() => setLiked(true)}>
Like
</button>
);
};
// Find all DOM containers, and render Like buttons into them.
document.querySelectorAll('.like_button_container')
.forEach(domContainer => {
// Read the comment ID from a data-* attribute.
const commentID = parseInt(domContainer.dataset.commentid, 10);
const root = ReactDOM.createRoot(domContainer);
root.render(
<LikeButton commentID={commentID} />
);
});
Conclusion
Simply said, you have gained the knowledge necessary to incorporate React into an ongoing project. You also have a solid grasp of useful tips, such as how to reuse components and minify JavaScript so it’s ready for production. You may immediately start using React and hire reactjs developer for your next project to effortlessly improve your existing applications and include amazing features.