Updated February 14, 2023
Introduction to ReactJS New Project
ReactJS is one of the easy ways to build our own project as well as it is an ideal choice for large-scale applications. Basically, it is an easy way for beginners to quickly create a project and configure it according to our requirements. In reactjs we can configure all settings and dependencies through the code mean we avoid the manual work in reactjs and it is an efficient way to create a project.
Key Takeaways
- We know that reactjs provides a reusable feature to the user which means we can reuse different components which we already created.
- It provides interactive, user-friendly GUI to the user as well as provides quality of work so it reduces the effort of the developer.
- It provides the data changes feature to the user so it automatically makes the alteration of the UI.
Overview of ReactJS New Project
Reactjs is sometimes used as a frontend JavaScript framework. Beginning new Respond projects used to be an immense issue – – there were many conditions, setup records, and other front-and-center prerequisites before you might begin composing a solitary line of Response code. With so many build tools, starting a new React project can be very difficult. Before writing a single line of React code, it makes use of numerous configuration files, dependencies, and other requirements like Babel, Webpack, and ESLint. Create React App CLI tool simplifies and eliminates all of these complications. To accomplish this, you must use NPM to install the package, then execute a few straightforward commands to create a new React project.
Enter the make respond application, the device delivered by Facebook’s designing group that permits you to turn up a new Respond application in only a couple of moments. They do this by wrapping the ordinary conditions (babel, and so forth) so you can simply zero in on composing the Respond code itself. It is a great piece of software that is already becoming the standard method for managing React projects.
How to Create New ReactJS Project?
UI code can be organized using the React library, which breaks it up into components. Data management and routing are not handled by Reactjs. As a result; there are a few different ways to begin a new React project.
First, we need to start the HTML file with a script tag. This has few features but does not require the setup of Node.js. After that, we need to start with a simple toolchain and gradually add more features to your project.
Finally, start with a framework that is opinionated and already includes common features like data fetching and routing.
1. First, we need to install Node.js and after that, we need to open the terminal and execute the below command for new project creation as shown in the below screenshot.
2. In the second step, we need to run our created project with the help of the command as shown in the below screenshot.
How to Create a New Project App in ReactJS?
Let’s see how to create a new app as follows:
1. First, we need to create a new project with the help command as shown in the below screenshot.
2. In the above screenshot we can see, here we created my-sample-project. Now move inside the project and run it by using the below command.
cd my-sample-project
npm startOur project will be created and structured as shown in the below screenshot.
In the details structure, we can see in the screenshot below.
When we create a project reactjs, it creates different files automatically, let’s see them one by one.
- Node_module: It is used to store the react library as well as all third-party libraries which are used.
- Public: It is used to store all public elements that index the file of react which is used to mount the application.
- Src: It is used to store the App.js, App.test.js, and index.css of an index as well as worker.js file which means it contains all the front-end files used in react application.
- package-lock.json: It is generated automatically for any actions in which the npm package modifies package.json or the node_modules tree. It cannot be made public. If it finds a place other than the top-level package, it will be ignored.
- package.json: It is used to store the metadata of our created project as well as provide more information about the npm that is all dependencies.
- README.md: It is used for documentation of different react points.
Now let’s see an example, here we created HTML code to directly implement Reactjs as follows:
Code:
<!DOCTYPE html>
<html>
<head>
<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>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="sampledivid"></div>
<script type="text/babel">
function Mysampleproject() {
return <h1>Hi this is an welcome program to user</h1>;
}
ReactDOM.render(<Mysampleproject />, document.getElementById('sampledivid'))
</script>
</body>
</html>Output:
Explanation:
- In the above example, we try to print sample text shown in the above code with the reactjs.
- After execution of the above code, we get what is shown in the below screenshot.
How to Run your React Project?
Let’s assume we have already created the project and we need to run a react project, so first, we need to start the npm with the help of the command which is shown in the below screenshot.
After execution of the above command, the browser will open, and the development server will get started with localhost. Here we can see the home of the application, which is shown in the below screenshot.
Basically, this page will be from the App.js file which is present under the src folder. If you want to change this content, we can easily change it as per our requirements.
Now let’s see how we can execute the specific test from the application with the help of the command which is shown in the below screenshot.
So, in this way, we can run the react application and as per our requirement, we can make the change in a different file.
Conclusion
From the above article, we saw the basic concept as well as the syntax of the ReactJS new project and we also saw the different examples of the ReactJS new project. From this article, we saw how and when we use the ReactJS new project.
Recommended Articles
This is a guide to ReactJS New Project. Here we discuss the introduction, how to create and run new ReactJS project. You can also look at the following articles to learn more –
