Learning React Development: Introduction with create-react-app

You can find various documents and tutorials over the internet to learn how to create react applications, even I too did learn from them. In fact, most of them were too much confusing.

If you are someone like me who is more into textual guides rather than video guides, this is for you! Also for the beginners who are learning to create react applications without any previous knowledge of ReactJs. Well, then let’s start learning.

What is React?

In most simpler words, react is a frontend Javascript library that uses components as its building blocks.

It is defined as an efficient, flexible, and declarative Javascript library for building User Interfaces composed of smaller code snippets called Components.

Setting up first React App

The quickest and easy way of creating a react app is as follows:

npx create-react-app my-app
cd my-app
npm start

Here, we are using the create-react-app dependency for setting up our first react web app using a single command with the node package manager. It removes your headache from initializing your development environment by installing all major node modules with this one command.

To start with the application, you can cd to your app and type npm startor yarn start to start the app in your browser.

Folder Structure of React App

The create-react-app will be preparing your project with necessary folders, as follows(explained as the image hierarchy):

create-react-app folder structure

README.md: a plain text file that contains all the information about your project and dependencies.

node_modules: a cache for the external modules that your project depends upon.

package.json: a JSON file that contains the exact version of dependant modules you were using is known and stored in your package.json

.gitignore: a plain text file where each line contains a pattern for files/directories to ignore.

public: the index.html file in public folder is editable, and you can include stylesheets and scripts within that. Also, you can replace logos and favicon in the folder with your custom preference.

src: you can customise this folder as you like,and only the files inside this folder are processed by the webpack. You will be exporting these elements to the root of index.html file in the public folder (usually from the index.js).

Well, that’s all about the folder structure of your react app.

Running the React App

Your react app can be executed using start, test and build commands using your package managers.

npm start or yarn start — runs the app in development mode. It’ll open your app in your default browser at https://localhost:3000. Your changes will automatically reloaded once you save the file.

npm test or yarn test — runs the test watcher in an interactive mode.

npm run build or yarn build — builds the app for production to the build folder.

That’s how you begin with react application! Hope this helps you understand the very basics of react development environment.

Happy coding. 😍