Setup a React App From Scratch

That means WITHOUT create-react-app

Create React App can be a very useful tool if you want to get started with React as quickly as possible. It can however be buggy, and if you always set up your applications by using an automated tool then you’re not really learning how React works.

This guide will teach you step by step how to get a React application rendering starting from nothing but an empty project folder.

.babelrc

webpack.config.js

database <folder> (We won’t cover this part in this tutorial because setting up a database is 100% dependent on what database you choose to use. This is worthy of its own tutorial)

public <folder> (stores: bundle.js / index.html / style.css / any other static assets)

client <folder> (stores: React Components)

As with any node application run npm init and npm install

Then we’ll start with our compilers, because without anything to compile our code, browsers will not be able to interpret what you wrote.

In an empty project folder create a file named “.babelrc”

Then just add the loaders to your file … (the first one is to compile modern javascript down to es5 and the second is to compile react into javascript)

Thats it for this file so now onto……

Create a file named “webpack.config.js”

…

mode (sets production or development mode)

entry (sets the starting point of where your app begins compiling)

filename: ( usually named bundle.js )

test ( checks if the file matches these extensions if so use the loader below )

exclude ( excludes files you specify here)

loader (the loader you need to use the test files)

DON’T FORGET THE HTML

In your index.html file make sure you have a script sourcing your bundle

In the body create a <div> with an Id that you will use to attach your app to the DOM

Generally you will have an index.jsx file that simply imports the App and then uses ReactDOM.render to attach it to the DOM (a components folder on the same level holds your app components)

Go ahead and create a file in the client folder called index.jsx.

Heres what it will look like

Now we’ll just create one component called app.jsx and place it in a folder called components on the same level as index.jsx

This is whats called a Class Component (There are also Functional Components Too)

CONGRATS NOW YOU’RE READY TO CODE WITH REACT

This tutorial was just to help you create a running React application environment. To learn the language itself please check out the documentation. You’ll be hard pressed to find docs as good as these!

If you found this article helpful please leave a clap!

Related posts:

All exams were canceled due to covid-19. Due to which the neet examination to be held on 5 June 2020 was also postponed. In such a situation, all the students are at home and preparing for their…

Community-based rehabilitation or CBR in India hast to promote, implement, and support the rehabilitation activities at the community level and even for facilitating the referrals to gain access to a…

I have a lot of credit card debt with the majority being on 2 lines of credit (one is almost 10,000 and the other is about 28,000). I have other credit cards but they are all manageable and within…