How to create your first reactjs app using create-react-app

How to create your first react app using create-react-app :

For running a react application, we need a couple of tools. We need one package manager, one bundler and one compiler. Package manager is used to manage third party packages. For example, you can use yarn or npm. Bundler is used to bundle the code. We can use bundler like webpack or parcel. And the third one is a compiler like babel. It is little bit complex for setting up a react project from scratch. Apart from these three things, we also need to prepare it for development and production.

But to make this easier, facebook team has created one open sourced project to create one react project with a single command. It is packed with all the required tools and it is the best way to initialize a react project if you want to just concentrate on code.

In this post, I will show you how to use create-react-app to start one react project.

create-react-app :

You can see the open sourced create-react-app here on github. You can use it to create one basic reactjs application on windows, macos or linux.

You need node 8.16.0 or 10.16.0 or later version to use this.

To use it, open your terminal, move to a folder and run any of the below command:

npx create-react-app my-first-app

or

yarn create react-app my-first-app

Or, you can use npm :

npm init react-app my-first-app

It will create one folder my-first-app with the reactjs project in it.

Here,

• node_modules: This folder holds all node libraries including reactjs libraries and other third party libraries. It is a best practice to add this folder to the .gitignore file. Because, its size will be huge based on the library numbers and you can recreate it using npm install command.
• public: This folder holds the index.html file and other public assets.
• src: This folder is for the souce code files. i.e. all js files, css files etc.
• package.json: This file includes different information like all third party library and their versions, project name, project versions, different commands etc.
• package-lock.json: This is auto generated file.

Now, open your terminal and run the below command in this folder:

npm start

or

yarn start

It will start the app in development mode. Open your browser and open http://localhost:3000 to view the current running reactjs app.

If you make any change in your code and save it, it will reload this screen automatically.

Live reload:

Go to your src folder and edit your App.js file as below:

function App() {
  return (
    <div>
      Hello
    </div>
  );
}

export default App;

Save it and check your browser. It will reload and show you Hello word. As I mentioned before, it reloads automatically.

Creating a production build:

Production build is different that development. It is optimized for best performance. To create a production build, open your terminal and run the below command:

npm run build

or

yarn build

It will create one new folder called build in the project directory.

You might also like:

• An introduction to Reactjs for beginners
• Typechecking in react js using propTypes
• Find the file name, size, type and modified date of a file in ReactJS