What is ReactJs?
ReactJs builds the UI (User Interface) based on the concept called Component. The UI view is split into reusable and manageable small segments called components. The ReactJs renders the user view based on those components. Therefore ReactJs is all about splitting the UI into components and render the UI based on those components.
What is NPM (Node Package Manager) ?
NPM was initially developed as the package manager of the NodeJs. Therefore NPM is distributed (available) with the NodeJs installation.
NPM (Node Package Manager) and NodeJs Server
Here we are going to create a project that manage its dependencies with NPM. Therefore if you dont have the NPM installed in you development environment, please visit the NodeJs website and install the NodeJs. If you instal the NodeJs, you will get both NPM (Node Package Manager) and NodeJs Server. Since the Node Server is available, it can be used as a development server to deploy the project files.
create-react-app is a command line utility that can be used to create ReactJs application (through command line).
First of all make sure that create-react-app utility is installed in your development environment. If not, you can install it with following command.
npm install create-react-app -g
-g :- this indicates that this tool should be globally installed. Therefore you can execute the create-react-app tool globally (anywhere).
Creating new ReactJs Project.
You can execute following command to create new reactJs project with create-react-app utility.
e.g:- create-react-app sample-reactjs-app
After successfully executing the above command, it will create a new ReactJs project with following directory structure.
No Babel or Webpack Installation/Configuration Needed!
This is one of the main advantage of using create-react-app utility for creating ReactJs projects.
create-react-app utility creates the ReactJs application with inbuilt support of babel and webpack. That means they are already installed and configured when the project is created. Therefore the developers do not have to put an additional effort on installing and configuring those tools and they can directly use them.
Ejecting app with npm run eject
When you create a project with Create React App, all the build settings are preconfigured. That means you’re not able to change anything about your build setup. For example, you don’t have access to a webpack.config.js file. It’s all managed for you by a single build dependency: react-scripts.
But you don’t have to be locked into the build tool and configuration choices of Create React App. You can customize the setup to your liking, by running the
eject command. Ejecting gives you full control over the configuration files and dependencies, like Webpack, Babel and ESLint.
Ejecting forks Create React App’s configuration and moves it into your project. After the eject script runs, you’ll see a ‘config’ directory added to your project containing files like webpack.config for dev and production, and a webpackDevServer.config.js file.
Be careful with this step, because running eject is a permanent action. Once you eject, you can’t go back.
After ejecting you continue building your app as you normally would, and all of the commands (like
build) will still work. But at this point you’re on your own. So you shouldn’t need to use eject in your projects unless you know exactly what you’re getting into.
Running the ReactJs App
Go to the project directory and execute the following command in terminal.
This will run the app in development mode.
Open http://localhost:3000 to view it in the browser.
The page will automatically reload if you make changes to the code. You will see the build errors and lint warnings in the console.