I was thinking of learning about Reactjs from last few years. But somehow I couldn't make it. I know it's too late but finally, I begin towards that, and this is the very first post in the Reactjs category.
I have done tons of projects in Angular but never got the opportunity to work on a React project. So I've decided to create dummy projects at the end of the whole learning.
Let's begin now.
To start with any development project, we need to setup a development enviorment. Today, there are many poular online IDEs available where project-setup can be done instantly. However, I personally prefer the local development setup for most of the projects.
I work in Windows OS, so all the steps below, would be in that context only.
npm i create-react-app -g
npx create-react-app my-app
Once the project creation is successful, you can switch over the project directory and run the project.
cd my-app npm start
As mentioned above, there are other online options available where you can just bypass the manual efforts.
Just to give a name of few, you can head over to the below links and decide the most suitable for you.
I personally prefer CodeSandbox.
If you are traditional web developer and know nothing about ReactJS but still want to feel the react app then you can quickly make use of the CDN.
You can simply include below scripts to your HTML page and boom, you are up with the Reactjs setup. Now you can play around it.
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
Well, this is it. We are done with the first step on the journey of learning Reactjs and our application can be seen now in the browser -
Next, we would understand the scafolding or architecture of a Reactjs project.
Stay tuned and happy coding :)