ReactJs Environment Setup Steps
In this article we are going to see how to setup our Reactjs Project Environment, with the help of this article you will be able to set up Reactjs Project Based Environment and learn what are the basic packages, files & folders need to be installed and create before you been your actual Project.
For Implementation follow steps as below:
1. Create the folder for the project. Open command-line on that folder and type command.
2. Now install two libraries with –save, which let it know these given libraries are for production, you can check in package.json after completion of below command. Can find Two productions Dependencies.
3. Now we will include our development dependencies, webpack for binding our work, webpack-dev will be the development server, babel-loader act as a loader, –save-dev is used for development dependencies which will not be loaded in production, type following command.
4. Create an src folder in your project where you will be keeping all your source code.
5. In src, create folder name app and filename index.html(this will the main entry point of our application).
6. Create a file in your project folder name webpack.config.js and copy the following code.
7. Create a new file in app folder with name index.js print console message.
8. Now edit the index.html file and copy following code.
9. For running your project you need to make some changes in the package.json file simply replace script tag with the following code.
For Windows users:
For MAC users:
10. Your setup is completed now just type this on the command line(make sure you’re in the project folder).
You can see in command line project is running on http://localhost:8082 Open it in your browser and see in your browser console can see console message there.
That’s it, Congratulations You’re setup is up and running.