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?
Prerequisites you should know in order to learn react
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
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.
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:
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