Hey Everyone!! Hope you guys are Fine. For those who are starting up with React, this post will ease your process of Creating a React App in 4 Steps. Let’s get into the Post.
React is one of the Famous frameworks and most efficient frameworks available in the market. Top most companies today are using React as their Front-end Framework.
List of Contents
How to Create a React App in 4 Steps
In this post, I’ll be showing you How to Create a React App From Scratch with Javascript and also Typescript. Well, let’s go one at a time. First, let me tell you about my hands-on experience with react and then let’s get inside the topic of How to Create a React App From Scratch. Well if you are someone who is getting migrated from angular to React like me, you may take some time to adapt to it. If you ask me Do you Like React? At first no, But after using it in my workplace yes!! I do like the Framework.
You can create and work on React with JavaScript and Typescript. Before starting up just be sure which one is suitable for your work. I have worked on React JavaScript during my course but in my workplace, I work on React Typescript which I feel a bit of relief while migrating from Angular. But working on JavaScript is quite easy but, once you work with TypeScript you won’t be switching back to JavaScript.
In this post, Let’s see How to Create a React App in 4 Steps.
Step 1 – Install Your IDE
Well, Everyone has different tastes when it comes to IDE. One of my favourite and most go-to-place is the Visual Studio code editor (VS Code). I work on almost all the frameworks there. It has a separate fan base and it’s easily one of the best IDE available out there in the market. If you are new to Development I would suggest the Vs Code. I’ll give you the link below to download the VS Code if you are new.
I use it because it’s lightweight and easy to use.
Step 2 – Create a New Project
Well before Creating a New Project, Create a Particular folder that would act as a workspace where we will continue to work on our product. Next, open our workspace folder in the Vs Code and Open your Terminal. Install the Nodejs framework so, it will be easy while you go to your next step.
To check the version on your current node js type in npm -v. Now, you have to Type in npx create-react-app first-app on your Terminal and click Enter.
Boom!!!. your First-app is created. This includes all your node modules inside your application.
You can also choose your package manager, if you don’t like to use the npm then you can replace the npx with Yarn and then execute the Command.
Step 3 – Choose a Template
If you are aware of typescript / used to typescript, then you can choose a Typescript using a template. This can be started using the Command npx create-react-app my-app –template typescript. If you choose not to use the template then, the project will be created with the base template. Personally, I prefer to use the typescript a lot as it is easy to identify the errors, in the first place.
The Base template would be the Javascript.
Step 4 – Run and Build your React app
Once you have completed the installation process, navigate to the project folder using the command, cd first-app. To start the development server in order to check whether your app is running, type in the command npm start in your terminal.
You can now start building your React app. Edit the files in the “src” folder to add your own code. To build your app for production, you can run the command npm run build to create a production build for your First react application.
That’s how you create a react app. Start building and explore !!! For more information react application, check out their official documentation by clicking the below button,
Do keep your GitHub profile updated with whatever you have built with the react app so you can showcase your portfolio’s your Interviewer. See you in another post. Bye bye!!!
Like this Post? Do share it with your friends
Continue reading my posts on-
- How to Create Polls on your WordPress Website.
- Importance of Having a Portfolio
- Easy And Secure Authorize.net Form Solution [WPForms]
- How to Easily Create Awesome Exit Intent Popups that Drive Sales
- Travel, Thunderbird and Coffee
- How To Automate Your Work With Zapier And WPForms
Leave a Reply