Okay, so I have explained to you the reasons behind this journey, why React and what is so special about it. So now in order to start everything I had to set up the environment.
I will show you in this post the tools I used and feel free to follow if you want to have your environment set up easily.
Part 1: basic tools
First of all, the choice of the editor.
Some amazing features offered by this tool are :
- Peek view
- Intellisense(Love it)
- Integrated terminal
- Built-in Git
- Task Runner
- Built-in Node.js Debugger
And all this comes for free on their official website where you can download it.
Next, I needed to install two things, Node.js and Yarn.
I went to this link and downloaded the first.
I just followed the wizard here, in case you are following this and you have got problems you can try to get help here.
To verify that node was correctly installed I used(Windows environment) :
When you install node, you also get npm(node package manager). This allows us to install various components like Yarn. I ran the npm -v to check for its installation
Now its time to install yarn, I ran the :
npm install -g yarn
command and successfully installed it.
Once the installation was done, I checked once again using the :
command that everything was okay.
And there, I was almost ready to start coding in React.
Okay so now the steps to follow were very easy, basically what I did was :
- Create a folder for my project, in my case the folder was at : Desktop/react-projects/thecoderswag
- Open the folder with visual studio code
Now, when you create a web app you need some way to serve it and visualize it. In my case I used live-server. Just typed in the command prompt:
npm install -g live-server
Always remember to verify the installation using :
Now, to see our first page, we need to make four other little steps(I know this is a long process).
- Create a folder inside your visual studio project, name it as you prefer(I called this: public in my case). Here we will put the content we want to serve as part of our page using live-server
- In order to know if everything is okay with the server, put some content inside this folder, like an index.html file. This will be the file you will see at the end of the process.
- Then we will need to move inside the folder we created for the project using the prompt.
So in my case :
At this point, We just need to type in: live-server *name of the folder we created*
Desktop/react-projects/thecoderswag> live-server public
If everything went fine, you should see your browser opening at the localhost:8080 address automatically displaying the index.html file content. Please also notice that every modification you will make to the file will be immediately reflected to the page unless there are errors in the code.
Okay, so this was the environment setup for React. In the next post, I will show you the first piece of code I have written and an introduction to use, write, and compile a JSX file using Babel.
Thank you for reading, stay tuned.
Be positive, happy learning.