Setting up a React project from scratch
I have just launched ProgrammerJournal.com. A standalone blog where I write about Javascript, Web development and software development.
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.
In the above snippet firstly we are creating a directory named reactProject and 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
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 .
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
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
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
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
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.
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-loader, css-loader & less-loader before so let’s install them.
Okay now let’s tell our webpack config where to output our bundle.js file
Our last step to end our webpack configuration will be providing the options for our dev server.
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 app when 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.
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 use webpack for deploying this project from development to production.
Until then share this tutorial with everyone who can find this tutorial helpful.
Hi, My name is Manoj Singh Negi. I am a Javascript Developer and writer follow me at Twitter or Github.
I am available to give a public talk or for a meetup hit me up at justanothermanoj@gmail.com if you want to meet me.
Really loved this article ?
Please subscribe to my blog. You will receive articles like this one directly in your Inbox frequently.
Here are more articles for you.
- Throttle function in javascript with the example
- React Context API Explained
- Introduction to Haskell Ranges
- HOC ( Higher-order components ) in ReactJS explained
Peace.
let people know on twitter.
