React project setup — without any boilerplates
--
There are a ton of great boilerplates (create-react-app, slingshot, etc) that help you save time and kick-start your app. But most of the time using a boilerplate can be more confusing than setting things up yourself. In this post lets see how we will install everything directly from scratch.
first things first, Lets Installing node and npm (following are for centos or amazon linux)
$ sudo yum install -y gcc-c++ make
$ curl -sL https://rpm.nodesource.com/setup_12.x | sudo -E bash -
$ sudo yum install -y nodejs# Verify installation
$ node -v
$ npm -v
Create the Project Base Directories
Use the following command to create the project directory and then its base subdirectories and the webpack.config.js file that we will be needing.
$ mkdir <Project Name> && cd $_$ mkdir -p src/{components,containers,styles,utils,views} && touch webpack.config.js
In the same directory, let’s create our node project by using the npm init -y (-y for accepting all the defaults and not to answer any questions) command. After this command finishes, we’ll have a package.json in the same directory, which will allow us to define a repeatable process for building our app in future and in other machines.
Installing and Configuring Babel
Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don’t support certain features natively, Babel will help you compile those features down to a supported version.
In the same directory as the package.json, let’s install our babel requirements:
$ npm install --save-dev babel-core babel-preset-env babel-preset-react babel-preset-react-hmre babel-preset-stage-0- babel-preset-env for compiling modern Javascript down to ES5
- babel-preset-react for compiling JSX and other stuff down to Javascript
Note: You should commit the file package-lock.json also (not only package.json). So you should add this to your version controlling system.
