Setting up a React project from scratch

Setting up a React project from scratch

0
389
views
Setting up a React project from scratch
Setting up a React project from scratch

Setting up a React project from scratch can be a daunting task for beginners. Lots of npm modules to install, lots of configuration and other tasks.

( This is the first part for second part click here )

There are lots of react project seeds we can use in place of starting a project from scratch but then they come with a lot of boilerplate hard to make sense for a beginner who is just starting out.

I was rebuilding my personal website in react and come with the idea to share with you all how I will be building that project from scratch.

So let’s just get started. Fire up your terminal. 🙂

The entire tutorial code is hosted on Github here.

let’s start by creating a node project. In your terminal type these command.

mkdir reactProject
 cd reactProject
 npm init // start a node project

 

In the above snippet firstly we are creating a directory named reactProjectand then inside it, we are running the command npm init to start a new node project.

You will be prompted to input information about your project. You can just press enter for every choice. if you wish to add information about your project go ahead.

Now our node project is up and running.

Our next step will be installing react & react-dom

 

npm install –save react react-dom

We are going to use webpack for bundling our code into one js file. So our Next step is to install webpack and webpack-dev-server .

 

npm install –save webpack webpack-dev-server

The webpack lib is used to bundle and output out js code in the location we specified. The webpack-dev-server lib will help us to run development server which will give use benefits like hmr & live reload .

Now we will be needing babel to convert our es6 code to es5 browser understandable code. Let’s install babel

 

npm install –save-dev babel-cli babel-core babel-loader babel-plugin-transform-object-rest-spread babel-preset-es2015 babel-preset-react babel-preset-stage-0 babel-register

We have installed babel and its supporting libs. Let’s configure our react app so it will make use of babel transpile our code into es5. Inside your package.json write

 

// your package.json file

 

babel: {
presets: [
es2015,
react,
stage-0
],
plugins: [
transform-object-rest-spread
]
}

 

 

Basically, we told our app to make use of babel presets. By adding presets now babel can understand our es6/react code and can convert it to es5.

We also installed a babel plugin which can understand the new rest/spread operator syntax.

Let’s move on to webpack. As you already know we have to configure the webpack to make use of our babel loader to transpile and output our bundle.js file.

in your project root dir create a folder named webpack

 

mkdir webpack
cd webpack 
touch webpack.dev.config.js

 

 

We created a folder named webpack and inside it created an empty file webpack.dev.config.js.

in your webpack.dev.config.js import webpack and define a entry point

 

var webpack = require(webpack);
var path = require(path);
module.exports = {
entry: [
path.join(__dirname, ../index.js)
]
}

 

let’s add some loaders which will be responsible to bundle our source files.

inside your webpack.dev.config.js below entry add these lines.

 

var webpack = require(webpack);
var path = require(path);
module.exports = {
entry: [
path.join(__dirname, ../index.js)
],
module: {
loaders: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: babel-loader
},{
test: /\.less$/,
loaders: [style-loader, css-loader, less-loader]
}
]
},
}

 

 

As you can see we setup babel-loader for loading js/jsx files and used less-loader for loading less files.

In order to user less-loader we also have to install style-loader and css-loader which will directly append CSS to our index.html

we didn’t install style-loadercss-loader & less-loader before so let’s install them.

 

npm install –save-dev style-loader css-loader less-loader
npm install –save-dev less

 

 

Okay now let’s tell our webpack config where to output our bundle.js file

 

output: {
path: __dirname + /dist,
filename: bundle.js
}

 

 

Our last step to end our webpack configuration will be providing the options for our dev server.

 

devServer: {
contentBase: __dirname + /dist,
historyApiFallback: true
}

 

 

Here is what our whole webpack.dev.config.js looks like I also added the parentDir variable to make referencing our parent directory easy.

 

Now let’s create our index.html. Inside your project root dir create an index.html file.

 

In our index.html we have a mount point <div id="app"></div> and we also added the source to our bundle.js file.

Next step will be building our index.js file which will be the entry point for our webpack configuration. Inside you dir create index.js

 

We imported react & react-dom from their respective packages. Our main app will be inside the ./containers/App . Atlast we rendered our app into our main html node which is <div id="app"></div>.

Now let’s quickly create an App.js to hold our whole application. Inside your app directory create a folder named containers and inside that App.js

 

Open your App.js file inside it add this code.

 

We create a simple component which will display This is my new react appwhen rendered.

let’s check our app in the browser to see if it works or not.

but before that let’s add a npm script which will help us to launch the dev server by just typing npm run dev in the console.

in your package.json inside script object add a dev script

 

now you are good to go.

in your console type npm run dev and goto http://localhost:8080 you will see your app working perfectly.

App running perfectly 🙂

This is it for now. You can play with this setup for a while Here is the second part where I will be using redux & react-router in this project.

Also there will be third a part as well where I will show you how to usewebpack for deploying this project from development to production.

Until then share this tutorial with everyone who can find this tutorial helpful.

Next articleWhatsApp’s new Terms of Service hints at deeper integration with Facebook, Instagram
Niranjan Reddy (@ursNj) is the CEO and co-founder of Riosh Technologies, Riosh Technologies is responsible for developing many user engaging products. I'm responsible for the company's overall vision and strategy as well as day-to-day operations. Since the beginning, I'm focused on simplicity and inspiring creativity through solving problems with thoughtful product design. As a result, Riosh Technologies has become the home for visual storytelling for everyone from celebrities, newsrooms and brands, to teens, musicians and anyone with a creative passion.
SHARE

LEAVE A REPLY

Please enter your comment!
Please enter your name here