React developer tutorial:

Hey there everyone. Today in this article I am gonna be teaching you react. Now remember this would be a series of react tutorial and in each series I am gonna discuss each core concept of react briefly. This series is worth of paid Udemy courses. If you follow this series correctly then I can assure you that you will be react developer in no-time. This series also contain bonus stuff like redux and react native. So now let’s get started:

Agenda for today:

Today I will going to tell you what is react, it’s advantages, it’s role in industry, concepts we are gonna cover in this whole course, prerequisites you should know in order to learn react, create react app and the basic structure of a react application and also how it is compiled using babel.

What is React?

React is a JavaScript library for building user interfaces. It was created by Facebook around 2004. It is a very strong library and uses components to build interfaces. React has a very large community so you can assume that every time you put a question related to react, Someone would eventually reply it within 24 hours. Also react has a very good documentation. The documentation is very brief. Many large companies like Facebook, Instagram, Twitter and many more companies uses react. One disadvantage of react is that it is not beginner-friendly. This means that you will certainly find yourself in certain circumstances when you are not understanding even a bit of a particular concept in the beginning and that is totally fine. Just make sure that in the beginning you understand at least 55% of the topic. When you will be working with projects than the concepts will become more clear.

Prerequisites you should know in order to learn react

Html, css and javascript are these three things you must know in order to learn react. React uses all these three concepts. Besides these three concepts you should also know command line in order to start the application and install dependencies. Even if you know the basics of these concepts then that’s enough. But even if you don’t know these concepts then you can checkout some online Youtube courses on each of them.

Concepts we will be covering in this course

In this course we will be covering main fundamentals of react which includes es6, state management, props, react router, lifecycle methods, callback methods, dealing with api’s, react context api, class based components and functional components, forms in react, dealing with authentication in react, structure of a react application and how a react application is compiled and a last concept which is babel. Besides these main concepts you will also learn redux, react dev-tools, styled-components and react-native

Environment setup

In order to start coding react you should install some things. The first thing you need to install is node.js. You can go to their website and install node.js from there. Next you will be installing a very useful tool called create-react-app. In order to install it go to node.js terminal and run the following command:

npm i -g create-react-app

This will install create-react-app globally. Create-react-app is a very useful tool to make a react-application. Without this tool creating a react application would be such a nightmare.

STRUCTURE OF A REACT APPLICATION

Before discussing the structure of a react application you need to create one. To create a react application open up your terminal and cd into documents folder. A quick note that it is just my preference to cd into documents, you can select any folder you want. Then run the following command which will create a react application.

create-react-app hello-world

this command will create a react application called hello-world. Let me tell you the logic behind this command. create-react-app command creates a react application and also set’s up a default template for a react-app. then after create-react-app we also have to write the name we want our application to be called off. In this case it is hello-world. Now open up your code editor and select the hello-world folder. My preference is vs code editor because it has a number of useful extensions we are gonna be using. Now if you open up hello-world folder then the structure of it should be like this one over here

This is the basic structure and template you are gonna be seeing in react-applications. The node modules contains dependencies for react application. The public folder has a index.html file from which react-application would run. The main folder is the src folder. It contains all the react code we are gonna be working with. The main files we are gonna be working with in the beginning are app.js and index.js . App.css and index.css just contain default styling for our react application. App.test and serviceWorket are more of testing files which are used for testing a react application. These will be untouched throughout the course as they are not of much importance. The rest of the files we will cover later throughout the course. Now before jumping in all the files are trying to understand the code you will need to learn es6 which is like html. Now es6 is a very vast topic so we will touch that in another article but for now let’s just run our application. To run a react.js application you will need to open up the terminal, cd into your project root directory and running the following command:

npm start

This command will open up the browser on localhost:3000. If you go to localhost:3000 then you will saw something like this.

This is your first react application. Now don’t worry if you don’t know how it happened, we will be discussing all of this in the next article.

Thanks guys for reading this article. Make sure to give this a clap and also follow me and now I am gonna be meeting you in the next story

I AM A FULL STACK FRONT-END WEB DEVELOPER AND TEACHES PEOPLE WEB DEVELOPMENT AND I AM ALSO A FREELANCER AND HAVE A PART-TIME JOB