Skip to main content

Creating a React Application (From scratch vs from create-react-app)

 

React is a very popular front end java-script library which is created and maintained by Facebook. It can be used to build responsive single page applications. There are several ways to initiate a react project. Either you can build from scratch or use a tool-chain recommended by the react team.

Building from scratch

To build a react project from scratch you have to initiate a node project by issuing the command 'npm init'. Then you can issue the command 'npm install react-router-dom' to install the dependencies related to react.

Then you have to add 2 files, index.html and index.js. Instead of index.js index.jsx also can be used. These files can be added to the root directory itself. When building an application from scratch there is no restrictions as to the directory structure. But it is always a good practice to maintain proper directory structure. When building from scratch you can also use tools like webpack or parcel for bundling.


Building using create-react-app

The react team recommends several tool chains for building a react application rather than building a react application from scratch. Among those tools there are ones like Next.js, Gatsby. In this article let us focus on Create React App which the team describes as "a comfortable environment for learning react". 

When using this tool chain you have to issue the command 'npx create-react-app <app-name>' (assuming that node.js is already installed) and it will create a react application with react dependencies with a folder structure. This method is an officially supported way of creating react applications and gives build with no configurations. Obviously in a convenience perspective this is the easier way to create a react application.  Once created, using 'npm start' you can start the application. 

However you must note that index.js and index.html whcih are created must not be altered and js and css files should be only put in src directory for webpack to pickup them. This tool chain uses webpack , Babel and ESLint among other projects.

 

Which should you use?

For most, they will feel like using create react app will be more suitable for them as it is easy to setup and get running. Even for beginners, a react application can be set up easily that way. It manages all the dependencies and configurations for you and even updating is easier.I

If one needs more control over which dependencies and modules they use from the beginning they will benefit  more from building the react application from scratch. However,  if one needs to take control of configuration, when using  create react app, they can "eject" from create react app and edit configuration files directly. Also, it will be helpful for react developers to know the process and tools involved in building a react application from scratch and for that at some point they should have created a react application from scratch.

So, when determining which method should one use when creating a react application, it concerns the aspects like the degree of configurations that we need to perform and tools that we need to use.

Comments

Post a Comment

Popular posts from this blog

Flutter for mobile development

As a person who is enthusiastic about programming and developing, I constantly look for new technologies and trends that emerge. Flutter came under my radar a couple of years ago when I was researching about mobile application development.  At that moment, my mobile development skills were limited, but nevertheless, I decided to give it a try. It interested me as it promised to help the developer make an application that would run on android, iOS, an even the web with one code base. I completed one or two tutorials offered by the flutter developer site itself but as time went on due to other areas of my studies I had to focus on, flutter slowly slipped away from me. Fast forward to today, and I have received a fair amount of beginner experience on native android development and I decided to try out flutter again. Although it offers many options, I mainly focused on mobile development. What is flutter?   Flutter is a UI toolkit offered by google intended to be used to devel...
Post a Comment
Read more

Installing Ubuntu desktop for Dual Booting with Windows

      Introduction Ubuntu is a Linux distribution published by the canonical team. The term ‘Ubuntu’ is an ancient African word meaning ‘humanity to others'. Ubuntu is a freely available desktop operating system that is easy to use. There are other versions of Ubuntu that are targeted for Servers, IoT and Cloud as well. In this article we are going to focus on installing Ubuntu desktop on a personal machine. Why Ubuntu? There can be several reasons for a person to use Ubuntu as their Operating System on the machine they use. The first obvious point is that is free to use. Therefore, some people may like to use this for their computational tasks. Some people can have use cases that will require a Linux system (or a UNIX like OS) such as programming in C or android platform development (which can be harder or impossible to perform on a Windows environment). For those people, a Linux distribution will be a good option (Since other UNIX like Systems can be cos...
Post a Comment
Read more

Application Frameworks Project - Review-2

This post focuses on the project of developing a 'Conference Management Tool' under Application Frameworks module. The review of the first phase of this module can be found here . This is the second part of the review. Once the basic upload and download functionalities are developed, the upload component was needed to be associated with the registration of the research paper presenter. Since the registration form was necessary to be developed for that to be done, the integration part will be done in a future point. This might be a place where the methods of a nested component will have to be called from a parent component. Apart from just uploading and downloading research papers there were other functionalities that needed to be addressed. The reviewers must be able to approve or reject the research papers after reviewing them. There might be situations that research papers get rejected and researchers need to re-upload the modified file under the same id. There might also be...
Post a Comment
Read more