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 develop applic
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 cost prohibit
Post a Comment
Read more

V8s, Monkeys and Chakras of the web world.

At present, many people are connected to the internet and actively using web browsers. So it will be interesting to have a look at JavaScript engines which make these browsers the kind of software they are. What is a JavaScript engine? A java script engine is a program that is mostly run in browsers which executes JavaScript codes. Most of the time, these engines use C++. These are also known as ECMA script engines since ECMA script is the standard specification for java script. First java script engines were interpreters. First java script engine was created in 1995, by Brendan Eich for the Netscape Navigator Browser. This evolved into spidermonkey engine which is used in Firefox browser. Today, most of the java script engines are developed and distributed by web browser vendors like Mozilla and google. Java script engines are run in browsers via the Document Object Model together with the rendering engines. Today java script engines are not only used for browsers, but for other fr
Post a Comment
Read more